fix(22645): Toggle color fix for disable state

[wadehrarshpreet]

Resolves
brave/brave-browser#22645

Screen.Recording.2022-05-26.at.11.27.33.PM.mov

Submitter Checklist:

• I confirm that no security/privacy review is needed, or that I have requested one
• There is a ticket for my issue
• Used Github auto-closing keywords in the PR description above
• Wrote a good PR/commit description
• Squashed any review feedback or "fixup" commits before merge, so that history is a record of what happened in the repo, not your PR
• Added appropriate labels (QA/Yes or QA/No; release-notes/include or release-notes/exclude; OS/...) to the associated issue
• Checked the PR locally: npm run test -- brave_browser_tests, npm run test -- brave_unit_tests, npm run lint, npm run gn_check, npm run tslint
• Ran git rebase master (if needed)

Reviewer Checklist:

• A security review is not needed, or a link to one is included in the PR description
• New files have MPL-2.0 license header
• Adequate test coverage exists to prevent regressions
• Major classes, functions and non-trivial code blocks are well-commented
• Changes in component dependencies are properly reflected in gn
• Code follows the style guide
• Test plan is specified in PR before merging

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, 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-Protections
  • 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-Exceptions-in-Brave
  • https://github.com/brave/brave-browser/wiki/QA-Guide
  • https://github.com/brave/brave-browser/wiki/P3A

[wadehrarshpreet]

@yrliou can you review

[yrliou]

cc @bsclifton for finding the right person in desktop UI team to review this.

[petemill]

Thanks for the contribution!

[bsclifton]

Created #13510 so we can watch CI run 😄

[bsclifton]

@wadehrarshpreet ok we're seeing a linting error here:

/home/ubuntu/workspace/pr-brave-browser-fix-22645-linux/src/brave/components/brave_new_tab_ui/components/toggle/style.ts
error  Missing space before =>  arrow-spacing
error  Extra semicolon          @typescript-eslint/semi
error  Extra semicolon          @typescript-eslint/semi

You should be able to reproduce by running npm run tslint

[wadehrarshpreet]

@bsclifton I ran the eslint --fix which fix the spacing & semicolon...but it made changes to whole file(part which I didn't touched)...so I just updated/fixed the part which I touched. Can you run the suite again.

[bsclifton]

Sorry for the delay here - just pushed this latest to #13510 so we can watch over the change 😄 If things look good, I'll squash + merge

[bsclifton]

OK - all CI passed in #13510; I'll get this squashed up and then we can merge 😄

[bsclifton]

Huge thanks @wadehrarshpreet for the PR 😄