Update button colors and style to the latest Nala design sytem

[rebron]

Description

Several buttons are still using the old Brave orange colors. These should be the "blurple" color per the Nala design system.

Actual result:

Bookmarks dialog

Views MdButton

Infobar

Webcompat report (maybe it's WebUI)

task manager

Expected result:

Reproduces how often:

Easily

Brave version (brave://version info)

Target 1.66.x for fix.

Version/Channel Information:

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

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

Miscellaneous Information:

[simonhong]

working on this.

[MadhaviSeelam]

Verification PASSED using

Brave | 1.67.64 Chromium: 124.0.6367.118 (Official Build) nightly (64-bit)
-- | --
Revision | 53ddfd8ce864582b576ac5c24a189fa392e53b59
OS | Windows 11 Version 23H2 (Build 22631.3527)

Close tabs - PASSED

1.67.x	1.65.x

Infobar - PASSED

1.67.x	1.65.x

Bookmarks dialog - PASSED

1.67.x	1.65.x

Report broken site - FAILED

1.67.x	1.65.x

Save Password - PASSED

example	example

Tune icon - PASSED

1.67.x	1.65.x

Playlist - PASSED

1.67.x	1.65.x

Install app - PASSED

1.67.x	1.65.x

Extensions - PASSED

example	example	example	example	example

Sidebar

Leo - PASSED

example	example	example

VPN - Failed

1.67.x	1.65.x

Task Manager - PASSED

1.67.x	1.65.x

Widevine - PASSED

1.67.x	1.65.x

On-device site data - PASSED

1.67.x	1.65.x

Site permissions - PASSED

1.67.x	1.65.x

[kjozwiak]

@MadhaviSeelam please let me know once you're done the above as we have an uplift into 1.66.x via brave/brave-core#23405. However, looks like there's a few cases that are failing so we might want to get those fixed before uplifting. CCing @rebron on thoughts.

[kjozwiak]

The above requires 1.66.102 or higher for 1.66.x verification 👍 @brave/qa-team keep in mind that @MadhaviSeelam found several issues relating to buttons/labels as per:

• Undo button is not readable when a bookmark is deleted in the bookmarks sidepanel #38097
• Cancel button do not have border in the Report a broken site  #38098
• VPN toggle do not show updated Nala blue in the VPN panel #38100
• Buttons in Background Image, Top sites & Cards sections in the Customize Dashboard are not updated to Nala blue color #38104
• Follow, Unfollow buttons do not show Nala blue when clicked/hovered over #38106

Please keep an eye on any other buttons/labels that might still appear is orange which should be set as blurple. Removing the QA/Pass label as we'll need to re-verify the above using 1.66.x. Used #37970 (comment) as the needed verification to get the above uplifted into 1.66.x.

[LaurenWags]

Verified with

Brave | 1.66.102 Chromium: 124.0.6367.118 (Official Build) beta (x86_64)
-- | --
Revision | 3f00a25afc25dfd9a221c0d98c0ab3ed93ab47ee
OS | macOS Version 13.6.6 (Build 22G630)

Close tabs - PASSED

1.66.x	1.65.x

Bookmarks bar - PASSED

1.66.x	1.65.x

Infobar - PASSED

1.66.x	1.65.x

Bookmarks dialog - PASSED

1.66.x	1.65.x

Report broken site - Failed - see follow up issue below

• Cancel button do not have border in the Report a broken site  #38098

1.66.x	1.65.x

Save Password - PASSED

1.66.x	1.65.x

Tune icon - PASSED

1.66.x	1.65.x

Install app - PASSED with follow up issue

• Polish native button style/shape to match Nala #38035

1.66.x	1.65.x

Extensions - PASSED with follow up issue

• broken brave://downloads & brave://extensions pages #37859

1.66.x	1.65.x

Leo - PASSED

1.66.x	1.65.x

VPN - Failed - see follow up issue below

• VPN toggle do not show updated Nala blue in the VPN panel #38100

1.66.x	1.65.x

Task Manager - PASSED

• note, uses OS settings/coloring

1.66.x	1.65.x

Widevine - PASSED with follow up issue

• Polish native button style/shape to match Nala #38035

1.66.x	1.65.x

On Device Site Data - PASSED

1.66.x	1.65.x

Site permissions - PASSED with follow up issue

• Polish native button style/shape to match Nala #38035

1.66.x	1.65.x

[ivanjx]

is this also supposed to affect websites in general? how to stop the "blurple" color in websites?

normal:

brave:

update: even site favicons are affected

normal:

brave: