Browser-laptop: Improve typography in Brave Payments notification panel

[bradleyrichter]

Test plan

1. Launch brave with LEDGER_ENVIRONMENT=staging
2. Visit about:preferences, go to payments tab
3. Enable payments; claim tokens
4. Alignment for text should look like this:
   

Original issue description

Sub-text issues to improve:

• line spacing too tight
• text color too light
• string width to narrow, creating orphans in EN strings

Current:

Improvements:

• increase line spacing by 30%
• darken grey value by 30%
• extend text area width by 50px

[arsalankhalid]

Hey guys, is this still available - would love to take a stab at this :)

[bradleyrichter]

@arsalankhalid We'd love your help! Go for it...

cc @NejcZdovc

[NejcZdovc]

@arsalankhalid yes it's still available. If you need any help let me know. Thank you

[arsalankhalid]

Great, thanks for passing it over - will reach out :)

[arsalankhalid]

@NejcZdovc hard to re-create this, what are your thoughts?

Is this fixed/non-existent, or an edge case based on specific messages the user received, just as the million dollar give away example, how can I re-create that?

[NejcZdovc]

@arsalankhalid try starting your run with LEDGER_ENVIRONMENT=staging npm run start (don't forget to clean profile). We still have some promotions on our staging servers. Please, while you are working on this one, just claim one promotion and then don't click OK or X until you are done. This way you will not run out of promotions.

[arsalankhalid]

Great thanks, let me give that a shot.

[arsalankhalid]

Sorry for the radio silence, been a bit busy. Will take a stab tomorrow I more than hope :)

[arsalankhalid]

Hey still not sure how to re-create, how exactly do i 'claim' a promo?

[NejcZdovc]

@arsalankhalid check out this video

https://drive.google.com/file/d/1Rr2uUDILM44MIW8T7ZzrFYWtuzz9PdmI/view?usp=sharing

[arsalankhalid]

Sadly don't see it when I run it, even in staging :(

I was hoping there was a way to test running the promos, or not possible? It would be easier to ensure the typography is good for all types of promo messages...as long as those promos are actually fake :P

It's also possible i tried to run the promo already, in staging - but not sure. Please advise

[NejcZdovc]

Archive.zip

You can use this profile. Just copy it into user profile folder and run LEDGER_ENVIRONMENT=stagingn npm run start and you should see the overlay that you need.

[arsalankhalid]

I hate to be the local noob, but wheres our user profile? Trying to find Brave directory on OSX. Almost seems like a feature for users to easily switch their profiles through preferences/settings? I saw some open and closed tasks regarding to 'portable profiles', but don't see anything in preferences to easily switch.

Also that archive.zip file looks sketchy at first look lol, but i guess its a profile :P

[NejcZdovc]

your user profile is in /Users/username/Library/Application Support. In there you will find brave-development folder. Delete whatever is in this folder and extract zip into it.

[arsalankhalid]

in my brave-development folder, but don't see anything:

[NejcZdovc]

@arsalankhalid if you have time we can jump on a call and check it out. Just send me an email to nejc[at]brave.com and will send you link to the zoom room