diff --git a/browser/components/sidebar/sidebar-customize.css b/browser/components/sidebar/sidebar-customize.css index 04452ee38474..675668e42c55 100644 --- a/browser/components/sidebar/sidebar-customize.css +++ b/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); } diff --git a/browser/components/sidebar/sidebar-customize.mjs b/browser/components/sidebar/sidebar-customize.mjs index ea82134cb56f..7f9e7b5cec1a 100644 --- a/browser/components/sidebar/sidebar-customize.mjs +++ b/browser/components/sidebar/sidebar-customize.mjs @@ -158,7 +158,10 @@ export class SidebarCustomize extends SidebarPage { ${when( extensions.length, () => html`
-
+
${extensions.map((extension, index) => this.extensionTemplate(extension, index) @@ -167,7 +170,7 @@ export class SidebarCustomize extends SidebarPage {
` )}
- +