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 (