Rename NavigationListItem to SettingsNavigationListItem

15 files changed, 106 insertions, 99 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/NavigationListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsNavigationListItem.tsx
index 6db51d0276..51bb0afa3b 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/NavigationListItem.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsNavigationListItem.tsx
@@ -4,11 +4,11 @@ import { RoutePath } from '../../shared/routes';
 import { useHistory } from '../lib/history';
 import { SettingsListItem, SettingsListItemProps } from './settings-list-item';
 
-export type NavigationListItemProps = {
+export type SettingsNavigationListItemProps = {
   to: RoutePath;
 } & SettingsListItemProps;
 
-function NavigationListItem({ to, children, ...props }: NavigationListItemProps) {
+function SettingsNavigationListItem({ to, children, ...props }: SettingsNavigationListItemProps) {
   const history = useHistory();
   const navigate = React.useCallback(() => history.push(to), [history, to]);
 
@@ -22,7 +22,7 @@ function NavigationListItem({ to, children, ...props }: NavigationListItemProps)
     </SettingsListItem>
   );
 }
-const NavigationListItemNamespace = Object.assign(NavigationListItem, {
+const SettingsNavigationListItemNamespace = Object.assign(SettingsNavigationListItem, {
   Label: SettingsListItem.Label,
   Group: SettingsListItem.Group,
   Text: SettingsListItem.Text,
@@ -30,4 +30,4 @@ const NavigationListItemNamespace = Object.assign(NavigationListItem, {
   Icon: SettingsListItem.Icon,
 });
 
-export { NavigationListItemNamespace as NavigationListItem };
+export { SettingsNavigationListItemNamespace as SettingsNavigationListItem };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Support.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Support.tsx
index dc2d9f9275..4f2799200f 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Support.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Support.tsx
@@ -13,9 +13,9 @@ 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';
+import { SettingsNavigationListItem } from './SettingsNavigationListItem';
 
 const StyledContent = styled.div({
   display: 'flex',
@@ -63,10 +63,10 @@ function ProblemReportButton() {
   const label = messages.pgettext('support-view', 'Report a problem');
 
   return (
-    <NavigationListItem to={RoutePath.problemReport}>
-      <NavigationListItem.Label>{label}</NavigationListItem.Label>
-      <NavigationListItem.Icon icon="chevron-right" />
-    </NavigationListItem>
+    <SettingsNavigationListItem to={RoutePath.problemReport}>
+      <SettingsNavigationListItem.Label>{label}</SettingsNavigationListItem.Label>
+      <SettingsNavigationListItem.Icon icon="chevron-right" />
+    </SettingsNavigationListItem>
   );
 }
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/UserInterfaceSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/UserInterfaceSettings.tsx
index be918077bc..1f3a4893a2 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/UserInterfaceSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/UserInterfaceSettings.tsx
@@ -12,9 +12,9 @@ import * as Cell from './cell';
 import { BackAction } from './KeyboardNavigation';
 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';
+import { SettingsNavigationListItem } from './SettingsNavigationListItem';
 
 const StyledAnimateMapCellGroup = styled(SettingsGroup)({
   '@media (prefers-reduced-motion: reduce)': {
@@ -239,20 +239,20 @@ function LanguageButton() {
   const localeDisplayName = getPreferredLocaleDisplayName(preferredLocale);
 
   return (
-    <NavigationListItem to={RoutePath.selectLanguage}>
-      <NavigationListItem.Group>
+    <SettingsNavigationListItem to={RoutePath.selectLanguage}>
+      <SettingsNavigationListItem.Group>
         <Image source="icon-language" />
-        <NavigationListItem.Label>
+        <SettingsNavigationListItem.Label>
           {
             // TRANSLATORS: Navigation button to the 'Language' settings view
             messages.pgettext('user-interface-settings-view', 'Language')
           }
-        </NavigationListItem.Label>
-      </NavigationListItem.Group>
-      <NavigationListItem.Group>
-        <NavigationListItem.Text>{localeDisplayName}</NavigationListItem.Text>
-        <NavigationListItem.Icon icon="chevron-right" />
-      </NavigationListItem.Group>
-    </NavigationListItem>
+        </SettingsNavigationListItem.Label>
+      </SettingsNavigationListItem.Group>
+      <SettingsNavigationListItem.Group>
+        <SettingsNavigationListItem.Text>{localeDisplayName}</SettingsNavigationListItem.Text>
+        <SettingsNavigationListItem.Icon icon="chevron-right" />
+      </SettingsNavigationListItem.Group>
+    </SettingsNavigationListItem>
   );
 }
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 97079c0047..0817fcab6a 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,17 +1,17 @@
 import { messages } from '../../../../../../shared/gettext';
 import { RoutePath } from '../../../../../../shared/routes';
-import { NavigationListItem } from '../../../../NavigationListItem';
+import { SettingsNavigationListItem } from '../../../../SettingsNavigationListItem';
 
 export function ApiAccessMethodsListItem() {
   return (
-    <NavigationListItem to={RoutePath.apiAccessMethods}>
-      <NavigationListItem.Label>
+    <SettingsNavigationListItem to={RoutePath.apiAccessMethods}>
+      <SettingsNavigationListItem.Label>
         {
           // TRANSLATORS: Navigation button to the 'API access methods' view
           messages.pgettext('settings-view', 'API access')
         }
-      </NavigationListItem.Label>
-      <NavigationListItem.Icon icon="chevron-right" />
-    </NavigationListItem>
+      </SettingsNavigationListItem.Label>
+      <SettingsNavigationListItem.Icon icon="chevron-right" />
+    </SettingsNavigationListItem>
   );
 }
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 a1e7c58e99..f2da959715 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
@@ -5,9 +5,9 @@ import { RoutePath } from '../../../../../../shared/routes';
 import { Flex } from '../../../../../lib/components';
 import { Dot } from '../../../../../lib/components/dot';
 import { useVersionCurrent, useVersionSuggestedUpgrade } from '../../../../../redux/hooks';
-import { NavigationListItem } from '../../../../NavigationListItem';
+import { SettingsNavigationListItem } from '../../../../SettingsNavigationListItem';
 
-const StyledText = styled(NavigationListItem.Text)`
+const StyledText = styled(SettingsNavigationListItem.Text)`
   margin-top: -4px;
 `;
 
@@ -16,14 +16,14 @@ export function AppInfoListItem() {
   const { suggestedUpgrade } = useVersionSuggestedUpgrade();
 
   return (
-    <NavigationListItem to={RoutePath.appInfo}>
+    <SettingsNavigationListItem to={RoutePath.appInfo}>
       <Flex $flexDirection="column">
-        <NavigationListItem.Label>
+        <SettingsNavigationListItem.Label>
           {
             // TRANSLATORS: Navigation button to the 'App info' view
             messages.pgettext('settings-view', 'App info')
           }
-        </NavigationListItem.Label>
+        </SettingsNavigationListItem.Label>
         {suggestedUpgrade && (
           <StyledText variant="footnoteMini">
             {
@@ -33,11 +33,11 @@ export function AppInfoListItem() {
           </StyledText>
         )}
       </Flex>
-      <NavigationListItem.Group>
-        <NavigationListItem.Text>{current}</NavigationListItem.Text>
+      <SettingsNavigationListItem.Group>
+        <SettingsNavigationListItem.Text>{current}</SettingsNavigationListItem.Text>
         {suggestedUpgrade && <Dot variant="warning" size="small" />}
-        <NavigationListItem.Icon icon="chevron-right" />
-      </NavigationListItem.Group>
-    </NavigationListItem>
+        <SettingsNavigationListItem.Icon icon="chevron-right" />
+      </SettingsNavigationListItem.Group>
+    </SettingsNavigationListItem>
   );
 }
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 f1280db9c6..d4ee9b0cba 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,21 +1,21 @@
 import { strings } from '../../../../../../shared/constants';
 import { messages } from '../../../../../../shared/gettext';
 import { RoutePath } from '../../../../../../shared/routes';
-import { NavigationListItem } from '../../../../NavigationListItem';
+import { SettingsNavigationListItem } from '../../../../SettingsNavigationListItem';
 import { useIsOn } from './hooks';
 
 export function DaitaListItem() {
   const isOn = useIsOn();
 
   return (
-    <NavigationListItem to={RoutePath.daitaSettings}>
-      <NavigationListItem.Label>{strings.daita}</NavigationListItem.Label>
-      <NavigationListItem.Group>
-        <NavigationListItem.Text>
+    <SettingsNavigationListItem to={RoutePath.daitaSettings}>
+      <SettingsNavigationListItem.Label>{strings.daita}</SettingsNavigationListItem.Label>
+      <SettingsNavigationListItem.Group>
+        <SettingsNavigationListItem.Text>
           {isOn ? messages.gettext('On') : messages.gettext('Off')}
-        </NavigationListItem.Text>
-        <NavigationListItem.Icon icon="chevron-right" />
-      </NavigationListItem.Group>
-    </NavigationListItem>
+        </SettingsNavigationListItem.Text>
+        <SettingsNavigationListItem.Icon icon="chevron-right" />
+      </SettingsNavigationListItem.Group>
+    </SettingsNavigationListItem>
   );
 }
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 60fe84f657..b6698b4d90 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,11 +1,11 @@
 import { RoutePath } from '../../../../../../shared/routes';
-import { NavigationListItem } from '../../../../NavigationListItem';
+import { SettingsNavigationListItem } from '../../../../SettingsNavigationListItem';
 
 export function DebugListItem() {
   return (
-    <NavigationListItem to={RoutePath.debug}>
-      <NavigationListItem.Label>Developer tools</NavigationListItem.Label>
-      <NavigationListItem.Icon icon="chevron-right" />
-    </NavigationListItem>
+    <SettingsNavigationListItem to={RoutePath.debug}>
+      <SettingsNavigationListItem.Label>Developer tools</SettingsNavigationListItem.Label>
+      <SettingsNavigationListItem.Icon icon="chevron-right" />
+    </SettingsNavigationListItem>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/multihop-list-item/MultihopListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/multihop-list-item/MultihopListItem.tsx
index e64996cb78..09bcdb4dfe 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/multihop-list-item/MultihopListItem.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/multihop-list-item/MultihopListItem.tsx
@@ -1,20 +1,23 @@
 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 { SettingsNavigationListItem } from '../../../../SettingsNavigationListItem';
 import { useIsOn } from './hooks';
 
 export function MultihopListItem() {
   const isOn = useIsOn();
 
   return (
-    <NavigationListItem to={RoutePath.multihopSettings}>
-      <ListItem.Label>{messages.pgettext('settings-view', 'Multihop')}</ListItem.Label>
-      <ListItem.Group>
-        <ListItem.Text>{isOn ? messages.gettext('On') : messages.gettext('Off')}</ListItem.Text>
+    <SettingsNavigationListItem to={RoutePath.multihopSettings}>
+      <SettingsNavigationListItem.Label>
+        {messages.pgettext('settings-view', 'Multihop')}
+      </SettingsNavigationListItem.Label>
+      <SettingsNavigationListItem.Group>
+        <SettingsNavigationListItem.Text>
+          {isOn ? messages.gettext('On') : messages.gettext('Off')}
+        </SettingsNavigationListItem.Text>
         <Icon icon="chevron-right" />
-      </ListItem.Group>
-    </NavigationListItem>
+      </SettingsNavigationListItem.Group>
+    </SettingsNavigationListItem>
   );
 }
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 9cf84551e8..14922acedf 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,12 +1,12 @@
 import { strings } from '../../../../../../shared/constants';
 import { RoutePath } from '../../../../../../shared/routes';
-import { NavigationListItem } from '../../../../NavigationListItem';
+import { SettingsNavigationListItem } from '../../../../SettingsNavigationListItem';
 
 export function SplitTunnelingListItem() {
   return (
-    <NavigationListItem to={RoutePath.splitTunneling}>
-      <NavigationListItem.Label>{strings.splitTunneling}</NavigationListItem.Label>
-      <NavigationListItem.Icon icon="chevron-right" />
-    </NavigationListItem>
+    <SettingsNavigationListItem to={RoutePath.splitTunneling}>
+      <SettingsNavigationListItem.Label>{strings.splitTunneling}</SettingsNavigationListItem.Label>
+      <SettingsNavigationListItem.Icon icon="chevron-right" />
+    </SettingsNavigationListItem>
   );
 }
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 7157052a92..c44171dcb0 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,17 +1,17 @@
 import { messages } from '../../../../../../shared/gettext';
 import { RoutePath } from '../../../../../../shared/routes';
-import { NavigationListItem } from '../../../../NavigationListItem';
+import { SettingsNavigationListItem } from '../../../../SettingsNavigationListItem';
 
 export function SupportListItem() {
   return (
-    <NavigationListItem to={RoutePath.support}>
-      <NavigationListItem.Label>
+    <SettingsNavigationListItem to={RoutePath.support}>
+      <SettingsNavigationListItem.Label>
         {
           // TRANSLATORS: Navigation button to the 'Support' view
           messages.pgettext('settings-view', 'Support')
         }
-      </NavigationListItem.Label>
-      <NavigationListItem.Icon icon="chevron-right" />
-    </NavigationListItem>
+      </SettingsNavigationListItem.Label>
+      <SettingsNavigationListItem.Icon icon="chevron-right" />
+    </SettingsNavigationListItem>
   );
 }
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 a93de63563..ba5582864e 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,17 +1,17 @@
 import { messages } from '../../../../../../shared/gettext';
 import { RoutePath } from '../../../../../../shared/routes';
-import { NavigationListItem } from '../../../../NavigationListItem';
+import { SettingsNavigationListItem } from '../../../../SettingsNavigationListItem';
 
 export function UserInterfaceSettingsListItem() {
   return (
-    <NavigationListItem to={RoutePath.userInterfaceSettings}>
-      <NavigationListItem.Label>
+    <SettingsNavigationListItem to={RoutePath.userInterfaceSettings}>
+      <SettingsNavigationListItem.Label>
         {
           // TRANSLATORS: Navigation button to the 'User interface settings' view
           messages.pgettext('settings-view', 'User interface settings')
         }
-      </NavigationListItem.Label>
-      <NavigationListItem.Icon icon="chevron-right" />
-    </NavigationListItem>
+      </SettingsNavigationListItem.Label>
+      <SettingsNavigationListItem.Icon icon="chevron-right" />
+    </SettingsNavigationListItem>
   );
 }
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 e5b3f89bd6..aae576f728 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,17 +1,17 @@
 import { messages } from '../../../../../../shared/gettext';
 import { RoutePath } from '../../../../../../shared/routes';
-import { NavigationListItem } from '../../../../NavigationListItem';
+import { SettingsNavigationListItem } from '../../../../SettingsNavigationListItem';
 
 export function VpnSettingsListItem() {
   return (
-    <NavigationListItem to={RoutePath.vpnSettings}>
-      <NavigationListItem.Label>
+    <SettingsNavigationListItem to={RoutePath.vpnSettings}>
+      <SettingsNavigationListItem.Label>
         {
           // TRANSLATORS: Navigation button to the 'VPN settings' view
           messages.pgettext('settings-view', 'VPN settings')
         }
-      </NavigationListItem.Label>
-      <NavigationListItem.Icon icon="chevron-right" />
-    </NavigationListItem>
+      </SettingsNavigationListItem.Label>
+      <SettingsNavigationListItem.Icon icon="chevron-right" />
+    </SettingsNavigationListItem>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/ip-override-settings/IpOverrideSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/ip-override-settings/IpOverrideSettings.tsx
index 428284c28a..b884cb3f3e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/ip-override-settings/IpOverrideSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/ip-override-settings/IpOverrideSettings.tsx
@@ -1,14 +1,14 @@
 import { messages } from '../../../../../../shared/gettext';
 import { RoutePath } from '../../../../../../shared/routes';
-import { NavigationListItem } from '../../../../NavigationListItem';
+import { SettingsNavigationListItem } from '../../../../SettingsNavigationListItem';
 
 export function IpOverrideSettings() {
   return (
-    <NavigationListItem to={RoutePath.settingsImport}>
-      <NavigationListItem.Label>
+    <SettingsNavigationListItem to={RoutePath.settingsImport}>
+      <SettingsNavigationListItem.Label>
         {messages.pgettext('vpn-settings-view', 'Server IP override')}
-      </NavigationListItem.Label>
-      <NavigationListItem.Icon icon="chevron-right" />
-    </NavigationListItem>
+      </SettingsNavigationListItem.Label>
+      <SettingsNavigationListItem.Icon icon="chevron-right" />
+    </SettingsNavigationListItem>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/open-vpn-settings/OpenVpnSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/open-vpn-settings/OpenVpnSettings.tsx
index 3b5a35af72..41f6d26e45 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/open-vpn-settings/OpenVpnSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/open-vpn-settings/OpenVpnSettings.tsx
@@ -4,21 +4,23 @@ import { strings } from '../../../../../../shared/constants';
 import { messages } from '../../../../../../shared/gettext';
 import { RoutePath } from '../../../../../../shared/routes';
 import { useTunnelProtocol } from '../../../../../lib/relay-settings-hooks';
-import { NavigationListItem } from '../../../../NavigationListItem';
+import { SettingsNavigationListItem } from '../../../../SettingsNavigationListItem';
 
 export function OpenVpnSettings() {
   const tunnelProtocol = useTunnelProtocol();
 
   return (
-    <NavigationListItem to={RoutePath.openVpnSettings} disabled={tunnelProtocol === 'wireguard'}>
-      <NavigationListItem.Label>
+    <SettingsNavigationListItem
+      to={RoutePath.openVpnSettings}
+      disabled={tunnelProtocol === 'wireguard'}>
+      <SettingsNavigationListItem.Label>
         {sprintf(
           // TRANSLATORS: %(openvpn)s will be replaced with the string "OpenVPN"
           messages.pgettext('vpn-settings-view', '%(openvpn)s settings'),
           { openvpn: strings.openvpn },
         )}
-      </NavigationListItem.Label>
-      <NavigationListItem.Icon icon="chevron-right" />
-    </NavigationListItem>
+      </SettingsNavigationListItem.Label>
+      <SettingsNavigationListItem.Icon icon="chevron-right" />
+    </SettingsNavigationListItem>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/wireguard-settings/WireguardSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/wireguard-settings/WireguardSettings.tsx
index 9c8f853e6a..12d81bcfbb 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/wireguard-settings/WireguardSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/wireguard-settings/WireguardSettings.tsx
@@ -5,7 +5,7 @@ import { messages } from '../../../../../../shared/gettext';
 import { RoutePath } from '../../../../../../shared/routes';
 import { RelaySettingsRedux } from '../../../../../redux/settings/reducers';
 import { useSelector } from '../../../../../redux/store';
-import { NavigationListItem } from '../../../../NavigationListItem';
+import { SettingsNavigationListItem } from '../../../../SettingsNavigationListItem';
 
 function mapRelaySettingsToProtocol(relaySettings: RelaySettingsRedux) {
   if ('normal' in relaySettings) {
@@ -26,15 +26,17 @@ export function WireguardSettings() {
   );
 
   return (
-    <NavigationListItem to={RoutePath.wireguardSettings} disabled={tunnelProtocol === 'openvpn'}>
-      <NavigationListItem.Label>
+    <SettingsNavigationListItem
+      to={RoutePath.wireguardSettings}
+      disabled={tunnelProtocol === 'openvpn'}>
+      <SettingsNavigationListItem.Label>
         {sprintf(
           // TRANSLATORS: %(wireguard)s will be replaced with the string "WireGuard"
           messages.pgettext('vpn-settings-view', '%(wireguard)s settings'),
           { wireguard: strings.wireguard },
         )}
-      </NavigationListItem.Label>
-      <NavigationListItem.Icon icon="chevron-right" />
-    </NavigationListItem>
+      </SettingsNavigationListItem.Label>
+      <SettingsNavigationListItem.Icon icon="chevron-right" />
+    </SettingsNavigationListItem>
   );
 }