diff --git a/web/sidebar/community-drawer-item.css b/web/sidebar/community-drawer-item.css --- a/web/sidebar/community-drawer-item.css +++ b/web/sidebar/community-drawer-item.css @@ -6,7 +6,7 @@ } .active { - background-color: var(--active-drawer-item); + background-color: var(--active-drawer-item-bg); border-top-right-radius: 4px; border-bottom-right-radius: 4px; } @@ -26,18 +26,13 @@ white-space: nowrap; overflow: hidden; color: var(--drawer-item-color); - line-height: 24px; -} - -.titleLevel0 { - font-size: var(--l-font-18); + font-size: var(--s-font-14); font-weight: var(--semi-bold); + line-height: 22px; } -.titleLevel1, -.titleLevel2 { - font-size: var(--m-font-16); - font-weight: var(--semi-bold); +.activeTitle { + color: var(--drawer-active-item-color); } .buttonContainer { diff --git a/web/sidebar/community-drawer-item.react.js b/web/sidebar/community-drawer-item.react.js --- a/web/sidebar/community-drawer-item.react.js +++ b/web/sidebar/community-drawer-item.react.js @@ -105,7 +105,10 @@ }); const { uiName } = useResolvedThreadInfo(threadInfo); - const titleLabel = classnames(css.title, css[labelStyle]); + const titleLabel = classnames({ + [css[labelStyle]]: true, + [css.activeTitle]: handler.isActive, + }); const style = React.useMemo(() => ({ paddingLeft }), [paddingLeft]); const threadEntry = classnames({ diff --git a/web/sidebar/community-drawer.css b/web/sidebar/community-drawer.css --- a/web/sidebar/community-drawer.css +++ b/web/sidebar/community-drawer.css @@ -1,12 +1,10 @@ .container { - background-color: var(--drawer-bg); display: flex; overflow-y: auto; flex-direction: column; - padding-right: 8px; padding-top: 8px; padding-bottom: 8px; - align-self: flex-start; + padding-right: 16px; } .hidden { diff --git a/web/sidebar/community-drawer.react.js b/web/sidebar/community-drawer.react.js --- a/web/sidebar/community-drawer.react.js +++ b/web/sidebar/community-drawer.react.js @@ -19,7 +19,7 @@ import css from './community-drawer.css'; const maxDepth = 2; -const labelStyles = ['titleLevel0', 'titleLevel1', 'titleLevel2']; +const labelStyles = ['title']; const HandlerChat = getCommunityDrawerItemHandler('chat'); const HandlerCal = getCommunityDrawerItemHandler('calendar'); diff --git a/web/sidebar/community-picker.css b/web/sidebar/community-picker.css --- a/web/sidebar/community-picker.css +++ b/web/sidebar/community-picker.css @@ -2,37 +2,55 @@ display: flex; flex-direction: column; background: var(--community-bg); - padding: 24px 0 32px 0; border-right: 1px solid var(--border-color); flex-grow: 1; overflow: auto; - width: 400px; } .spacer { flex-grow: 1; } -.activeContainer { +.header { + border-bottom: 1px solid var(--community-drawer-lines); + padding: 10px 0 10px 0; + align-items: center; display: flex; - width: 100%; - box-sizing: border-box; - border-left: 8px solid var(--community-settings-selected); - border-right: 8px solid transparent; - padding-left: 12px; - height: 40px; + margin-right: 16px; +} + +.footer { + border-top: 1px solid var(--community-drawer-lines); + padding: 12px 0 12px 0; align-items: center; + display: flex; + margin-right: 16px; } -.inactiveContainer { +.sideLine { + width: 3px; + height: 24px; + border-radius: 0 4px 4px 0; + margin-right: 14px; +} + +.sideLineActive { + background-color: var(--community-settings-selected); +} + +.itemContainer { display: flex; - padding-left: 20px; height: 40px; align-items: center; + width: 100%; + border-radius: 0px 8px 8px 0px; } -.inactiveContainer svg, -.activeContainer svg { +.activeItemContainer { + background-color: var(--drawer-open-community-bg); +} + +.itemContainer svg { color: var(--fg); padding: 0; } @@ -48,13 +66,13 @@ } .drawerWrapper { - align-self: flex-start; width: 100%; + overflow: auto; } -.inboxButtonTitle { +.buttonTitle { font-weight: 500; - font-size: var(--l-font-18); + font-size: var(--s-font-14); line-height: 22px; padding-left: 12px; color: var(--fg); diff --git a/web/sidebar/community-picker.react.js b/web/sidebar/community-picker.react.js --- a/web/sidebar/community-picker.react.js +++ b/web/sidebar/community-picker.react.js @@ -27,14 +27,8 @@ }, [dispatch], ); - const isSettingsOpen = useSelector(state => state.navInfo.tab === 'settings'); - const settingsButtonContainerClass = classNames({ - [css.activeContainer]: isSettingsOpen, - [css.inactiveContainer]: !isSettingsOpen, - }); const isCalendarOpen = useSelector(state => state.navInfo.tab === 'calendar'); - const onPressInbox = React.useCallback( (event: SyntheticEvent) => { event.preventDefault(); @@ -51,6 +45,9 @@ }, [dispatch, isCalendarOpen], ); + + const inboxButtonTitle = isCalendarOpen ? 'All communities' : 'Inbox'; + const isInboxOpen = useSelector( state => state.navInfo.tab === 'chat' || @@ -58,25 +55,47 @@ state.navInfo.tab === 'calendar', ); const inboxButtonContainerClass = classNames({ - [css.activeContainer]: isInboxOpen, - [css.inactiveContainer]: !isInboxOpen, + [css.itemContainer]: true, + [css.activeItemContainer]: isInboxOpen, + }); + const isSettingsOpen = useSelector(state => state.navInfo.tab === 'settings'); + const settingsButtonContainerClass = classNames({ + [css.itemContainer]: true, + [css.activeItemContainer]: isSettingsOpen, }); - const inboxButtonTitle = isCalendarOpen ? 'All communities' : 'Inbox'; + const sideLineInbox = classNames({ + [css.sideLine]: true, + [css.sideLineActive]: isInboxOpen, + }); + const sideLineSettings = classNames({ + [css.sideLine]: true, + [css.sideLineActive]: isSettingsOpen, + }); return (
- - -
{inboxButtonTitle}
-
+
+ +
+ +
{inboxButtonTitle}
+
+
-
- - + diff --git a/web/style.css b/web/style.css --- a/web/style.css +++ b/web/style.css @@ -54,7 +54,7 @@ div.layout { height: 100vh; display: grid; - grid-template-columns: 400px repeat(12, 1fr); + grid-template-columns: 300px repeat(12, 1fr); grid-template-rows: 65px calc(100vh - 65px); grid-template-areas: 'nav nav nav nav nav nav nav nav nav nav nav nav nav' diff --git a/web/theme.css b/web/theme.css --- a/web/theme.css +++ b/web/theme.css @@ -198,7 +198,8 @@ --drawer-expand-button: var(--shades-black-60); --drawer-expand-button-disabled: var(--shades-black-80); --drawer-item-color: var(--shades-white-60); + --drawer-active-item-color: var(--shades-white-100); --drawer-open-community-bg: #191919; - --drawer-bg: var(--shades-black-90); - --active-drawer-item: rgba(0, 0, 0, 0.5); + --active-drawer-item-bg: rgba(0, 0, 0, 0.5); + --community-drawer-lines: rgba(255, 255, 255, 0.08); }