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>
   );
 }