diff --git a/web/calendar/calendar.react.js b/web/calendar/calendar.react.js --- a/web/calendar/calendar.react.js +++ b/web/calendar/calendar.react.js @@ -162,9 +162,9 @@ let calendarContentStyle = null; let filterButtonStyle = null; if (this.state.filterPanelOpen) { - filterPanel = ; + filterPanel = ; calendarContentStyle = { marginLeft: '300px' }; - filterButtonStyle = { backgroundColor: 'rgba(0,0,0,0.67)' }; + filterButtonStyle = { display: 'none' }; } return ( diff --git a/web/calendar/filter-panel.css b/web/calendar/filter-panel.css --- a/web/calendar/filter-panel.css +++ b/web/calendar/filter-panel.css @@ -6,6 +6,8 @@ background-attachment: fixed; display: flex; flex-direction: column; + border-right: 1px solid #404040; + background-color: #0d0d0d; } div.filters { color: #dddddd; @@ -96,30 +98,42 @@ } div.searchContainer { padding: 8px 10px; - background-color: rgba(0, 0, 0, 0.89); + flex-direction: row; + display: flex; +} +.collapseButton { + color: var(--filter-panel-fg); + margin-left: 12px; + margin-right: 6px; + align-self: center; + display: flex; +} +.collapseButton:hover { + color: var(--fg); } div.search { display: flex; - border-radius: 5px; - padding: 5px; - background-color: rgba(255, 255, 255, 0.27); + border-radius: 8px; + padding: 10px; + background-color: var(--text-input-bg); align-items: center; + flex-grow: 1; + height: 20px; } svg.searchVector { - fill: white; - height: 22px; - width: 22px; - padding: 0 3px; + fill: var(--filter-panel-fg); + height: 20px; + width: 20px; } div.search > input { color: white; padding: 0; border: none; background-color: transparent; - font-weight: 600; - font-size: 15px; + font-weight: 400; + font-size: 14px; flex-grow: 1; - margin-left: 3px; + margin-left: 8px; } div.search > input:focus { outline: none; diff --git a/web/calendar/filter-panel.react.js b/web/calendar/filter-panel.react.js --- a/web/calendar/filter-panel.react.js +++ b/web/calendar/filter-panel.react.js @@ -9,6 +9,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import classNames from 'classnames'; import * as React from 'react'; +import { ChevronsLeft } from 'react-feather'; import { useDispatch } from 'react-redux'; import Switch from 'react-switch'; @@ -48,6 +49,7 @@ +includeDeleted: boolean, +dispatch: Dispatch, +pushModal: PushModal, + +toggleFilters: (event: SyntheticEvent) => void, }; type State = { +query: string, @@ -144,6 +146,9 @@ /> {clearQueryButton} + + +
{filters}
@@ -384,8 +389,14 @@ }; } -const ConnectedFilterPanel: React.ComponentType<{}> = React.memo<{}>( - function ConnectedFilterPanel(): React.Node { +type ConnectedFilterPanelProps = { + +toggleFilters: (event: SyntheticEvent) => void, +}; + +const ConnectedFilterPanel: React.ComponentType = + React.memo(function ConnectedFilterPanel( + props: ConnectedFilterPanelProps, + ): React.Node { const filteredThreadIDs = useSelector(filteredThreadIDsSelector); const filteredCommunityThreadIDs = useSelector( filterThreadIDsBelongingToCommunitySelector, @@ -405,9 +416,9 @@ includeDeleted={includeDeleted} dispatch={dispatch} pushModal={modalContext.pushModal} + toggleFilters={props.toggleFilters} /> ); - }, -); + }); export default ConnectedFilterPanel; diff --git a/web/theme.css b/web/theme.css --- a/web/theme.css +++ b/web/theme.css @@ -206,6 +206,7 @@ --filters-button-bg: var(--shades-black-100); --filters-button-border: var(--shades-black-80); --filters-button-hover-bg: var(--shades-black-90); + --filter-panel-fg: var(--shades-black-60); --topbar-button-bg-hover: var(--shades-black-80); --topbar-button-fg: var(--shades-white-60); }