Brave News Subscribe Button UX

[fallaciousreasoning]

Now we have a lovely UX mockup for how the dialog should look the UI should be updated:

Figma Design

Dark Mode

Light Mode

[LaurenWags]

@fallaciousreasoning could we get a test plan for this one please? Marking as QA/Blocked until we have that 👍🏻

cc @rebron @kjozwiak

[fallaciousreasoning]

Added!

[stephendonner]

Verified PASSED using

Brave	1.46.80 Chromium: 107.0.5304.68 (Official Build) beta (x86_64)
Revision	a4e93e89d3b3df1be22214603fba846ad0183ca5-refs/branch-heads/5304@{#991}
OS	macOS Version 11.7.1 (Build 20G918)

Steps:

1. installed 1.46.80
2. launched Brave
3. opened brave://flags
4. set brave://flags/#brave-news-subscribe-button to Enabled
5. set brave://flags/#brave-news-v2 to Enabled
6. clicked Relaunch
7. loaded theatlantic.com
8. clicked on the Manage Subscriptions icon in the URL bar
9. confirmed two feeds: Best of the Atlantic and The Atlantic
10. clicked Follow on both (Unfollow Best of the Atlantic first, which comes by default with Top Sources)
11. clicked Manage Feeds ->
12. confirmed both showed up under Following
13. clicked on Unfollow for Best of the Atlantic
14. switched to theatlantic.com tab
15. clicked again on the Manage Subscriptions icon
16. clicked on Manage Feeds ->
17. confirmed The Atlantic was listed, but not The Best of the Atlantic
18. confirmed I got articles from The Atlantic

step 5	step 7	step 9	step 10	step 13	step 17	step 18	Light mode

Logged:

• Follow button text is invisible until hovered over #26262