Page MenuHomePhabricator

[web] introduce light mode to the account settings screen
ClosedPublic

Authored by ginsu on Oct 24 2023, 12:41 PM.
Tags
None
Referenced Files
Unknown Object (File)
Tue, Jul 2, 7:35 PM
Unknown Object (File)
Tue, Jul 2, 5:37 PM
Unknown Object (File)
Tue, Jul 2, 10:16 AM
Unknown Object (File)
Tue, Jul 2, 4:54 AM
Unknown Object (File)
Sat, Jun 29, 9:32 AM
Unknown Object (File)
Mon, Jun 10, 7:27 PM
Unknown Object (File)
Thu, Jun 6, 9:00 PM
Unknown Object (File)
Thu, Jun 6, 1:48 PM

Details

Summary

This diff starts to introduce the themed CSS variables list from the new design system. As a starting point this diff also updates the account settings component to use this new color design system which impliclty introduces light mode to this screen.

For additional context about this new color design system and the new naming convention here is the notion doc, @ted and I wrote:
https://www.notion.so/commapp/New-Color-System-Proposal-ef80b4e4b9ec42949095056161223a42

Here is the WIP spreadsheet @ted and I have been using as our source of truth of what we should use as color variables and their associated values
https://docs.google.com/spreadsheets/d/1PwdxT8Ag_4AGzmGSj2wXsR5-go9rsgZvTZycpy3e49k/edit#gid=0

Sources I used to help me with this implementation:
https://css-tricks.com/easy-dark-mode-and-multiple-color-themes-in-react/
https://stackoverflow.com/questions/56300132/how-to-override-css-prefers-color-scheme-setting

Linear task: https://linear.app/comm/issue/ENG-4802/account-settings

Depends on D9580

Test Plan

Please see the screenshots below

dark mode:

Screenshot 2023-10-24 at 3.41.31 PM.png (2×3 px, 786 KB)

light mode:

Screenshot 2023-10-24 at 3.41.36 PM.png (2×3 px, 791 KB)

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

ginsu edited the test plan for this revision. (Show Details)
ginsu added reviewers: atul, inka, rohan.
ginsu edited the summary of this revision. (Show Details)
ginsu edited the summary of this revision. (Show Details)

update

ginsu added inline comments.
web/avatars/edit-avatar-menu.css
12–14 ↗(On Diff #32356)

This is a bit of a strange case but I left a comment here, justifying why we need to do this

ginsu requested review of this revision.Oct 24 2023, 1:10 PM

Looks good, BUT let's fix spelling of Seperator => Separator before landing

web/avatars/edit-avatar-menu.css
12–14 ↗(On Diff #32356)

Thanks for explaining the reasoning here. Can't think of a better way to handle this off the top of my head

This revision is now accepted and ready to land.Oct 24 2023, 3:24 PM

address @atul's comments + rebase before landing