Page MenuHomePhabricator
Files F2898695

D9582.id32354.diff
No OneTemporary
Actions

D9582.id32354.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(--spearator-primary-background-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 */
+ --spearator-primary-background-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 */
+ --spearator-primary-background-default: var(--shades-black-60);
+}

File Metadata

Mime Type
text/plain
Expires
Sun, Oct 6, 4:01 AM (21 h, 35 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2247688
Default Alt Text
D9582.id32354.diff (7 KB)

Event Timeline