Use NavigationListItem in setting views

11 files changed, 67 insertions, 90 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Support.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Support.tsx
index 7ee58275fb..dc2d9f9275 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Support.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Support.tsx
@@ -13,6 +13,7 @@ import * as Cell from './cell';
 import { BackAction } from './KeyboardNavigation';
 import { Layout, SettingsContainer } from './Layout';
 import { NavigationContainer } from './NavigationContainer';
+import { NavigationListItem } from './NavigationListItem';
 import { NavigationScrollbars } from './NavigationScrollbars';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
 
@@ -58,16 +59,14 @@ export default function Support() {
 }
 
 function ProblemReportButton() {
-  const history = useHistory();
-  const clickHandler = useCallback(() => history.push(RoutePath.problemReport), [history]);
-
   // TRANSLATORS: Navigation button to the 'Report a problem' help view
   const label = messages.pgettext('support-view', 'Report a problem');
 
   return (
-    <Cell.CellNavigationButton onClick={clickHandler}>
-      <Cell.Label>{label}</Cell.Label>
-    </Cell.CellNavigationButton>
+    <NavigationListItem to={RoutePath.problemReport}>
+      <NavigationListItem.Label>{label}</NavigationListItem.Label>
+      <NavigationListItem.Icon icon="chevron-right" />
+    </NavigationListItem>
   );
 }
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/UserInterfaceSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/UserInterfaceSettings.tsx
index 786013168b..be918077bc 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/UserInterfaceSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/UserInterfaceSettings.tsx
@@ -1,24 +1,18 @@
-import { useCallback } from 'react';
 import styled from 'styled-components';
 
 import { messages } from '../../shared/gettext';
 import { RoutePath } from '../../shared/routes';
 import { useAppContext } from '../context';
+import { Image } from '../lib/components';
 import { useHistory } from '../lib/history';
 import { useSelector } from '../redux/store';
 import { AppNavigationHeader } from './';
 import { AriaDescription, AriaInput, AriaInputGroup, AriaLabel } from './AriaGroup';
 import * as Cell from './cell';
 import { BackAction } from './KeyboardNavigation';
-import {
-  LabelStack,
-  Layout,
-  SettingsContainer,
-  SettingsContent,
-  SettingsGroup,
-  SettingsStack,
-} from './Layout';
+import { Layout, SettingsContainer, SettingsContent, SettingsGroup, SettingsStack } from './Layout';
 import { NavigationContainer } from './NavigationContainer';
+import { NavigationListItem } from './NavigationListItem';
 import { NavigationScrollbars } from './NavigationScrollbars';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
 
