diff options
| -rw-r--r-- | desktop/packages/mullvad-vpn/src/renderer/components/Filter.tsx | 52 |
1 files changed, 17 insertions, 35 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Filter.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Filter.tsx index 12c0d40ad4..f461354268 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/Filter.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/Filter.tsx @@ -13,15 +13,14 @@ import { import { colors } from '../lib/foundations'; import { useHistory } from '../lib/history'; import { useNormalRelaySettings, useTunnelProtocol } from '../lib/relay-settings-hooks'; -import { useBoolean } from '../lib/utility-hooks'; import { IRelayLocationCountryRedux } from '../redux/settings/reducers'; import { useSelector } from '../redux/store'; import { AppNavigationHeader } from './'; -import Accordion from './Accordion'; -import { AriaInputGroup, AriaLabel } from './AriaGroup'; +import { AriaInputGroup } from './AriaGroup'; import * as Cell from './cell'; import Selector from './cell/Selector'; import { normalText } from './common-styles'; +import { FilterAccordion } from './FilterAccordion'; import { BackAction } from './KeyboardNavigation'; import { Footer, Layout, SettingsContainer } from './Layout'; import { NavigationContainer } from './NavigationContainer'; @@ -207,8 +206,6 @@ interface IFilterByOwnershipProps { } function FilterByOwnership(props: IFilterByOwnershipProps) { - const [expanded, , , toggleExpanded] = useBoolean(false); - const values = useMemo( () => [ @@ -226,14 +223,7 @@ function FilterByOwnership(props: IFilterByOwnershipProps) { return ( <AriaInputGroup> - <Cell.CellButton onClick={toggleExpanded}> - <AriaLabel> - <Cell.Label>{messages.pgettext('filter-view', 'Ownership')}</Cell.Label> - </AriaLabel> - <Icon color="whiteAlpha80" icon={expanded ? 'chevron-up' : 'chevron-down'} /> - </Cell.CellButton> - - <Accordion expanded={expanded}> + <FilterAccordion title={messages.pgettext('filter-view', 'Ownership')}> <StyledSelector items={values} value={props.ownership} @@ -241,7 +231,7 @@ function FilterByOwnership(props: IFilterByOwnershipProps) { automaticLabel={messages.gettext('Any')} automaticValue={Ownership.any} /> - </Accordion> + </FilterAccordion> </AriaInputGroup> ); } @@ -255,8 +245,6 @@ interface IFilterByProviderProps { function FilterByProvider(props: IFilterByProviderProps) { const { setProviders } = props; - const [expanded, , , toggleExpanded] = useBoolean(false); - const onToggle = useCallback( (provider: string) => setProviders((providers) => { @@ -273,25 +261,19 @@ function FilterByProvider(props: IFilterByProviderProps) { }, [setProviders]); return ( - <> - <Cell.CellButton onClick={toggleExpanded}> - <Cell.Label>{messages.pgettext('filter-view', 'Providers')}</Cell.Label> - <Icon color="whiteAlpha80" icon={expanded ? 'chevron-up' : 'chevron-down'} /> - </Cell.CellButton> - <Accordion expanded={expanded}> - <CheckboxRow - label={messages.pgettext('filter-view', 'All providers')} - $bold - checked={Object.values(props.providers).every((value) => value)} - onChange={toggleAll} - /> - {Object.entries(props.providers) - .filter(([provider]) => props.availableOptions.includes(provider)) - .map(([provider, checked]) => ( - <CheckboxRow key={provider} label={provider} checked={checked} onChange={onToggle} /> - ))} - </Accordion> - </> + <FilterAccordion title={messages.pgettext('filter-view', 'Providers')}> + <CheckboxRow + label={messages.pgettext('filter-view', 'All providers')} + $bold + checked={Object.values(props.providers).every((value) => value)} + onChange={toggleAll} + /> + {Object.entries(props.providers) + .filter(([provider]) => props.availableOptions.includes(provider)) + .map(([provider, checked]) => ( + <CheckboxRow key={provider} label={provider} checked={checked} onChange={onToggle} /> + ))} + </FilterAccordion> ); } |