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)
Sun, Mar 30, 9:04 PM
Unknown Object (File)
Wed, Mar 19, 5:10 PM
Unknown Object (File)
Mar 4 2025, 12:43 AM
Unknown Object (File)
Mar 3 2025, 12:56 AM
Unknown Object (File)
Mar 1 2025, 5:28 AM
Unknown Object (File)
Mar 1 2025, 5:28 AM
Unknown Object (File)
Mar 1 2025, 5:28 AM
Unknown Object (File)
Mar 1 2025, 5:15 AM
View All 95 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

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

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 33122

View Options

web/navigation-panels/settings-switcher.css

  • This file was added.
div.modalHeader {
padding: 15px;
font-weight: 500;
color: var(--shades-black-60);
background-color: var(--shades-black-80);
display: flex;
align-items: center;
justify-content: center;
margin-top: 30px;
}
div.modalHeaderParentName {
color: var(--violet-light-100);
display: inline;
}
div.container {
width: 383px;
max-height: 100vh;
overflow-y: auto;
}
div.stepContainer {
position: relative;
height: 100vh;
max-height: min(533px, 100vh);
}
div.stepItem {
padding: 20px;
}
View Options

web/style.css

  • This file was added.
div.modalHeader {
padding: 15px;
font-weight: 500;
color: var(--shades-black-60);
background-color: var(--shades-black-80);
display: flex;
align-items: center;
justify-content: center;
margin-top: 30px;
}
div.modalHeaderParentName {
color: var(--violet-light-100);
display: inline;
}
div.container {
width: 383px;
max-height: 100vh;
overflow-y: auto;
}
div.stepContainer {
position: relative;
height: 100vh;
max-height: min(533px, 100vh);
}
div.stepItem {
padding: 20px;
}