From e20ef934b51b0da28cbbf53941f996326ea0b3c0 Mon Sep 17 00:00:00 2001
From: Nikki Sharpley <nsharpley@mozilla.com>
Date: Wed, 29 Nov 2023 15:13:44 +0000
Subject: [PATCH] Bug 1854599 - Fix Cards sub-headings and spacing to spec
 r=desktop-theme-reviewers,fxview-reviewers,kcochrane,jules,dao

- Increase vertical padding for card subheaders
- Updated device headers to font size 15px
- Decreased space between rows to 6px
- Fix vertical alightment of headers and rows
- Update device headers to fontweight 500

Differential Revision: https://phabricator.services.mozilla.com/D193848
---
 browser/components/firefoxview/card-container.css   | 4 +++-
 browser/components/firefoxview/firefoxview-next.css | 2 ++
 browser/components/firefoxview/fxview-tab-list.css  | 2 +-
 browser/components/firefoxview/view-syncedtabs.css  | 4 ++--
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/browser/components/firefoxview/card-container.css b/browser/components/firefoxview/card-container.css
index b46e88badbb8..dca8b0d574b0 100644
--- a/browser/components/firefoxview/card-container.css
+++ b/browser/components/firefoxview/card-container.css
@@ -18,7 +18,7 @@
 
 .card-container-header {
   display: inline-flex;
-  gap: 16px;
+  gap: 14px;
   width: 100%;
   align-items: center;
   cursor: pointer;
@@ -26,6 +26,8 @@
   outline-offset: 4px;
   padding: 6px;
   padding-inline-end: 0;
+  margin-block-end: 6px;
+  height: 24px;
 }
 
 .card-container-header[withViewAll] {
diff --git a/browser/components/firefoxview/firefoxview-next.css b/browser/components/firefoxview/firefoxview-next.css
index 1e516019e67f..ad97fad883e8 100644
--- a/browser/components/firefoxview/firefoxview-next.css
+++ b/browser/components/firefoxview/firefoxview-next.css
@@ -28,6 +28,8 @@
 
   /* copy over newtab background color from activity-stream-[os].css files */
   --newtab-background-color: #F9F9FB;
+
+  --fxview-card-header-font-weight: 500;
 }
 
 @media (prefers-color-scheme: dark) {
diff --git a/browser/components/firefoxview/fxview-tab-list.css b/browser/components/firefoxview/fxview-tab-list.css
index c3f0a943c83b..157c30ff4c5d 100644
--- a/browser/components/firefoxview/fxview-tab-list.css
+++ b/browser/components/firefoxview/fxview-tab-list.css
@@ -5,7 +5,7 @@
 .fxview-tab-list {
   display: grid;
   grid-template-columns: min-content 3fr 2fr 1fr 1fr min-content;
-  gap: 8px;
+  gap: 6px;
 }
 
 :host([compactRows]) .fxview-tab-list {
diff --git a/browser/components/firefoxview/view-syncedtabs.css b/browser/components/firefoxview/view-syncedtabs.css
index 8ba2d2d35016..83898bba95f1 100644
--- a/browser/components/firefoxview/view-syncedtabs.css
+++ b/browser/components/firefoxview/view-syncedtabs.css
@@ -35,7 +35,8 @@ h3.device-header {
   display: grid;
   align-items: center;
   cursor: inherit;
-  font-weight: 600;
+  font-weight: var(--fxview-card-header-font-weight);
+  font-size: 1em;
   grid-template-columns: min-content 1fr;
   gap: 0 16px;
   margin: 0;
@@ -44,7 +45,6 @@ h3.device-header {
 h3.device-header:not([slot=header]) {
   margin-block: 0.7em;
   margin-inline: 0.5em 0;
-  font-size: 1em;
 }
 
 h3.device-header:not([slot=header]):not(:first-child) {