diff --git a/web/components/panel.css b/web/components/panel.css
index 89983787e..63ebf1962 100644
--- a/web/components/panel.css
+++ b/web/components/panel.css
@@ -1,32 +1,37 @@
.container {
display: flex;
height: 100%;
}
.itemContainer {
display: flex;
flex-direction: column;
background-color: var(--panel-background-primary-default);
}
.secondaryItemContainer {
background-color: var(--panel-background-secondary-default);
}
.singleItemContainer {
border-radius: 8px;
}
.firstMultiItemContainer {
border-radius: 8px 0 0 8px;
}
.lastMultiItemContainer {
border-radius: 0 8px 8px 0;
}
.headerContainer {
height: 56px;
box-shadow: 0px 1px 3px 0px var(--panel-headerShadow-primary-default);
clip-path: inset(0 0 -3px 0);
}
+
+.secondaryHeaderContainer {
+ box-shadow: 0px 1px 3px 0px var(--panel-headerShadow-secondary-default);
+ clip-path: inset(0 0 -3px 0);
+}
diff --git a/web/components/panel.react.js b/web/components/panel.react.js
index 3f6c793b0..6b0ecf33b 100644
--- a/web/components/panel.react.js
+++ b/web/components/panel.react.js
@@ -1,69 +1,74 @@
// @flow
import classnames from 'classnames';
import * as React from 'react';
import css from './panel.css';
export type PanelData = {
+header: React.Node,
+body: React.Node,
+classNameOveride?: string,
};
type PanelItemProps = {
...PanelData,
+index: number,
+numOfItems: number,
};
function PanelItem(props: PanelItemProps): React.Node {
const { header, body, index, numOfItems, classNameOveride } = props;
const className = classnames(
{
[css.itemContainer]: true,
[css.secondaryItemContainer]: index % 2 === 1,
[css.singleItemContainer]: numOfItems === 1,
[css.firstMultiItemContainer]: numOfItems > 1 && index === 0,
[css.lastMultiItemContainer]: numOfItems > 1 && index === numOfItems - 1,
},
classNameOveride,
);
+ const headerClassName = classnames({
+ [css.headerContainer]: true,
+ [css.secondaryHeaderContainer]: index % 2 === 1,
+ });
+
return (
-
{header}
+
{header}
{body}
);
}
type PanelProps = {
+panelItems: $ReadOnlyArray,
};
function Panel(props: PanelProps): React.Node {
const { panelItems } = props;
const items = React.useMemo(
() =>
panelItems.map((item, index) => {
return (
);
}),
[panelItems],
);
return {items}
;
}
export default Panel;
diff --git a/web/theme.css b/web/theme.css
index 06a8d10d5..8baf6d472 100644
--- a/web/theme.css
+++ b/web/theme.css
@@ -1,455 +1,459 @@
:root {
/* Never use color values defined here directly in CSS. Add color variables to "Color Theme" below
The reason we never use color values defined here directly in CSS is
1. It makes changing themes from light / dark / user generated impossible.
2. Gives the programmer context into the color being used.
3. If our color system changes it's much easier to change color values in one place.
Add a color value to the theme below, and then use it in your CSS.
naming convention:
- bg: background.
- fg: foreground.
- color: text-color
*/
--shades-white-100: #ffffff;
--shades-white-90: #f5f5f5;
--shades-white-80: #ebebeb;
--shades-white-70: #e0e0e0;
--shades-white-60: #cccccc;
--shades-black-95: #0a0a0a;
--shades-black-90: #191919;
--shades-black-85: #1f1f1f;
--shades-black-75: #404040;
--shades-black-60: #666666;
--shades-black-50: #808080;
--violet-dark-100: #7e57c2;
--violet-dark-80: #6d49ab;
--violet-dark-60: #563894;
--violet-dark-40: #44297a;
--violet-dark-20: #331f5c;
--violet-light-100: #ae94db;
--violet-light-80: #b9a4df;
--violet-light-60: #d3c6ec;
--violet-light-40: #e8e0f5;
--violet-light-20: #f3f0fa;
--success-light-10: #d5f6e3;
--success-light-50: #6cdf9c;
--success-primary: #00c853;
--success-dark-50: #029841;
--success-dark-90: #034920;
--error-light-10: #feebe6;
--error-light-50: #f9947b;
--error-primary: #f53100;
--error-dark-50: #b62602;
--error-dark-90: #4f1203;
--shadow-dark-35: #00000059;
+ --shadow-dark-25: #00000040;
--shadow-light-35: #ffffff59;
+ --shadow-light-25: #ffffff40;
--logo-bg: #111827;
--spoiler-color: #33332c;
--loading-foreground: #1b0e38;
--bg: var(--shades-black-95);
--fg: var(--shades-white-100);
--color-disabled: var(--shades-black-50);
--text-input-bg: var(--shades-black-75);
--text-input-color: var(--shades-white-60);
--text-input-placeholder: var(--shades-white-60);
--border: var(--shades-black-75);
--error: var(--error-primary);
--success: var(--success-dark-50);
/* Color Theme */
--btn-bg-filled: var(--violet-dark-100);
--btn-bg-outline: var(--shades-black-85);
--btn-bg-success: var(--success-dark-50);
--btn-bg-danger: var(--error-primary);
--btn-bg-disabled: var(--shades-black-75);
--btn-disabled-color: var(--shades-black-50);
--chat-bg: var(--violet-dark-80);
--chat-confirmation-icon: var(--violet-dark-100);
--keyserver-selection: var(--violet-dark-60);
--thread-selection: var(--violet-light-80);
--thread-hover-bg: var(--shades-black-75);
--thread-active-bg: var(--shades-black-75);
--chat-timestamp-color: var(--shades-black-50);
--tool-tip-bg: var(--shades-black-75);
--tool-tip-color: var(--shades-white-60);
--border-color: var(--shades-black-75);
--calendar-chevron: var(--shades-black-50);
--calendar-day-bg: var(--shades-black-50);
--calendar-day-selected-color: var(--violet-dark-80);
--community-bg: var(--shades-black-85);
--community-settings-selected: var(--violet-dark-60);
--unread-bg: var(--error-primary);
--settings-btn-bg: var(--violet-dark-100);
--community-creation-btn-bg: var(--shades-black-75);
--community-creation-ancestry-bg: var(--shades-black-75);
--community-creation-ancestry-text: var(--shades-black-50);
--community-creation-keyserver-container: var(--shades-black-95);
--modal-bg: var(--shades-black-85);
--modal-fg: var(--shades-white-60);
--join-bg: var(--shades-black-85);
--help-color: var(--shades-black-50);
--breadcrumb-color: var(--shades-white-60);
--breadcrumb-color-unread: var(--shades-white-60);
--btn-outline-border: var(--shades-black-50);
--thread-color-read: var(--shades-black-50);
--thread-preview-secondary: var(--shades-black-60);
--relationship-button-green: var(--success-dark-50);
--relationship-button-red: var(--error-primary);
--relationship-button-text: var(--fg);
--disconnected-bar-alert-bg: var(--error-dark-50);
--disconnected-bar-alert-color: var(--shades-white-100);
--disconnected-bar-connecting-bg: var(--shades-white-70);
--disconnected-bar-connecting-color: var(--shades-black-95);
--permission-color: var(--shades-white-60);
--thread-top-bar-color: var(--shades-white-100);
--thread-top-bar-search-button-color: var(--shades-black-50);
--thread-ancestor-keyserver-border: var(--shades-black-60);
--thread-ancestor-color: var(--shades-white-100);
--thread-ancestor-separator-color: var(--shades-white-60);
--text-message-default-background: var(--shades-black-75);
--message-action-tooltip-bg: var(--shades-black-85);
--message-action-tooltip-bg-light: var(--shades-black-75);
--menu-bg: var(--shades-black-85);
--menu-bg-light: var(--shades-black-75);
--menu-separator-color: var(--shades-black-75);
--menu-color: var(--shades-black-50);
--menu-color-light: var(--shades-white-60);
--menu-color-hover: var(--shades-white-100);
--menu-color-dangerous: var(--error-primary);
--menu-color-dangerous-hover: var(--error-light-50);
--app-list-icon-disabled-color: var(--shades-white-80);
--chat-thread-list-color-active: var(--shades-white-60);
--chat-thread-list-menu-color: var(--shades-white-60);
--chat-thread-list-menu-bg: var(--shades-black-75);
--chat-thread-list-menu-active-color: var(--shades-white-60);
--chat-thread-list-menu-active-bg: var(--shades-black-85);
--tabs-header-active-color: var(--shades-white-100);
--tabs-header-active-border: var(--violet-light-100);
--tabs-header-active-background: var(--violet-dark-100);
--tabs-header-background-color: var(--shades-black-50);
--tabs-header-background-color-pill: var(--shades-white-60);
--tabs-header-background-border: var(--shades-black-75);
--tabs-header-background-color-hover: var(--shades-white-80);
--tabs-header-background-border-hover: var(--shades-black-60);
--members-modal-member-text: var(--shades-black-50);
--members-modal-member-text-hover: var(--shades-white-100);
--label-default-bg: var(--violet-dark-80);
--label-default-color: var(--shades-white-80);
--label-grey-bg: var(--shades-black-75);
--label-grey-color: var(--shades-white-80);
--subchannels-modal-color: var(--shades-black-50);
--subchannels-modal-color-hover: var(--shades-white-100);
--color-selector-active-bg: var(--shades-black-75);
--relationship-modal-color: var(--shades-black-50);
--arrow-extension-color: var(--shades-black-50);
--modal-close-color: var(--shades-black-50);
--modal-close-color-hover: var(--shades-white-100);
--add-members-group-header-color: var(--shades-black-50);
--add-members-item-color: var(--shades-black-50);
--add-members-item-color-hover: var(--shades-white-100);
--add-members-item-disabled-color: var(--shades-black-75);
--add-members-item-disabled-color-hover: var(--shades-black-50);
--add-members-remove-pending-color: var(--error-primary);
--add-members-remove-pending-color-hover: var(--error-light-50);
--radio-border: var(--shades-black-60);
--radio-color: var(--shades-white-60);
--notification-settings-option-selected-bg: var(--shades-black-75);
--notification-settings-option-title-color: var(--shades-white-90);
--notification-settings-option-color: var(--shades-white-60);
--notification-settings-option-invalid-color: var(--shades-black-75);
--notification-settings-option-invalid-selected-color: var(--shades-black-50);
--thread-creation-search-container-bg: var(--shades-black-85);
--thread-creation-close-search-color: var(--shades-black-50);
--thread-creation-search-item-bg-hover: var(--shades-black-75);
--thread-creation-search-item-info-color: var(--shades-black-50);
--chat-message-list-active-border: #5989d6;
--sidebars-modal-color: var(--shades-black-50);
--sidebars-modal-color-hover: var(--shades-white-100);
--inline-engagement-bg: var(--shades-black-60);
--inline-engagement-bg-hover: var(--shades-black-75);
--inline-engagement-color: var(--fg);
--compose-subchannel-header-fg: var(--shades-black-50);
--compose-subchannel-header-bg: var(--shades-black-75);
--compose-subchannel-label-color: var(--shades-black-50);
--compose-subchannel-mark-color: var(--violet-light-100);
--enum-option-icon-color: var(--violet-dark-100);
--show-password-bg-hover: var(--shades-black-60);
--typeahead-overlay-light: var(--shades-black-75);
--typeahead-overlay-dark: var(--shades-black-85);
--typeahead-overlay-text: var(--shades-white-100);
--typeahead-overlay-shadow-primary: rgba(0, 0, 0, 0.25);
--typeahead-overlay-shadow-secondary: rgba(0, 0, 0, 0.4);
--spoiler-text-color: var(--spoiler-color);
--spoiler-background-color: var(--spoiler-color);
--purple-link: var(--violet-light-100);
--drawer-expand-button: var(--shades-black-50);
--drawer-expand-button-disabled: var(--shades-black-75);
--drawer-item-color: var(--shades-white-60);
--drawer-active-item-color: var(--shades-white-100);
--drawer-open-community-bg: var(--shades-black-90);
--active-drawer-item-bg: rgba(0, 0, 0, 0.5);
--community-drawer-lines: rgba(255, 255, 255, 0.08);
--topbar-button-bg: var(--shades-black-85);
--filters-button-bg: var(--shades-black-95);
--filters-button-border: var(--shades-black-75);
--filters-button-hover-bg: var(--shades-black-85);
--filter-panel-fg: var(--shades-black-50);
--filter-panel-bg: #0d0d0d;
--topbar-button-bg-hover: var(--shades-black-75);
--topbar-button-fg: var(--shades-white-60);
--message-label-color: var(--shades-black-50);
--topbar-lines: rgba(255, 255, 255, 0.08);
--pin-message-information-text-color: var(--shades-white-60);
--pin-message-modal-border-color: var(--shades-black-75);
--pinned-count-banner-color: var(--shades-black-85);
--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);
--dropdown-text: var(--shades-white-100);
--dropdown-select-bg: var(--shades-black-85);
--dropdown-select-border: var(--shades-white-60);
--dropdown-option-bg: var(--shades-black-75);
--dropdown-option-hover-bg: var(--shades-black-60);
--dropdown-selected-option-check-color: var(--violet-dark-100);
--dropdown-chevron-color: var(--shades-white-100);
--dropdown-disabled-color: var(--shades-black-50);
--change-member-role-modal-description-text: var(--shades-white-60);
--change-member-role-modal-generic-text: var(--shades-white-100);
--change-member-role-modal-disabled-background: var(--shades-black-75);
--unsaved-changes-modal-text-color: var(--shades-white-60);
--modal-secondary-label: var(--shades-black-50);
--modal-separator: var(--shades-black-75);
}
/*
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 CSS theme) */
:root {
/* Frame */
--frame-background-primary-default: var(--shades-black-95);
--frame-background-secondary-default: var(--shades-black-85);
--frame-background-tertiary-default: var(--shades-black-75);
/* Text */
--text-background-primary-default: var(--shades-white-100);
--text-background-secondary-default: var(--shades-white-60);
--text-background-tertiary-default: var(--shades-black-50);
--text-background-danger-default: var(--error-primary);
/* Panel */
--panel-background-primary-default: var(--shades-black-85);
--panel-background-secondary-default: var(--shades-black-90);
--panel-headerShadow-primary-default: var(--shadow-dark-35);
+ --panel-headerShadow-secondary-default: var(--shadow-dark-25);
/* Button */
--button-background-primary-default: var(--violet-dark-100);
--button-background-secondary-default: var(--shades-black-75);
--button-background-tertiary-default: var(--shades-black-85);
--button-background-success-default: var(--success-primary);
--button-background-primary-hover: var(--violet-dark-80);
--button-background-secondary-hover: var(--shades-black-60);
--button-background-tertiary-hover: var(--shades-black-75);
--button-background-primary-disabled: var(--shades-black-75);
--button-border-outline-default: var(--shades-black-50);
--button-label-primary-default: var(--shades-white-100);
--button-label-secondary-default: var(--shades-white-60);
--button-label-tertiary-default: var(--shades-black-50);
--button-label-primary-hover: var(--shades-white-90);
--button-label-primary-disabled: var(--shades-black-50);
--button-label-tertiary-hover: var(--shades-white-80);
/* Link */
--link-background-primary-default: var(--violet-dark-100);
--link-background-primary-disabled: var(--shades-black-50);
/* Separator */
--separator-background-primary-default: var(--shades-black-75);
/* Modal */
--modal-background-primary-default: var(--shades-black-85);
--modal-background-secondary-default: var(--shades-black-90);
--modal-header-primary-default: var(--shades-white-100);
--modal-close-primary-default: var(--shades-black-50);
--modal-close-primary-hover: var(--shades-white-100);
--modal-listItem-primary-hover: var(--shades-black-90);
/* Input Field */
--inputField-background-primary-default: var(--shades-black-85);
--inputField-background-secondary-default: var(--shades-black-75);
--inputField-label-primary-default: var(--shades-white-100);
--inputField-label-secondary-default: var(--shades-black-50);
--inputField-border-primary-default: var(--shades-black-75);
--inputField-clearBackground-primary-default: var(--shades-black-60);
--inputField-clearIcon-primary-default: var(--shades-white-100);
/* Status Indicator */
--statusIndicator-background-outer-active: var(--success-dark-90);
--statusIndicator-background-outer-inactive: var(--error-dark-90);
--statusIndicator-background-inner-active: var(--success-primary);
--statusIndicator-background-inner-inactive: var(--error-primary);
/* Enum Option */
--enumOption-background-primary-selected: var(--shades-black-75);
--enumOption-icon-primary-default: var(--violet-dark-100);
--enumOption-title-primary-default: var(--shades-white-90);
--enumOption-description-primary-default: var(--shades-white-60);
--enumOption-input-primary-default: var(--shades-black-60);
--enumOption-input-primary-selected: var(--shades-white-60);
--enumOption-input-secondary-default: var(--shades-white-80);
--enumOption-input-secondary-selected: var(--success-primary);
--enumOption-input-secondary-disabled: var(--shades-black-50);
/* Tooltip */
--tooltip-background-primary-default: var(--shades-black-75);
--tooltip-label-primary-default: var(--shades-white-100);
/* Unread Indicator */
--unreadIndicator-background-primary-default: var(--error-primary);
--unreadIndicator-label-primary-default: var(--shades-white-100);
--unreadIndicator-border-primary-default: var(--shades-black-85);
/* Tab */
--tab-indicator-primary-default: var(--shades-black-85);
--tab-indicator-primary-active: var(--violet-dark-100);
--tab-label-primary-default: var(--shades-white-60);
--tab-label-primary-active: var(--shades-white-100);
--tab-label-primary-hover: var(--shades-white-80);
--tab-indicator-secondary-default: var(--shades-black-75);
--tab-indicator-secondary-active: var(--violet-light-100);
--tab-indicator-secondary-hover: var(--shades-black-60);
--tab-label-secondary-default: var(--shades-black-50);
--tab-label-secondary-active: var(--shades-white-100);
--tab-label-secondary-hover: var(--shades-white-80);
}
/* Light theme */
[data-theme='light'] {
/* Frame */
--frame-background-primary-default: var(--shades-white-100);
--frame-background-secondary-default: var(--shades-white-80);
--frame-background-tertiary-default: var(--shades-white-60);
/* Text */
--text-background-primary-default: var(--shades-black-95);
--text-background-secondary-default: var(--shades-black-60);
--text-background-tertiary-default: var(--shades-black-50);
--text-background-danger-default: var(--error-primary);
/* Panel */
/* @GINSU: TODO double check these values after redesign is finished */
--panel-background-primary-default: var(--shades-white-80);
--panel-background-secondary-default: var(--shades-white-90);
--panel-headerShadow-primary-default: var(--shadow-light-35);
+ --panel-headerShadow-secondary-default: var(--shadow-light-25);
/* Button */
--button-background-primary-default: var(--violet-dark-100);
--button-background-secondary-default: var(--shades-black-50);
/* @GINSU: TODO double check the tertiary values after redesign is finished */
--button-background-tertiary-default: var(--shades-black-60);
--button-background-success-default: var(--success-primary);
--button-background-primary-hover: var(--violet-dark-80);
--button-background-secondary-hover: var(--shades-black-60);
--button-background-tertiary-hover: var(--shades-black-50);
--button-background-primary-disabled: var(--shades-white-60);
--button-border-outline-default: var(--shades-black-50);
--button-label-primary-default: var(--shades-white-100);
--button-label-secondary-default: var(--shades-white-90);
--button-label-tertiary-default: var(--shades-black-60);
--button-label-primary-hover: var(--shades-white-90);
--button-label-primary-disabled: var(--shades-black-50);
--button-label-tertiary-hover: var(--shades-white-80);
/* Link */
--link-background-primary-default: var(--violet-dark-100);
--link-background-primary-disabled: var(--shades-black-50);
/* Separator */
--separator-background-primary-default: var(--shades-white-60);
/* Modal */
--modal-background-primary-default: var(--shades-white-100);
--modal-background-secondary-default: var(--shades-white-80);
--modal-header-primary-default: var(--shades-black-95);
--modal-close-primary-default: var(--shades-black-50);
--modal-close-primary-hover: var(--shades-black-95);
--modal-listItem-primary-hover: var(--shades-white-70);
/* Input Field */
--inputField-background-primary-default: var(--shades-white-100);
--inputField-background-secondary-default: var(--shades-white-60);
--inputField-label-primary-default: var(--shades-black-95);
--inputField-label-secondary-default: var(--shades-black-60);
--inputField-border-primary-default: var(--shades-white-60);
--inputField-clearBackground-primary-default: var(--shades-black-50);
--inputField-clearIcon-primary-default: var(--shades-white-100);
/* Status Indicator */
--statusIndicator-background-outer-active: var(--success-dark-50);
--statusIndicator-background-outer-inactive: var(--error-dark-50);
--statusIndicator-background-inner-active: var(--success-primary);
--statusIndicator-background-inner-inactive: var(--error-primary);
/* Enum Option */
--enumOption-background-primary-selected: var(--shades-white-70);
--enumOption-icon-primary-default: var(--violet-dark-100);
--enumOption-title-primary-default: var(--shades-black-85);
--enumOption-description-primary-default: var(--shades-black-60);
--enumOption-input-primary-default: var(--shades-black-50);
--enumOption-input-primary-selected: var(--shades-black-60);
--enumOption-input-secondary-default: var(--shades-black-75);
--enumOption-input-secondary-selected: var(--success-primary);
--enumOption-input-secondary-disabled: var(--shades-black-50);
/* Tooltip */
/* @GINSU: TODO double check these values after redesign is finished */
--tooltip-background-primary-default: var(--shades-white-80);
--tooltip-label-primary-default: var(--shades-black-85);
/* Unread Indicator */
--unreadIndicator-background-primary-default: var(--error-primary);
--unreadIndicator-label-primary-default: var(--shades-white-100);
--unreadIndicator-border-primary-default: var(--shades-white-80);
/* Tab */
/* @GINSU: TODO double check these values after redesign is finished */
--tab-indicator-primary-default: var(--shades-white-60);
--tab-indicator-primary-active: var(--violet-dark-100);
--tab-label-primary-default: var(--shades-black-75);
--tab-label-primary-active: var(--shades-white-100);
--tab-label-primary-hover: var(--shades-black-95);
--tab-indicator-secondary-default: var(--shades-black-50);
--tab-indicator-secondary-active: var(--violet-dark-100);
--tab-indicator-secondary-hover: var(--shades-black-60);
--tab-label-secondary-default: var(--shades-black-60);
--tab-label-secondary-active: var(--shades-black-95);
--tab-label-secondary-hover: var(--shades-black-85);
}