Page MenuHomePhabricator
Differential D9838

[web] introduce light mode to settings switcher
ClosedPublic
Actions

Authored by ginsu on Nov 13 2023, 7:15 AM.
Tags
None
Referenced Files
Unknown Object (File)
Wed, Mar 19, 5:10 PM
Unknown Object (File)
Tue, Mar 4, 12:43 AM
Unknown Object (File)
Mon, Mar 3, 12:56 AM
Unknown Object (File)
Sat, Mar 1, 5:28 AM
Unknown Object (File)
Sat, Mar 1, 5:28 AM
Unknown Object (File)
Sat, Mar 1, 5:28 AM
Unknown Object (File)
Sat, Mar 1, 5:15 AM
Unknown Object (File)
Sat, Mar 1, 4:19 AM
View All 94 Files
Subscribers
ashoat
tomek
will

Details

Reviewers
atul
inka
rohan
Commits
rCOMM7359035856d7: [web] introduce light mode to settings switcher
Summary

This diff introduces the new color design system/light mode to the settings switcher component.

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

Depends on D9837

Test Plan

Please see the screenshots below

light:

Screenshot 2023-11-13 at 10.17.02 AM.png (1×554 px, 62 KB)

dark:

Screenshot 2023-11-13 at 10.16.32 AM.png (1×746 px, 113 KB)

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

ginsu created this revision.Nov 13 2023, 7:15 AM
Herald added subscribers: will, tomek, ashoat. · View Herald TranscriptNov 13 2023, 7:15 AM
ginsu edited the summary of this revision. (Show Details)Nov 13 2023, 7:17 AM
ginsu edited the test plan for this revision. (Show Details)
ginsu added reviewers: atul, inka, rohan.
ginsu added a parent revision: D9837: [web] introduce light mode to relationship lists.
ginsu attached a referenced file: F872387: Screenshot 2023-11-13 at 10.16.32 AM.png. (Show Details)
ginsu attached a referenced file: F872386: Screenshot 2023-11-13 at 10.17.02 AM.png. (Show Details)
ginsu published this revision for review.Nov 13 2023, 7:31 AM
Harbormaster completed remote builds in B24038: Diff 33122.Nov 13 2023, 7:41 AM
atul accepted this revision.Nov 13 2023, 9:29 AM
atul added inline comments.
web/navigation-panels/settings-switcher.css
21–23 ↗(On Diff #33122)

This is really for some inner SVG right?

This revision is now accepted and ready to land.Nov 13 2023, 9:29 AM
ginsu added inline comments.Nov 13 2023, 11:37 AM
web/navigation-panels/settings-switcher.css
21–23 ↗(On Diff #33122)

Yes this class is used in the NavigationPanel component which is reused in the app bar which does have SVG.

I will be further cleaning this up in https://linear.app/comm/issue/ENG-5021/top-bar

ginsu updated this revision to Diff 33136.Nov 13 2023, 11:38 AM

rebase before landing

This revision was landed with ongoing or failed builds.Nov 13 2023, 11:40 AM
Closed by commit rCOMM7359035856d7: [web] introduce light mode to settings switcher (authored by ginsu). · Explain Why
This revision was automatically updated to reflect the committed changes.
ginsu added a commit: rCOMM7359035856d7: [web] introduce light mode to settings switcher.
Harbormaster completed remote builds in B24049: Diff 33136.Nov 13 2023, 11:59 AM

Revision Contents
Changeset List

PathSize
web/
navigation-panels/
12 lines
2 lines

Diff 33136

View Options

web/navigation-panels/settings-switcher.css

::-webkit-scrollbar { ::-webkit-scrollbar {
width: 15px; width: 15px;
} }
::-webkit-scrollbar-track-piece { ::-webkit-scrollbar-track-piece {
background-color: var(--shades-black-80); background-color: var(--shades-black-75);
ginsuAuthorUnsubmitted
Done
Inline Actions

This will be fixed with https://linear.app/comm/issue/ENG-5687/desktop-app-scrollbar

ginsu: This will be fixed with https://linear.app/comm/issue/ENG-5687/desktop-app-scrollbar
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: var(--shades-black-60); background-color: var(--shades-black-50);
border: 3px var(--shades-black-80) solid; border: 3px var(--shades-black-75) solid;
border-radius: 10px; border-radius: 10px;
} }
View Options

web/style.css

::-webkit-scrollbar { ::-webkit-scrollbar {
width: 15px; width: 15px;
} }
::-webkit-scrollbar-track-piece { ::-webkit-scrollbar-track-piece {
background-color: var(--shades-black-80); background-color: var(--shades-black-75);
ginsuAuthorUnsubmitted
Done
Inline Actions

This will be fixed with https://linear.app/comm/issue/ENG-5687/desktop-app-scrollbar

ginsu: This will be fixed with https://linear.app/comm/issue/ENG-5687/desktop-app-scrollbar
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: var(--shades-black-60); background-color: var(--shades-black-50);
border: 3px var(--shades-black-80) solid; border: 3px var(--shades-black-75) solid;
border-radius: 10px; border-radius: 10px;
} }