Bug 1900126 - Update sidebar settings fonts/spacing r=reusable-components-reviewers,sidebar-reviewers,nsharpley,hjones

Differential Revision: https://phabricator.services.mozilla.com/D213330

browser/components/sidebar/sidebar-customize.css

@@ -4,7 +4,20 @@
 
 .container {
   padding-inline: var(--space-small);
-  font-size: 15px;
+  font: menu;
+
+  > * + * {
+    margin-top: var(--space-xlarge);
+  }
+
+  > .customize-header + * {
+    margin-top: var(--space-medium);
+  }
+}
+
+.customize-header-heading {
+  font-size: 1.467rem; /* Bug 1901872: replace with var(--font-size-xlarge) */
+  margin: 0;
 }
 
 .customize-header {
@@ -31,25 +44,23 @@
   .extensions {
     display: flex;
     flex-direction: column;
-    gap: var(--space-medium);
+    gap: var(--space-large);
+    margin-top: var(--space-small);
   }
 
   .extension-item {
     display: flex;
-    gap: var(--space-medium);
+    gap: var(--space-small);
     align-items: center;
-    font-size: 0.9em;
   }
 }
 
+.customize-extensions-heading {
+  margin: 0;
+}
+
 #manage-settings {
   display: flex;
   align-items: center;
-  gap: var(--space-medium);
-  margin-block-start: var(--space-xxlarge);
-  font-size: 0.9em;
-
-  .icon {
-    background-image: url("chrome://browser/skin/preferences/category-general.svg");
-  }
+  gap: var(--space-small);
 }

browser/components/sidebar/sidebar-customize.mjs

@@ -155,12 +155,12 @@ export class SidebarCustomize extends SidebarPage {
       <link rel="stylesheet" href="chrome://browser/content/sidebar/sidebar-customize.css"></link>
       <div class="container">
         <div class="customize-header">
-          <h2 data-l10n-id="sidebar-menu-customize-label"></h2>
+          <h2 class="customize-header-heading" data-l10n-id="sidebar-menu-customize-label"></h2>
           <moz-button
             class="customize-close-button"
             @click=${this.closeCustomizeView}
             view="viewCustomizeSidebar"
-            size="default"
+            size="small"
             type="icon ghost"
           >
           </moz-button>
@@ -173,7 +173,10 @@ export class SidebarCustomize extends SidebarPage {
         ${when(
           extensions.length,
           () => html`<div class="customize-extensions">
-            <h5 data-l10n-id="sidebar-customize-extensions"></h5>
+            <h5
+              class="heading-medium customize-extensions-heading"
+              data-l10n-id="sidebar-customize-extensions"
+            ></h5>
             <div role="list" class="extensions">
               ${extensions.map((extension, index) =>
                 this.extensionTemplate(extension, index)
@@ -182,7 +185,7 @@ export class SidebarCustomize extends SidebarPage {
           </div>`
         )}
         <div id="manage-settings">
-          <span class="icon ghost-icon" role="presentation"></span>
+          <img src="chrome://browser/skin/preferences/category-general.svg" class="icon" role="presentation" />
           <a
             href="about:preferences"
             @click=${this.openFirefoxSettings}