NTP: Add "Customize" text to dashboard settings icon

[cezaraugusto]

Fix brave/brave-browser#4930

Submitter Checklist:

• Submitted a ticket for my issue if one did not already exist.
• Used Github auto-closing keywords in the commit message.
• Added/updated tests for this change (for new code or code which already has tests).
• Verified that these changes build without errors on
  • Android
  • iOS
  • Linux
  • macOS
  • Windows
• Verified that these changes pass automated tests (unit, browser, security tests) on
  • iOS
  • Linux
  • macOS
  • Windows
• Verified that all lint errors/warnings are resolved (npm run lint)
• Ran git rebase master (if needed).
• Ran git rebase -i to squash commits (if needed).
• Tagged reviewers and labelled the pull request as needed.
• Request a security/privacy review as needed.
• Add appropriate QA labels (QA/Yes or QA/No) to include the closed issue in milestone
• Public documentation has been updated as necessary. For instance:
  • https://github.com/brave/brave-browser/wiki/Deviations-from-Chromium-(features-we-disable-or-remove)
  • https://github.com/brave/brave-browser/wiki/Proxy-redirected-URLs
  • https://github.com/brave/brave-browser/wiki/Fingerprinting-Protection-Mode
  • https://github.com/brave/brave-browser/wiki/Brave%E2%80%99s-Use-of-Referral-Codes
  • https://github.com/brave/brave-browser/wiki/Custom-Headers
  • https://github.com/brave/brave-browser/wiki/Web-compatibility-issues-with-tracking-protection
  • https://github.com/brave/brave-browser/wiki/QA-Guide

Test Plan:

To see changes live without building Brave, run

npm run storybook

Changes in this PR should match screenshot

Reviewer Checklist:

• New files have MPL-2.0 license header.
• Request a security/privacy review as needed.
• Adequate test coverage exists to prevent regressions
• Verify test plan is specified in PR before merging to source

After-merge Checklist:

• The associated issue milestone is set to the smallest version that the
  changes has landed on.
• All relevant documentation has been updated.

[bsclifton]

oooo this is nice ❤️

[karenkliu]

Hi @cezaraugusto ! This update looks great! The spacing and everything seems right; the only thing you're missing is a divider between the 'Customize' button and the rest of the browser buttons:

border: 1px solid rgba(255, 255, 255, 0.6); height: 24px; width: 1px;

[bsclifton]

This'll be a great change, nice work 😄 Besides what @karenkliu shared, I think it might be good to put user-select: none on the actual div around Customize so that it's not click drag selectable

Also the focus ring only goes on the icon itself. @karenkliu should this go around the whole thing? or only be on the icon?

[karenkliu]

This'll be a great change, nice work 😄 Besides what @karenkliu shared, I think it might be good to put user-select: none on the actual div around Customize so that it's not click drag selectable

Also the focus ring only goes on the icon itself. @karenkliu should this go around the whole thing? or only be on the icon?

@bsclifton @cezaraugusto Around the whole thing! The entire clickable button area.

[cezaraugusto]

Thanks team, updated per screenshot. If unsure, npm run storybook should display the same output.

[karenkliu]

Hi @cezaraugusto Sorry, one more thing - doesn't look like the right font. Can you check and make sure it's font-family: Poppins-SemiBold; font-size: 13px; font-weight: 600;?
Also both the icon and text should be #FFFFFF 80% opacity, and then 100% opacity on hover

[cezaraugusto]

Thanks @karenkliu for the quick review. Feedback applied.

Current result:

Also looking good in RTL:

[bsclifton]

LGTM, pending CI and review from @karenkliu 😄

Nice work!

[karenkliu]

looks good to me!

[cezaraugusto]

Thanks team!