Follow up of #6398 - Mouse hover OR press events on buttons doesn't show any effect on various buttons

[GeetaSarvadnya]

Description

Found while testing #6398

Consolidated all the button issues in a single issue

Steps to Reproduce

1. Open brave
2. Ligh and dark mode button screen issues are mentioned in Follow up of #6398 - Mouse hover OR press events on buttons doesn't show any effect on various buttons #6707 (comment)

Actual result:

There is no effect on the buttons in light and dark mode upon mouse hover and press events.

Expected result:

As per the brave/brave-core#3569 - mouse hover and press events should show the effect on the buttons

Reproduces how often:

Always

Brave version (brave://version info)

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)

Version/Channel Information:

• Can you reproduce this issue with the current release? yes
• Can you reproduce this issue with the beta channel? yes
• Can you reproduce this issue with the dev channel? yes
• Can you reproduce this issue with the nightly channel? yes

Other Additional Information:

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

Miscellaneous Information:

cc: @brave/legacy_qa @petemill

[GeetaSarvadnya]

1. Press on the Cancel button is not showing any effect on the button

Actual:

Expected

2. Press on I have a sync code is not showing any effect on the button

3. Press on View Sync Code is not showing any effect on button

4. Press on Next button in the welcome screen is not showing any effect on button

5. Mouse hover on Start a new sync chain is not showing any effect on button

6. Mouse hover on I have a sync code is not showing any effect on button

7. Mouse hover on Close anyway is not showing any effect on button

8. Mouse hover on Confirm Sync Code is not showing any effect on button

9. Mouse hover on ok is not showing any effect on button

10. Mouse hover on Let's go in the welcome screen is not showing any effect on button

11. Mouse hover on Next in the welcome screen is not showing any effect on the button in both light and dark mode

12. Add to Brave button on the extension. No effect on the button on mouse hover and press event. This button is on the website not sure whether it should have a brave style effect upon click and press even. I guess this is not in our control, If so, please don't consider this point

13. Import button on the welcome screen. No effect on the button on mouse hover in light mode

No effect on button press in dark mode

14. Set default button on the welcome screen. No effect on the button on mouse hover and press

No effect on the button on the press in dark mode

15. Mouse hover on Done is not showing any effect on the button in the dark mode

16. Save button in edit toolbar bookmarks. No effect on the button upon press in dark mode
    

17. I understand button in the crypto wallet screen. No effect on the button on mouse hover and press

18. Create button in the crypto wallet screen. No effect on the button on mouse hover and press
    

19. Connect button on the crypto wallet screen. No effect on the button on mouse hover and press

20. Details->Export Private key->Cancel button on the crypto wallet screen. No effect on the button upon press event

21. Cryptowallet->click on Send -> Cancel button, the button doesn't have any border although it shows the effect on button upon mouse hover and press events

22. brave://bookmarks- Add a new folder- Save button, No effect on the button upon press event
    

23. Rewards-YES, I'M IN! No effect on the button upon press event
    

24. Rewards-> VERIFY WALLET button, No effect on the button upon mouse hover event

[LaurenWags]

cc @rebron

[LaurenWags]

Seems Sync in general doesn't follow Brave style and a few other areas as well.

[rebron]

cc: @karenkliu

[karenkliu]

@GeetaSarvadnya @LaurenWags Thanks for filing an issue for this. The design team is currently working on finalizing button interaction guidelines, styling, and specs so that we can bring more consistency to our user interface and increase accessibility. The new button guidelines will cover desktop and native apps, all interaction states (including focus and hover states), dark and light theme, and fill in some other missing details. We need to collaborate with frontend engineers on them before starting to file bugs to bring existing buttons in line with the agreed upon style, but we'll make sure QA is the first to know once we start the mass effort to bring cohesion to all our buttons within and across platforms. Stay tuned!