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

@@ -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] {

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) {

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 {

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) {