Apply Brave design system components to Shields

[rebron]

Description

Apply design system components to Shields to improve accessibility, contrast, and usability.

Design

Shields panel

The Brave design system components being applied are:

• Buttons https://www.figma.com/file/z9wmg2FCwuXx9FLbDo5avJ/Platform-UI-Brave-desktop?node-id=1011%3A0
• Dropdowns https://www.figma.com/file/z9wmg2FCwuXx9FLbDo5avJ/Platform-UI-Brave-desktop?node-id=132%3A3900
• Links https://www.figma.com/file/z9wmg2FCwuXx9FLbDo5avJ/Platform-UI-Brave-desktop?node-id=766%3A9370
• Font styles (all Poppins) https://www.figma.com/file/z9wmg2FCwuXx9FLbDo5avJ/?node-id=0%3A1
• Light/dark theme color palette https://www.figma.com/file/JHfKcFZRqXFLXZImWSjNIM/?node-id=0%3A1

Also, the toggle should have a gradient transition effect similar to the one implemented on mobile:

You can reference this iOS issue: brave/brave-ios#1923 Kyle and Michal on the iOS team built it.

it's a loop with 2ms between each color state + easy ease:
linear-gradient(120deg, rgba(255,167,59,1) 0%, rgba(255,118,84,1) 100%);
linear-gradient(120deg, rgba(255,118,84,1) 0%, rgba(251,84,43,1) 100%);
linear-gradient(120deg, rgba(251,84,43,1) 0%, rgba(247,36,28,1) 100%);
linear-gradient(120deg, rgba(247,36,28,1) 0%, rgba(252,79,130,1) 100%);
linear-gradient(120deg, rgba(252,79,130,1) 0%, rgba(255,167,59,1) 100%);
linear-gradient(120deg, rgba(255,167,59,1) 0%, rgba(255,118,84,1) 100%);
#FFA73B ➡️ #FF7654 ➡️ #FB542B ➡️ #F7241C ➡️ #FC4F82 ➡️ #FFA73B

Removing the Simple/Advanced view

The "Advanced controls" accordion element in the Shields panel would replace the current Simple/Advanced view - accordion closed is "simple view" (default) and accordion open is the "advanced view". The accordion will remember its open/closed position and display as open/closed globally depending on how the user left it, the same as current simple/advanced view setting. It will make the advanced controls feel a bit easier to get to since it's not a separate "view", but rather just collapsed.

Another benefit of this accordion design is that we can get rid of the "default view" setting in brave://settings/shields

We can also remove the "Advanced view" disclaimer popup since the disclaimer text is embedded in the Advanced area of Shields.

Copy updates

Simple / advanced view:

• "If a site appears broken, try Shields down." → "If this site seems broken, try Shields down. Note: this may reduce Brave privacy protections."

Report a broken site:

• "You're browsing this site without Brave's privacy protections. Does it not work right with Shields up?" → "You're viewing this site without Brave's privacy protections. Does it seem broken with Shields up?"
• [button] "Report a broken site" → "Report site broken"
• "Let Brave's developers know that this site doesn't work properly with Shields:" → "Let Brave know that this site seems broken with Shields up:"
• "Note: This site address will be submitted with your Brave version number and your IP address (which will not be stored)." → "Note: Clicking "Submit" will share the site address, your Brave version number, and your IP address with Brave. Your IP address will not be stored."
• "Thanks for letting Brave's developers know that there's something wrong with this site. We'll do our best to fix it." → "Thanks for letting us know about this broken site. We'll do our best to fix it! Please check back again soon to try the site with Shields up."

About Brave Shields:

"Sites often include cookies and scripts which try to identify you and your device. They want to work out who you are and follow you across the web — tracking what you do on every site. Brave blocks these things so that you can browse without being followed around." → "Sites often have cookies and scripts lurking in the background, trying to identify you and your device. Why? So you can be followed around the web, your activity tracked on every site you visit. Brave Shields block cookies and scripts, which means better privacy online."

Reproduces how often:

n/a

Brave version (brave://version info)

n/a

Version/Channel Information:

• Can you reproduce this issue with the current release? n/a
• Can you reproduce this issue with the beta channel? n/a
• Can you reproduce this issue with the nightly channel? n/a

Other Additional Information:

• Does the issue resolve itself when disabling Brave Shields? n/a
• Does the issue resolve itself when disabling Brave Rewards? n/a
• Is the issue reproducible on the latest version of Chrome? n/a

Assets

Figma link: https://www.figma.com/file/3A6F6VrxVahiZFxLr7j7FO/Desktop-Brave-Shields?node-id=16%3A14877

Miscellaneous Information:

Related issue: #14602

[karenkliu]

Added relevant design details.

[rebron]

Closed as dupe of #18630