Page MenuHomePhabricator
Files F3379513

D4124.id13118.diff
No OneTemporary
Actions

D4124.id13118.diff
View Options

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,22 @@
[dispatch],
);
+ const areSettingsOpen = useSelector(
+ state => state.navInfo.tab === 'settings',
+ );
+ const settingsButtonContainerClass = classNames({
+ [css.settingsSelectedContainer]: areSettingsOpen,
+ });
+
return (
<div className={css.container}>
<SWMansionIcon icon="inbox" size={36} />
<div className={css.spacer} />
- <Button variant="round" onClick={openAccountSettings}>
- <SWMansionIcon icon="settings" size={22} />
- </Button>
+ <div className={settingsButtonContainerClass}>
+ <Button variant="round" onClick={openAccountSettings}>
+ <SWMansionIcon icon="settings" size={22} />
+ </Button>
+ </div>
</div>
);
}
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);

File Metadata

Mime Type
text/plain
Expires
Thu, Nov 28, 4:41 PM (20 h, 41 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2594454
Default Alt Text
D4124.id13118.diff (2 KB)

Event Timeline