Page Menu
Home
Phabricator
Search
Configure Global Search
Log In
Files
F2898712
D9582.id32356.diff
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Flag For Later
Size
7 KB
Referenced Files
None
Subscribers
None
D9582.id32356.diff
View Options
diff --git a/web/avatars/edit-avatar-menu.css b/web/avatars/edit-avatar-menu.css
--- a/web/avatars/edit-avatar-menu.css
+++ b/web/avatars/edit-avatar-menu.css
@@ -7,16 +7,19 @@
right: 0;
width: 34px;
height: 34px;
- color: var(--fg);
- background-color: var(--edit-avatar-button);
- border: 2px solid var(--bg);
+ color: var(--button-label-primary-default);
+ background-color: var(--button-background-primary-default);
+ /* We want the border color of the edit avatar badge to always
+ match the panel background color */
+ border: 2px solid var(--panel-background-primary-default);
border-radius: 50%;
cursor: pointer;
transition-duration: 200ms;
}
.editAvatarBadge:hover {
- filter: brightness(0.8);
+ background-color: var(--button-background-primary-hover);
+ color: var(--button-label-primary-hover);
}
input[type='file'] {
diff --git a/web/settings/account-settings.css b/web/settings/account-settings.css
--- a/web/settings/account-settings.css
+++ b/web/settings/account-settings.css
@@ -1,11 +1,16 @@
.container {
+ flex: 1;
+ background-color: var(--panel-background-primary-default);
+}
+
+.contentContainer {
padding: 40px;
width: 456px;
overflow-y: auto;
}
.header {
- color: var(--fg);
+ color: var(--text-background-primary-default);
font-weight: var(--semi-bold);
line-height: var(--line-height-display);
padding-bottom: 55px;
@@ -20,7 +25,7 @@
}
.content li {
- color: var(--account-settings-label);
+ color: var(--text-background-tertiary-default);
padding: 24px 16px 16px;
display: flex;
flex-direction: row;
@@ -28,26 +33,25 @@
}
.content li:not(:last-child) {
- border-bottom: 1px solid var(--border-color);
+ border-bottom: 1px solid var(--seperator-background-primary-default);
}
.logoutContainer {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
- color: var(--fg);
}
.logoutLabel {
- color: var(--account-settings-label);
+ color: var(--text-background-tertiary-default);
}
.username {
- color: var(--fg);
+ color: var(--text-background-primary-default);
}
.buttonText {
- color: var(--account-button-color);
+ color: var(--link-background-primary-default);
line-height: var(--line-height-text);
}
@@ -61,7 +65,7 @@
}
.editPasswordLink {
- color: var(--account-settings-label);
+ color: var(--text-background-tertiary-default);
cursor: pointer;
}
@@ -70,7 +74,7 @@
}
.preferencesHeader {
- color: var(--fg);
+ color: var(--text-background-primary-default);
font-weight: var(--semi-bold);
line-height: var(--line-height-display);
}
diff --git a/web/settings/account-settings.react.js b/web/settings/account-settings.react.js
--- a/web/settings/account-settings.react.js
+++ b/web/settings/account-settings.react.js
@@ -106,35 +106,37 @@
return (
<div className={css.container}>
- <h4 className={css.header}>My Account</h4>
- <EditUserAvatar userID={currentUserInfo.id} />
- <div className={css.content}>
- <ul>
- <li>
- <p className={css.logoutContainer}>
- <span className={css.logoutLabel}>{'Logged in as '}</span>
- <span className={css.username}>{stringForUser}</span>
- </p>
- <Button variant="text" onClick={logOutUser}>
- <p className={css.buttonText}>Log out</p>
- </Button>
- </li>
- {changePasswordSection}
- <li>
- <span>Friend List</span>
- <Button variant="text" onClick={openFriendList}>
- <p className={css.buttonText}>See List</p>
- </Button>
- </li>
- <li>
- <span>Block List</span>
- <Button variant="text" onClick={openBlockList}>
- <p className={css.buttonText}>See List</p>
- </Button>
- </li>
- </ul>
+ <div className={css.contentContainer}>
+ <h4 className={css.header}>My Account</h4>
+ <EditUserAvatar userID={currentUserInfo.id} />
+ <div className={css.content}>
+ <ul>
+ <li>
+ <p className={css.logoutContainer}>
+ <span className={css.logoutLabel}>{'Logged in as '}</span>
+ <span className={css.username}>{stringForUser}</span>
+ </p>
+ <Button variant="text" onClick={logOutUser}>
+ <p className={css.buttonText}>Log out</p>
+ </Button>
+ </li>
+ {changePasswordSection}
+ <li>
+ <span>Friend List</span>
+ <Button variant="text" onClick={openFriendList}>
+ <p className={css.buttonText}>See List</p>
+ </Button>
+ </li>
+ <li>
+ <span>Block List</span>
+ <Button variant="text" onClick={openBlockList}>
+ <p className={css.buttonText}>See List</p>
+ </Button>
+ </li>
+ </ul>
+ </div>
+ {preferences}
</div>
- {preferences}
</div>
);
}
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -225,7 +225,6 @@
--pinned-count-text-color: var(--shades-white-90);
--modal-overlay-background-90: rgba(0, 0, 0, 0.9);
--modal-overlay-background-80: rgba(0, 0, 0, 0.8);
- --edit-avatar-button: var(--violet-dark-60);
--dropdown-text: var(--shades-white-100);
--dropdown-select-bg: var(--shades-black-90);
--dropdown-select-border: var(--shades-white-60);
@@ -243,3 +242,66 @@
--modal-separator: var(--shades-black-80);
--create-roles-text-color: var(--shades-white-100);
}
+
+/*
+ Hey Comm Devs! Below is the in progress work for introducing a new
+ color design system/light mode for our web app! We will be slowly
+ migrating over to this new system over the next few months. At
+ this moment, if you are working on a new feature, please use the
+ new color system.
+
+ If there is not a good color for your use case, please message
+ Ginsu and/or Ted and we can help you figure out what the best
+ to do is.
+
+ Also until this project is fully done, please add Ginsu as a reviewer
+ to any diff where we use the colors.
+
+ If you have any questions please message Ginsu or Ted.
+
+ Thanks :)
+ */
+
+/* Dark theme (default theme) */
+:root {
+ /* Panel */
+ --panel-background-primary-default: var(--shades-black-100);
+
+ /* Text */
+ --text-background-primary-default: var(--shades-white-100);
+ --text-background-tertiary-default: var(--shades-black-60);
+
+ /* Button */
+ --button-background-primary-default: var(--violet-dark-100);
+ --button-background-primary-hover: var(--violet-dark-80);
+ --button-label-primary-default: var(--shades-white-100);
+ --button-label-primary-hover: var(--shades-white-90);
+
+ /* Link */
+ --link-background-primary-default: var(--violet-dark-100);
+
+ /* Seperator */
+ --seperator-background-primary-default: var(--shades-black-80);
+}
+
+/* Light theme */
+[data-theme='light'] {
+ /* Panel */
+ --panel-background-primary-default: var(--shades-white-100);
+
+ /* Text */
+ --text-background-primary-default: var(--shades-black-100);
+ --text-background-tertiary-default: var(--shades-black-60);
+
+ /* Button */
+ --button-background-primary-default: var(--violet-dark-100);
+ --button-background-primary-hover: var(--violet-dark-80);
+ --button-label-primary-default: var(--shades-white-100);
+ --button-label-primary-hover: var(--shades-white-90);
+
+ /* Link */
+ --link-background-primary-default: var(--violet-dark-100);
+
+ /* Seperator */
+ --seperator-background-primary-default: var(--shades-white-60);
+}
File Metadata
Details
Attached
Mime Type
text/plain
Expires
Sun, Oct 6, 4:07 AM (21 h, 46 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2247702
Default Alt Text
D9582.id32356.diff (7 KB)
Attached To
Mode
D9582: [web] introduce light mode to the account settings screen
Attached
Detach File
Event Timeline
Log In to Comment