@@ -240,25 +234,25 @@ function AnimateMapSetting() {
 }
 
 function LanguageButton() {
-  const history = useHistory();
   const { getPreferredLocaleDisplayName } = useAppContext();
   const preferredLocale = useSelector((state) => state.settings.guiSettings.preferredLocale);
   const localeDisplayName = getPreferredLocaleDisplayName(preferredLocale);
 
-  const navigate = useCallback(() => history.push(RoutePath.selectLanguage), [history]);
-
   return (
-    <Cell.CellNavigationButton onClick={navigate}>
-      <LabelStack>
-        <Cell.CellImage source="icon-language" />
-        <Cell.Label>
+    <NavigationListItem to={RoutePath.selectLanguage}>
+      <NavigationListItem.Group>
+        <Image source="icon-language" />
+        <NavigationListItem.Label>
           {
             // TRANSLATORS: Navigation button to the 'Language' settings view
             messages.pgettext('user-interface-settings-view', 'Language')
           }
-        </Cell.Label>
-      </LabelStack>
-      <Cell.SubText>{localeDisplayName}</Cell.SubText>
-    </Cell.CellNavigationButton>
+        </NavigationListItem.Label>
+      </NavigationListItem.Group>
+      <NavigationListItem.Group>
+        <NavigationListItem.Text>{localeDisplayName}</NavigationListItem.Text>
+        <NavigationListItem.Icon icon="chevron-right" />
+      </NavigationListItem.Group>
+    </NavigationListItem>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx
index cca769e238..d1e3d7df72 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx
@@ -28,6 +28,7 @@ import { BackAction } from './KeyboardNavigation';
 import { Layout, SettingsContainer, SettingsContent, SettingsGroup, SettingsStack } from './Layout';
 import { ModalAlert, ModalAlertType, ModalMessage } from './Modal';
 import { NavigationContainer } from './NavigationContainer';
+import { NavigationListItem } from './NavigationListItem';
 import { NavigationScrollbars } from './NavigationScrollbars';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
 
@@ -787,52 +788,48 @@ function mapRelaySettingsToProtocol(relaySettings: RelaySettingsRedux) {
 }
 
 function WireguardSettingsButton() {
-  const history = useHistory();
   const tunnelProtocol = useSelector((state) =>
     mapRelaySettingsToProtocol(state.settings.relaySettings),
   );
 
-  const navigate = useCallback(() => history.push(RoutePath.wireguardSettings), [history]);
-
   return (
-    <Cell.CellNavigationButton onClick={navigate} disabled={tunnelProtocol === 'openvpn'}>
-      <Cell.Label>
+    <NavigationListItem to={RoutePath.wireguardSettings} disabled={tunnelProtocol === 'openvpn'}>
+      <NavigationListItem.Label>
         {sprintf(
           // TRANSLATORS: %(wireguard)s will be replaced with the string "WireGuard"
           messages.pgettext('vpn-settings-view', '%(wireguard)s settings'),
           { wireguard: strings.wireguard },
         )}
-      </Cell.Label>
-    </Cell.CellNavigationButton>
+      </NavigationListItem.Label>
+      <NavigationListItem.Icon icon="chevron-right" />
+    </NavigationListItem>
   );
 }
 
 function OpenVpnSettingsButton() {
-  const history = useHistory();
   const tunnelProtocol = useTunnelProtocol();
 
-  const navigate = useCallback(() => history.push(RoutePath.openVpnSettings), [history]);
-
   return (
-    <Cell.CellNavigationButton onClick={navigate} disabled={tunnelProtocol === 'wireguard'}>
-      <Cell.Label>
+    <NavigationListItem to={RoutePath.openVpnSettings} disabled={tunnelProtocol === 'wireguard'}>
+      <NavigationListItem.Label>
         {sprintf(
           // TRANSLATORS: %(openvpn)s will be replaced with the string "OpenVPN"
           messages.pgettext('vpn-settings-view', '%(openvpn)s settings'),
           { openvpn: strings.openvpn },
         )}
-      </Cell.Label>
-    </Cell.CellNavigationButton>
+      </NavigationListItem.Label>
+      <NavigationListItem.Icon icon="chevron-right" />
+    </NavigationListItem>
   );
 }
 
 function IpOverrideButton() {
-  const history = useHistory();
-  const navigate = useCallback(() => history.push(RoutePath.settingsImport), [history]);
-
   return (
-    <Cell.CellNavigationButton onClick={navigate}>
-      <Cell.Label>{messages.pgettext('vpn-settings-view', 'Server IP override')}</Cell.Label>
-    </Cell.CellNavigationButton>
+    <NavigationListItem to={RoutePath.settingsImport}>
+      <NavigationListItem.Label>
+        {messages.pgettext('vpn-settings-view', 'Server IP override')}
+      </NavigationListItem.Label>
+      <NavigationListItem.Icon icon="chevron-right" />
+    </NavigationListItem>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/api-access-methods-list-item/ApiAccessMethodsListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/api-access-methods-list-item/ApiAccessMethodsListItem.tsx
index 56cd42b14b..97079c0047 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/api-access-methods-list-item/ApiAccessMethodsListItem.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/api-access-methods-list-item/ApiAccessMethodsListItem.tsx
@@ -1,19 +1,17 @@
 import { messages } from '../../../../../../shared/gettext';
 import { RoutePath } from '../../../../../../shared/routes';
-import { Icon } from '../../../../../lib/components';
-import { ListItem } from '../../../../../lib/components/list-item';
 import { NavigationListItem } from '../../../../NavigationListItem';
 
 export function ApiAccessMethodsListItem() {
   return (
     <NavigationListItem to={RoutePath.apiAccessMethods}>
-      <ListItem.Label>
+      <NavigationListItem.Label>
         {
           // TRANSLATORS: Navigation button to the 'API access methods' view
           messages.pgettext('settings-view', 'API access')
         }
-      </ListItem.Label>
-      <Icon icon="chevron-right" />
+      </NavigationListItem.Label>
+      <NavigationListItem.Icon icon="chevron-right" />
     </NavigationListItem>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/app-info-list-item/AppInfoListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/app-info-list-item/AppInfoListItem.tsx
index d5e1d03ca2..a1e7c58e99 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/app-info-list-item/AppInfoListItem.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/app-info-list-item/AppInfoListItem.tsx
@@ -2,13 +2,12 @@ import styled from 'styled-components';
 
 import { messages } from '../../../../../../shared/gettext';
 import { RoutePath } from '../../../../../../shared/routes';
-import { Flex, Icon } from '../../../../../lib/components';
+import { Flex } from '../../../../../lib/components';
 import { Dot } from '../../../../../lib/components/dot';
-import { ListItem } from '../../../../../lib/components/list-item';
 import { useVersionCurrent, useVersionSuggestedUpgrade } from '../../../../../redux/hooks';
 import { NavigationListItem } from '../../../../NavigationListItem';
 
-const StyledText = styled(ListItem.Text)`
+const StyledText = styled(NavigationListItem.Text)`
   margin-top: -4px;
 `;
 
@@ -19,12 +18,12 @@ export function AppInfoListItem() {
   return (
     <NavigationListItem to={RoutePath.appInfo}>
       <Flex $flexDirection="column">
-        <ListItem.Label>
+        <NavigationListItem.Label>
           {
             // TRANSLATORS: Navigation button to the 'App info' view
             messages.pgettext('settings-view', 'App info')
           }
-        </ListItem.Label>
+        </NavigationListItem.Label>
         {suggestedUpgrade && (
           <StyledText variant="footnoteMini">
             {
@@ -34,11 +33,11 @@ export function AppInfoListItem() {
           </StyledText>
         )}
       </Flex>
-      <ListItem.Group>
-        <ListItem.Text>{current}</ListItem.Text>
+      <NavigationListItem.Group>
+        <NavigationListItem.Text>{current}</NavigationListItem.Text>
         {suggestedUpgrade && <Dot variant="warning" size="small" />}
-        <Icon icon="chevron-right" />
-      </ListItem.Group>
+        <NavigationListItem.Icon icon="chevron-right" />
+      </NavigationListItem.Group>
     </NavigationListItem>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/daita-list-item/DaitaListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/daita-list-item/DaitaListItem.tsx
index 9766bdbba8..f1280db9c6 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/daita-list-item/DaitaListItem.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/daita-list-item/DaitaListItem.tsx
@@ -1,8 +1,6 @@
 import { strings } from '../../../../../../shared/constants';
 import { messages } from '../../../../../../shared/gettext';
 import { RoutePath } from '../../../../../../shared/routes';
-import { Icon } from '../../../../../lib/components';
-import { ListItem } from '../../../../../lib/components/list-item';
 import { NavigationListItem } from '../../../../NavigationListItem';
 import { useIsOn } from './hooks';
 
@@ -11,11 +9,13 @@ export function DaitaListItem() {
 
   return (
     <NavigationListItem to={RoutePath.daitaSettings}>
-      <ListItem.Label>{strings.daita}</ListItem.Label>
-      <ListItem.Group>
-        <ListItem.Text>{isOn ? messages.gettext('On') : messages.gettext('Off')}</ListItem.Text>
-        <Icon icon="chevron-right" />
-      </ListItem.Group>
+      <NavigationListItem.Label>{strings.daita}</NavigationListItem.Label>
+      <NavigationListItem.Group>
+        <NavigationListItem.Text>
+          {isOn ? messages.gettext('On') : messages.gettext('Off')}
+        </NavigationListItem.Text>
+        <NavigationListItem.Icon icon="chevron-right" />
+      </NavigationListItem.Group>
     </NavigationListItem>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/debug-list-item/DebugListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/debug-list-item/DebugListItem.tsx
index 2388b659ba..60fe84f657 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/debug-list-item/DebugListItem.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/debug-list-item/DebugListItem.tsx
@@ -1,13 +1,11 @@
 import { RoutePath } from '../../../../../../shared/routes';
-import { Icon } from '../../../../../lib/components';
-import { ListItem } from '../../../../../lib/components/list-item';
 import { NavigationListItem } from '../../../../NavigationListItem';
 
 export function DebugListItem() {
   return (
     <NavigationListItem to={RoutePath.debug}>
-      <ListItem.Label>Developer tools</ListItem.Label>
-      <Icon icon="chevron-right" />
+      <NavigationListItem.Label>Developer tools</NavigationListItem.Label>
+      <NavigationListItem.Icon icon="chevron-right" />
     </NavigationListItem>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/split-tunneling-list-item/SplitTunnelingListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/split-tunneling-list-item/SplitTunnelingListItem.tsx
index 5f0201c984..9cf84551e8 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/split-tunneling-list-item/SplitTunnelingListItem.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/split-tunneling-list-item/SplitTunnelingListItem.tsx
@@ -1,14 +1,12 @@
 import { strings } from '../../../../../../shared/constants';
 import { RoutePath } from '../../../../../../shared/routes';
-import { Icon } from '../../../../../lib/components';
-import { ListItem } from '../../../../../lib/components/list-item';
 import { NavigationListItem } from '../../../../NavigationListItem';
 
 export function SplitTunnelingListItem() {
   return (
     <NavigationListItem to={RoutePath.splitTunneling}>
-      <ListItem.Label>{strings.splitTunneling}</ListItem.Label>
-      <Icon icon="chevron-right" />
+      <NavigationListItem.Label>{strings.splitTunneling}</NavigationListItem.Label>
+      <NavigationListItem.Icon icon="chevron-right" />
     </NavigationListItem>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/support-list-item/SupportListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/support-list-item/SupportListItem.tsx
index 8fbfd81681..7157052a92 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/support-list-item/SupportListItem.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/support-list-item/SupportListItem.tsx
@@ -1,19 +1,17 @@
 import { messages } from '../../../../../../shared/gettext';
 import { RoutePath } from '../../../../../../shared/routes';
-import { Icon } from '../../../../../lib/components';
-import { ListItem } from '../../../../../lib/components/list-item';
 import { NavigationListItem } from '../../../../NavigationListItem';
 
 export function SupportListItem() {
   return (
     <NavigationListItem to={RoutePath.support}>
-      <ListItem.Label>
+      <NavigationListItem.Label>
         {
           // TRANSLATORS: Navigation button to the 'Support' view
           messages.pgettext('settings-view', 'Support')
         }
-      </ListItem.Label>
-      <Icon icon="chevron-right" />
+      </NavigationListItem.Label>
+      <NavigationListItem.Icon icon="chevron-right" />
     </NavigationListItem>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/user-interface-settings-list-item/UserInterfaceSettingsListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/user-interface-settings-list-item/UserInterfaceSettingsListItem.tsx
index f13d40cb5b..a93de63563 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/user-interface-settings-list-item/UserInterfaceSettingsListItem.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/user-interface-settings-list-item/UserInterfaceSettingsListItem.tsx
@@ -1,19 +1,17 @@
 import { messages } from '../../../../../../shared/gettext';
 import { RoutePath } from '../../../../../../shared/routes';
-import { Icon } from '../../../../../lib/components';
-import { ListItem } from '../../../../../lib/components/list-item';
 import { NavigationListItem } from '../../../../NavigationListItem';
 
 export function UserInterfaceSettingsListItem() {
   return (
     <NavigationListItem to={RoutePath.userInterfaceSettings}>
-      <ListItem.Label>
+      <NavigationListItem.Label>
         {
           // TRANSLATORS: Navigation button to the 'User interface settings' view
           messages.pgettext('settings-view', 'User interface settings')
         }
-      </ListItem.Label>
-      <Icon icon="chevron-right" />
+      </NavigationListItem.Label>
+      <NavigationListItem.Icon icon="chevron-right" />
     </NavigationListItem>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/vpn-settings-list-item/VpnSettingsListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/vpn-settings-list-item/VpnSettingsListItem.tsx
index 0c39da6536..e5b3f89bd6 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/vpn-settings-list-item/VpnSettingsListItem.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/vpn-settings-list-item/VpnSettingsListItem.tsx
@@ -1,19 +1,17 @@
 import { messages } from '../../../../../../shared/gettext';
 import { RoutePath } from '../../../../../../shared/routes';
-import { Icon } from '../../../../../lib/components';
-import { ListItem } from '../../../../../lib/components/list-item';
 import { NavigationListItem } from '../../../../NavigationListItem';
 
 export function VpnSettingsListItem() {
   return (
     <NavigationListItem to={RoutePath.vpnSettings}>
-      <ListItem.Label>
+      <NavigationListItem.Label>
         {
           // TRANSLATORS: Navigation button to the 'VPN settings' view
           messages.pgettext('settings-view', 'VPN settings')
         }
-      </ListItem.Label>
-      <Icon icon="chevron-right" />
+      </NavigationListItem.Label>
+      <NavigationListItem.Icon icon="chevron-right" />
     </NavigationListItem>
   );
 }