Redesign brave://settings

[rebron]

Test plan

1. Open brave://settings
2. Check look and feel page
   • are highlighted elements orange?
   • do the icons look like ours?
   • is the font Poppins?

Description

Add/remove/reorganize Brave settings and use new styling.

Expected result

Make Brave settings more intuitive and consistent with Brave look and feel.

Design

Not current/to be updated

[srirambv]

@bradleyrichter @rebron Reset Settings has printer icon in the updated specs. should be updated

[rebron]

@srirambv Good catch, I'll get that updated. It'll be the same reset icon in the sidebar.

[beenotung]

I have got used to the current layout, wish this update doesn't come soon ...

[mil1i]

I would love to see the Appearance section have an option (and obviously the ability to) make the Open Tabs, Address Bar + Buttons and Bookmarks Bar different sizes. Preferably Compact.

As can be seen in the photo below, firefox I can have all 3 enabled and it cuts off where the Booksmarks Bar begins in Brave/Chrome.

[Jacalz]

This looks really sweet, good job! 👍

[AlexeyBarabash]

Not sure, should it be here or be in a separate issue, but I see the overlapped controls on brave://bookmarks page

Nightly master, Linux

Brave	0.63.0 Chromium: 73.0.3683.39 (Developer Build) (64-bit)
Revision	cc53b0e12fcaf42e4bab8d6c23bd4fb7aae99f6c-refs/branch-heads/3683@{#413}
OS	Linux

[srirambv]

@bsclifton @petemill once this reorganize/redesign of settings page is done I believe the side bar menu would be fixed? If so opening extensions page would hide the side bar and just show the existing extensions side bar options ?

User from https://community.brave.com/t/no-custom-keyboard-shortcuts-via-extensions-menu/51913 says the side bar menu on extensions page is missing so he is unable to access the keyboard shortcut option there.

[rebron]

@rossmoody mocks/spec to be updated to reflect decisions made by product and design during course of implementation.

[srirambv]

@petemill @rebron Couple of observations

• Only selected item icon is Orange and the text isn't bold. Is this expected?
• Should hover over settings sidebar have visual feedback

[srirambv]

Verification passed on

Brave	0.65.112 Chromium: 75.0.3770.38 (Official Build) beta(64-bit)
Revision	3860105745f2b12537da9e9f048f14c3f52ba970-refs/branch-heads/3770@{#618}
OS	Linux

• Verified based on discussion and test plan from WebUI: Settings & 4 different ways to override brave-core#1909
• Confirmed everything works as expected with @petemill regarding Redesign brave://settings #955 (comment)

Verification passed on

Brave	0.65.112 Chromium: 75.0.3770.38 (Official Build) beta (64-bit)
Revision	3860105745f2b12537da9e9f048f14c3f52ba970-refs/branch-heads/3770@{#618}
OS	Windows 10 OS Version 1803 (Build 17134.523)

• Verified based on discussion and test plan from WebUI: Settings & 4 different ways to override brave-core#1909
• Confirmed everything works as expected with @petemill regarding Redesign brave://settings #955 (comment)

Verification PASSED on macOS 10.14.5 x64 using the following build:

Brave	0.65.113 Chromium: 75.0.3770.38 (Official Build) beta(64-bit)
Revision	3860105745f2b12537da9e9f048f14c3f52ba970-refs/branch-heads/3770@{#618}
OS	Mac OS X

• Verified based on discussion and test plan from WebUI: Settings & 4 different ways to override brave-core#1909
• Confirmed everything works as expected with @petemill regarding Redesign brave://settings #955 (comment)