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 @@ -21,3 +21,12 @@ color: var(--fg); padding: 0; } + +.settingsSelectedContainer { + display: flex; + justify-content: center; + width: 100%; + box-sizing: border-box; + border-left: 8px solid var(--community-settings-selected); + border-right: 8px solid transparent; +} 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 @@ -1,9 +1,11 @@ // @flow +import classNames from 'classnames'; import * as React from 'react'; import { useDispatch } from 'react-redux'; import Button from '../components/button.react'; +import { useSelector } from '../redux/redux-utils.js'; import SWMansionIcon from '../SWMansionIcon.react'; import { updateNavInfoActionType } from '../types/nav-types.js'; import css from './community-picker.css'; @@ -22,13 +24,20 @@ [dispatch], ); + const isSettingsOpen = useSelector(state => state.navInfo.tab === 'settings'); + const settingsButtonContainerClass = classNames({ + [css.settingsSelectedContainer]: isSettingsOpen, + }); + return (
- +
+ +
); } diff --git a/web/theme.css b/web/theme.css --- a/web/theme.css +++ b/web/theme.css @@ -84,6 +84,7 @@ --calendar-day-bg: var(--shades-black-60); --calendar-day-selected-color: var(--violet-dark-80); --community-bg: var(--shades-black-90); + --community-settings-selected: var(--violet-dark-60); --unread-bg: var(--error-primary); --settings-btn-bg: var(--violet-dark-100); --modal-bg: var(--shades-black-90);