Native buttons should use brave brand style

[petemill]

Test plan

See brave/brave-core#3569

Original issue description

Infobars and bubble dialogs are still using chromium button layout style and colors.

Description

Design spec has been evolving and still not locked down, but can be interpreted enough in order to conform to chromium button types.

Steps to Reproduce

Infobars

1. Fresh profile - view the infobars for Analytics and Default Browser

Dialogs
2. Visit maps.google.com and click the (+) icon in the Locaiton Bar

More specific Test plan with all the states expected on brave/brave-core#3569

Actual result:

Expected result:

Addresses umbrella at #3961

[bsclifton]

@petemill I get a different expected result - not sure how you got Install on the left?
(it's a nitpick, but wanted to make sure I'm not missing something 😛)

[petemill]

@bsclifton Windows has the primary and secondary actions in dialog reversed. My screenshots were from a mix of macOS and Windows. Just to keep your mind active!

[LaurenWags]

Marking as QA/Blocked until new build is done. This will be available in 0.71.107 and above.

[GeetaSarvadnya]

The fix brave/brave-core#3569 is merged in 0.71.107 hence removed QA blocked label

[GeetaSarvadnya]

Verification is passed on

Brave	0.71.107 Chromium: 78.0.3904.70 (Official Build) beta (64-bit)
Revision	edb9c9f3de0247fd912a77b7f6cae7447f6d3ad5-refs/branch-heads/3904@{#800}
OS	Windows 10 OS Version 1803 (Build 17134.1006)

• Verified the STR from the description

• Logged Follow up of #6398 - Mouse hover OR press events on buttons doesn't show any effect on various buttons #6707 (light and dark mode screens descrpancies mentioned in a single issue Follow up of #6398 - Mouse hover OR press events on buttons doesn't show any effect on various buttons #6707 (comment))

• Verified the test plan from Buttons get Brave style brave-core#3569

• The buttons remain the same in Light and Dark mode
  
  

• Regular states for different buttons in Light mode
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

• Hover states for different buttons in Light mode
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

• Pressed states for different buttons in Light mode
  
  
  
  
  
  
  
  
  
  
  
  
  
  Remove extension button
  
  
  
  
  

---

• Regular states for different buttons in Dark mode
  Settings page buttons



Bookmraks buttons in toolbar



Welcome screen buttons






Edit bookmarks buttons in toolbar



chrome://settings/importData buttons



Crypo wallet














Verified one backup phrase out of 24 all buttons behaves the same way



chrome://bookmarks/ -> Add a new folder or Add a new bookmark or Edit bookmarks buttons


Rewards
  
  

• Hover states for different buttons in Dark mode
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

• Pressed states for different buttons in Dark mode
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

Verified passed with

Brave	0.71.112 Chromium: 78.0.3904.87 (Official Build) beta (64-bit)
Revision	20c21f4010010f32462ea8e1d6af30cef66d48c8-refs/branch-heads/3904@{#840}
OS	macOS Version 10.13.6 (Build 17G5019)

Native UI buttons example - Light theme

Hover - Prominent:

Hover-Regular:

Click-Prominent:

Click-Regular:

WebUI buttons example - Light theme

Hover-Prominent:

Hover-Regular:

Click-Prominent:

Click-Regular:

Native UI buttons example - Dark theme

Hover-Prominent:

Hover-Regular:

Click-Prominent:

Click-Regular:

WebUI buttons example - Dark theme

Hover-Prominent:

Hover-Regular:

Click-Prominent:

Click-Regular:

Encountered #6770 for Crypto Wallets buttons and #6783 for button on welcome flow
Reproduced various issues noted in #6707

Spot checked buttons in the following areas:

• brave://settings/getStarted
• brave://settings/searchEngines
• brave://settings/content (spot checked various sections within this area)
• brave://settings/clearBrowserData
• brave://settings/payments
• brave://settings/addresses
• brave://settings/downloads
• brave://settings/reset
• brave://history (deleting an item)
• brave://bookmarks (editing an item)
• brave://welcome
• creating a bookmark from URL bar
• button in ‘Default’ banner notification on relaunch of Brave
• download bar

Verification passed on

Brave	0.71.111 Chromium: 78.0.3904.87 (Official Build) (64-bit)
Revision	20c21f4010010f32462ea8e1d6af30cef66d48c8-refs/branch-heads/3904@{#840}
OS	Ubuntu 18.04 LTS

• Verified the STR from the description
• Verified the test plan from Buttons get Brave style brave-core#3569