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

@@ -3,7 +3,16 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 .container {
-  font-size: 15px;
+  padding-inline: var(--space-small);
+  font: menu;
+
+  > * + * {
+    margin-top: var(--space-xlarge);
+  }
+
+  > sidebar-panel-header + * {
+    margin-top: var(--space-medium);
+  }
 }
 
 .customize-header {
@@ -30,25 +39,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

@@ -158,7 +158,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)
@@ -167,7 +170,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}