Add and use SettingsListItem throughout app

23 files changed, 120 insertions, 136 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/NavigationListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/NavigationListItem.tsx
index 289a71d2a1..6db51d0276 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/NavigationListItem.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/NavigationListItem.tsx
@@ -1,33 +1,33 @@
 import React from 'react';
 
 import { RoutePath } from '../../shared/routes';
-import { ListItem, ListItemProps } from '../lib/components/list-item';
 import { useHistory } from '../lib/history';
+import { SettingsListItem, SettingsListItemProps } from './settings-list-item';
 
-export type NavigationListItemProps = ListItemProps & {
+export type NavigationListItemProps = {
   to: RoutePath;
-};
+} & SettingsListItemProps;
 
 function NavigationListItem({ to, children, ...props }: NavigationListItemProps) {
   const history = useHistory();
   const navigate = React.useCallback(() => history.push(to), [history, to]);
 
   return (
-    <ListItem {...props}>
-      <ListItem.Trigger onClick={navigate}>
-        <ListItem.Item>
-          <ListItem.Content>{children}</ListItem.Content>
-        </ListItem.Item>
-      </ListItem.Trigger>
-    </ListItem>
+    <SettingsListItem {...props}>
+      <SettingsListItem.Trigger onClick={navigate}>
+        <SettingsListItem.Item>
+          <SettingsListItem.Content>{children}</SettingsListItem.Content>
+        </SettingsListItem.Item>
+      </SettingsListItem.Trigger>
+    </SettingsListItem>
   );
 }
 const NavigationListItemNamespace = Object.assign(NavigationListItem, {
-  Label: ListItem.Label,
-  Group: ListItem.Group,
-  Text: ListItem.Text,
-  Footer: ListItem.Footer,
-  Icon: ListItem.Icon,
+  Label: SettingsListItem.Label,
+  Group: SettingsListItem.Group,
+  Text: SettingsListItem.Text,
+  Footer: SettingsListItem.Footer,
+  Icon: SettingsListItem.Icon,
 });
 
 export { NavigationListItemNamespace as NavigationListItem };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-list-item/SettingsListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/settings-list-item/SettingsListItem.tsx
new file mode 100644
index 0000000000..268f56c9b6
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-list-item/SettingsListItem.tsx
@@ -0,0 +1,27 @@
+import { ScrollToAnchorId } from '../../../shared/ipc-types';
+import { useScrollToListItem } from '../../hooks';
+import { ListItem, ListItemProps } from '../../lib/components/list-item';
+
+export type SettingsListItemProps = ListItemProps & {
+  anchorId?: ScrollToAnchorId;
+};
+
+function SettingsListItem({ anchorId, ...props }: SettingsListItemProps) {
+  const { ref, animation } = useScrollToListItem(anchorId);
+
+  return <ListItem ref={ref} animation={animation} {...props} />;
+}
+
+const SettingsListItemNamespace = Object.assign(SettingsListItem, {
+  Content: ListItem.Content,
+  Label: ListItem.Label,
+  Group: ListItem.Group,
+  Text: ListItem.Text,
+  Trigger: ListItem.Trigger,
+  Item: ListItem.Item,
+  Footer: ListItem.Footer,
+  Icon: ListItem.Icon,
+  TextField: ListItem.TextField,
+});
+
+export { SettingsListItemNamespace as SettingsListItem };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-list-item/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/settings-list-item/index.ts
new file mode 100644
index 0000000000..ccf785cfeb
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-list-item/index.ts
@@ -0,0 +1 @@
+export * from './SettingsListItem';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/toggle-list-item/ToggleListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/toggle-list-item/ToggleListItem.tsx
index e025d94d84..d31a526256 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/toggle-list-item/ToggleListItem.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/toggle-list-item/ToggleListItem.tsx
@@ -1,13 +1,12 @@
-import { ListItem, ListItemProps } from '../../lib/components/list-item';
-import { ListItemItemProps } from '../../lib/components/list-item/components';
 import { Switch, SwitchProps } from '../../lib/components/switch';
+import { SettingsListItem, SettingsListItemProps } from '../settings-list-item';
 import { ToggleListItemLabel, ToggleListItemSwitch } from './components';
 
-export type ToggleListItemProps = ListItemProps & {
+export type ToggleListItemProps = {
   footer?: string;
   checked?: SwitchProps['checked'];
   onCheckedChange?: SwitchProps['onCheckedChange'];
-} & Pick<ListItemItemProps, 'ref'>;
+} & SettingsListItemProps;
 
 function ToggleListItem({
   ref,
@@ -19,27 +18,27 @@ function ToggleListItem({
   ...props
 }: ToggleListItemProps) {
   return (
-    <ListItem disabled={disabled} {...props}>
-      <ListItem.Item ref={ref}>
-        <ListItem.Content>
+    <SettingsListItem disabled={disabled} {...props}>
+      <SettingsListItem.Item>
+        <SettingsListItem.Content>
           <Switch checked={checked} onCheckedChange={onCheckedChange} disabled={disabled}>
             {children}
           </Switch>
-        </ListItem.Content>
-      </ListItem.Item>
+        </SettingsListItem.Content>
+      </SettingsListItem.Item>
       {footer && (
-        <ListItem.Footer>
-          <ListItem.Text>{footer}</ListItem.Text>
-        </ListItem.Footer>
+        <SettingsListItem.Footer>
+          <SettingsListItem.Text>{footer}</SettingsListItem.Text>
+        </SettingsListItem.Footer>
       )}
-    </ListItem>
+    </SettingsListItem>
   );
 }
 const ToggleListItemNamespace = Object.assign(ToggleListItem, {
   Label: ToggleListItemLabel,
-  Text: ListItem.Text,
-  Group: ListItem.Group,
-  Footer: ListItem.Footer,
+  Text: SettingsListItem.Text,
+  Group: SettingsListItem.Group,
+  Footer: SettingsListItem.Footer,
   Switch: ToggleListItemSwitch,
 });
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/DaitaSettingsView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/DaitaSettingsView.tsx
index b5362c21cb..53c0d27c81 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/DaitaSettingsView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/DaitaSettingsView.tsx
@@ -5,7 +5,6 @@ import styled from 'styled-components';
 import { strings } from '../../../../shared/constants';
 import { messages } from '../../../../shared/gettext';
 import { useAppContext } from '../../../context';
-import { useScrollToListItem } from '../../../hooks';
 import { Button, Flex, Icon, Text } from '../../../lib/components';
 import { useHistory } from '../../../lib/history';
 import { useBoolean } from '../../../lib/utility-hooks';
@@ -166,9 +165,6 @@ function DaitaToggle() {
   const daita = useSelector((state) => state.settings.wireguard.daita?.enabled ?? false);
   const directOnly = useSelector((state) => state.settings.wireguard.daita?.directOnly ?? false);
 
-  const { ref, animation: enableAnimation } = useScrollToListItem('daita-enable-setting');
-  const { animation: directOnlyAnimation } = useScrollToListItem();
-
   const [confirmationDialogVisible, showConfirmationDialog, hideConfirmationDialog] = useBoolean();
 
   const unavailable =
@@ -202,19 +198,17 @@ function DaitaToggle() {
   return (
     <>
       <ToggleListItem
-        ref={ref}
+        anchorId="daita-enable-setting"
         disabled={unavailable}
         checked={daita && !unavailable}
-        onCheckedChange={setDaita}
-        animation={enableAnimation}>
+        onCheckedChange={setDaita}>
         <ToggleListItem.Label>{messages.gettext('Enable')}</ToggleListItem.Label>
         <ToggleListItem.Switch />
       </ToggleListItem>
       <ToggleListItem
         disabled={!daita || unavailable}
         checked={directOnly && !unavailable}
-        onCheckedChange={setDirectOnly}
-        animation={directOnlyAnimation}>
+        onCheckedChange={setDirectOnly}>
         <ToggleListItem.Label>{directOnlyString}</ToggleListItem.Label>
         <ToggleListItem.Group>
           <InfoButton>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/components/multihop-setting/MultihopSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/components/multihop-setting/MultihopSetting.tsx
index 2716bbe05b..9174afa8ed 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/components/multihop-setting/MultihopSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/components/multihop-setting/MultihopSetting.tsx
@@ -4,7 +4,6 @@ import { sprintf } from 'sprintf-js';
 import { strings } from '../../../../../../shared/constants';
 import { messages } from '../../../../../../shared/gettext';
 import log from '../../../../../../shared/logging';
-import { useScrollToListItem } from '../../../../../hooks';
 import { useRelaySettingsUpdater } from '../../../../../lib/constraint-updater';
 import { useSelector } from '../../../../../redux/store';
 import { AriaDescription } from '../../../../AriaGroup';
@@ -15,8 +14,6 @@ export function MultihopSetting() {
   const relaySettings = useSelector((state) => state.settings.relaySettings);
   const relaySettingsUpdater = useRelaySettingsUpdater();
 
-  const { ref, animation } = useScrollToListItem('multihop-setting');
-
   const multihop = 'normal' in relaySettings ? relaySettings.normal.wireguard.useMultihop : false;
   const unavailable =
     'normal' in relaySettings ? relaySettings.normal.tunnelProtocol === 'openvpn' : true;
@@ -39,8 +36,7 @@ export function MultihopSetting() {
   return (
     <>
       <ToggleListItem
-        ref={ref}
-        animation={animation}
+        anchorId="multihop-setting"
         disabled={unavailable}
         checked={multihop && !unavailable}
         onCheckedChange={setMultihop}>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/mss-fix-setting/MssFixSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/mss-fix-setting/MssFixSetting.tsx
index 5119933d67..01900b5955 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/mss-fix-setting/MssFixSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/mss-fix-setting/MssFixSetting.tsx
@@ -6,10 +6,9 @@ import { messages } from '../../../../../../shared/gettext';
 import log from '../../../../../../shared/logging';
 import { removeNonNumericCharacters } from '../../../../../../shared/string-helpers';
 import { useAppContext } from '../../../../../context';
-import { useScrollToListItem } from '../../../../../hooks';
-import { ListItem } from '../../../../../lib/components/list-item';
 import { useTextField } from '../../../../../lib/components/text-field';
 import { useSelector } from '../../../../../redux/store';
+import { SettingsListItem } from '../../../../settings-list-item';
 
 const MIN_MSSFIX_VALUE = 1000;
 const MAX_MSSFIX_VALUE = 1450;
@@ -18,8 +17,6 @@ export function MssFixSetting() {
   const { setOpenVpnMssfix: setOpenVpnMssfixImpl } = useAppContext();
   const mssfix = useSelector((state) => state.settings.openVpn.mssfix);
 
-  const { ref, animation } = useScrollToListItem('mss-fix-setting');
-
   const inputRef = React.useRef<HTMLInputElement>(null);
   const labelId = React.useId();
   const descriptionId = React.useId();
@@ -74,14 +71,14 @@ export function MssFixSetting() {
   );
 
   return (
-    <ListItem animation={animation}>
-      <ListItem.Item ref={ref}>
-        <ListItem.Content>
-          <ListItem.Label id={labelId}>
+    <SettingsListItem anchorId="mss-fix-setting">
+      <SettingsListItem.Item>
+        <SettingsListItem.Content>
+          <SettingsListItem.Label id={labelId}>
             {messages.pgettext('openvpn-settings-view', 'Mssfix')}
-          </ListItem.Label>
-          <ListItem.TextField invalid={invalid} onSubmit={handleSubmit}>
-            <ListItem.TextField.Input
+          </SettingsListItem.Label>
+          <SettingsListItem.TextField invalid={invalid} onSubmit={handleSubmit}>
+            <SettingsListItem.TextField.Input
               ref={inputRef}
               value={value}
               placeholder={messages.gettext('Default')}
@@ -92,11 +89,11 @@ export function MssFixSetting() {
               onBlur={handleBlur}
               onChange={handleChange}
             />
-          </ListItem.TextField>
-        </ListItem.Content>
-      </ListItem.Item>
-      <ListItem.Footer>
-        <ListItem.Text id={descriptionId}>
+          </SettingsListItem.TextField>
+        </SettingsListItem.Content>
+      </SettingsListItem.Item>
+      <SettingsListItem.Footer>
+        <SettingsListItem.Text id={descriptionId}>
           {sprintf(
             // TRANSLATORS: The hint displayed below the Mssfix input field.
             // TRANSLATORS: Available placeholders:
@@ -113,9 +110,9 @@ export function MssFixSetting() {
               max: MAX_MSSFIX_VALUE,
             },
           )}
-        </ListItem.Text>
-      </ListItem.Footer>
-    </ListItem>
+        </SettingsListItem.Text>
+      </SettingsListItem.Footer>
+    </SettingsListItem>
   );
 }
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/allow-lan-setting/AllowLanSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/allow-lan-setting/AllowLanSetting.tsx
index d86e8d5352..a8e7b33399 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/allow-lan-setting/AllowLanSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/allow-lan-setting/AllowLanSetting.tsx
@@ -2,7 +2,6 @@ import styled from 'styled-components';
 
 import { messages } from '../../../../../../shared/gettext';
 import { useAppContext } from '../../../../../context';
-import { useScrollToListItem } from '../../../../../hooks';
 import { spacings } from '../../../../../lib/foundations';
 import { useSelector } from '../../../../../redux/store';
 import InfoButton from '../../../../InfoButton';
@@ -17,14 +16,9 @@ const LanIpRanges = styled.ul({
 export function AllowLanSetting() {
   const allowLan = useSelector((state) => state.settings.allowLan);
   const { setAllowLan } = useAppContext();
-  const { ref, animation } = useScrollToListItem('allow-lan-setting');
 
   return (
-    <ToggleListItem
-      ref={ref}
-      animation={animation}
-      checked={allowLan}
-      onCheckedChange={setAllowLan}>
+    <ToggleListItem anchorId="allow-lan-setting" checked={allowLan} onCheckedChange={setAllowLan}>
       <ToggleListItem.Label>
         {messages.pgettext('vpn-settings-view', 'Local network sharing')}
       </ToggleListItem.Label>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/auto-connect-setting/AutoConnectSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/auto-connect-setting/AutoConnectSetting.tsx
index 7c58b09bf2..9832fae94c 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/auto-connect-setting/AutoConnectSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/auto-connect-setting/AutoConnectSetting.tsx
@@ -1,13 +1,11 @@
 import { messages } from '../../../../../../shared/gettext';
 import { useAppContext } from '../../../../../context';
-import { useScrollToListItem } from '../../../../../hooks';
 import { useSelector } from '../../../../../redux/store';
 import { ToggleListItem } from '../../../../toggle-list-item';
 
 export function AutoConnectSetting() {
   const autoConnect = useSelector((state) => state.settings.guiSettings.autoConnect);
   const { setAutoConnect } = useAppContext();
-  const { animation } = useScrollToListItem();
 
   const footer = messages.pgettext(
     'vpn-settings-view',
@@ -15,11 +13,7 @@ export function AutoConnectSetting() {
   );
 
   return (
-    <ToggleListItem
-      animation={animation}
-      checked={autoConnect}
-      onCheckedChange={setAutoConnect}
-      footer={footer}>
+    <ToggleListItem checked={autoConnect} onCheckedChange={setAutoConnect} footer={footer}>
       <ToggleListItem.Label>
         {messages.pgettext('vpn-settings-view', 'Auto-connect')}
       </ToggleListItem.Label>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/auto-start-setting/AutoStartSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/auto-start-setting/AutoStartSetting.tsx
index 388781ba7f..237f10c9dc 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/auto-start-setting/AutoStartSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/auto-start-setting/AutoStartSetting.tsx
@@ -3,14 +3,12 @@ import { useCallback } from 'react';
 import { messages } from '../../../../../../shared/gettext';
 import log from '../../../../../../shared/logging';
 import { useAppContext } from '../../../../../context';
-import { useScrollToListItem } from '../../../../../hooks';
 import { useSelector } from '../../../../../redux/store';
 import { ToggleListItem } from '../../../../toggle-list-item';
 
 export function AutoStartSetting() {
   const autoStart = useSelector((state) => state.settings.autoStart);
   const { setAutoStart: setAutoStartImpl } = useAppContext();
-  const { animation } = useScrollToListItem();
 
   const setAutoStart = useCallback(
     async (autoStart: boolean) => {
@@ -25,7 +23,7 @@ export function AutoStartSetting() {
   );
 
   return (
-    <ToggleListItem animation={animation} checked={autoStart} onCheckedChange={setAutoStart}>
+    <ToggleListItem checked={autoStart} onCheckedChange={setAutoStart}>
       <ToggleListItem.Label>
         {messages.pgettext('vpn-settings-view', 'Launch app on start-up')}
       </ToggleListItem.Label>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/custom-dns-settings/CustomDnsSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/custom-dns-settings/CustomDnsSettings.tsx
index 41d2fd618f..11405cbffa 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/custom-dns-settings/CustomDnsSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/custom-dns-settings/CustomDnsSettings.tsx
@@ -2,7 +2,6 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { messages } from '../../../../../../shared/gettext';
 import { useAppContext } from '../../../../../context';
-import { useScrollToListItem } from '../../../../../hooks';
 import { Button, IconButton } from '../../../../../lib/components';
 import { Accordion } from '../../../../../lib/components/accordion';
 import { formatHtml } from '../../../../../lib/html-formatter';
@@ -36,7 +35,6 @@ export function CustomDnsSettings() {
   const [savingEdit, setSavingEdit] = useState(false);
   const willShowConfirmationDialog = useRef(false);
 
-  const { ref, animation } = useScrollToListItem('custom-dns-settings');
   const descriptionId = React.useId();
 
   const featureAvailable = useMemo(
@@ -191,10 +189,9 @@ export function CustomDnsSettings() {
   return (
     <>
       <ToggleListItem
-        ref={ref}
+        anchorId="custom-dns-settings"
         checked={dns.state === 'custom' || inputVisible}
         onCheckedChange={setCustomDnsEnabled}
-        animation={animation}
         disabled={!featureAvailable}>
         <ToggleListItem.Label>
           {messages.pgettext('vpn-settings-view', 'Use custom DNS server')}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-ads-setting/BlockAdsSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-ads-setting/BlockAdsSetting.tsx
index fdc6e4a611..d5cd44a73e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-ads-setting/BlockAdsSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-ads-setting/BlockAdsSetting.tsx
@@ -9,6 +9,7 @@ export function BlockAdsSetting() {
   return (
     <ToggleListItem
       level={1}
+      animation={undefined}
       disabled={dns.state === 'custom'}
       checked={dns.state === 'default' && dns.defaultOptions.blockAds}
       onCheckedChange={setBlockAds}>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-adult-content-setting/BlockAdultContentSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-adult-content-setting/BlockAdultContentSetting.tsx
index c81b170e61..4d092b9b71 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-adult-content-setting/BlockAdultContentSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-adult-content-setting/BlockAdultContentSetting.tsx
@@ -9,6 +9,7 @@ export function BlockAdultContentSetting() {
   return (
     <ToggleListItem
       level={1}
+      animation={undefined}
       disabled={dns.state === 'custom'}
       checked={dns.state === 'default' && dns.defaultOptions.blockAdultContent}
       onCheckedChange={setBlockAdultContent}>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-gambling-setting/BlockGamblingSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-gambling-setting/BlockGamblingSetting.tsx
index 264f7e7328..31bf40adac 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-gambling-setting/BlockGamblingSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-gambling-setting/BlockGamblingSetting.tsx
@@ -9,6 +9,7 @@ export function BlockGamblingSetting() {
   return (
     <ToggleListItem
       level={1}
+      animation={undefined}
       disabled={dns.state === 'custom'}
       checked={dns.state === 'default' && dns.defaultOptions.blockGambling}
       onCheckedChange={setBlockGambling}>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-malware-setting/BlockMalwareSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-malware-setting/BlockMalwareSetting.tsx
index 65042df5c6..d25e17a0f2 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-malware-setting/BlockMalwareSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-malware-setting/BlockMalwareSetting.tsx
@@ -11,6 +11,7 @@ export function BlockMalwareSetting() {
   return (
     <ToggleListItem
       level={1}
+      animation={undefined}
       disabled={dns.state === 'custom'}
       checked={dns.state === 'default' && dns.defaultOptions.blockMalware}
       onCheckedChange={setBlockMalware}>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-social-media-setting/BlockSocialMediaSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-social-media-setting/BlockSocialMediaSetting.tsx
index 9684ba5f2f..d4017eb64a 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-social-media-setting/BlockSocialMediaSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-social-media-setting/BlockSocialMediaSetting.tsx
@@ -9,6 +9,7 @@ export function BlockSocialMediaSetting() {
   return (
     <ToggleListItem
       level={1}
+      animation={undefined}
       disabled={dns.state === 'custom'}
       checked={dns.state === 'default' && dns.defaultOptions.blockSocialMedia}
       onCheckedChange={setBlockSocialMedia}>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-trackers-setting/BlockTrackersSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-trackers-setting/BlockTrackersSetting.tsx
index 055c4df78a..ba09ea71e3 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-trackers-setting/BlockTrackersSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/components/block-trackers-setting/BlockTrackersSetting.tsx
@@ -9,6 +9,7 @@ export function BlockTrackersSetting() {
   return (
     <ToggleListItem
       level={1}
+      animation={undefined}
       disabled={dns.state === 'custom'}
       checked={dns.state === 'default' && dns.defaultOptions.blockTrackers}
       onCheckedChange={setBlockTrackers}>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/enable-ipv6-setting/EnableIpv6Setting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/enable-ipv6-setting/EnableIpv6Setting.tsx
index 34c4362926..52600635e3 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/enable-ipv6-setting/EnableIpv6Setting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/enable-ipv6-setting/EnableIpv6Setting.tsx
@@ -3,7 +3,6 @@ import { useCallback } from 'react';
 import { messages } from '../../../../../../shared/gettext';
 import log from '../../../../../../shared/logging';
 import { useAppContext } from '../../../../../context';
-import { useScrollToListItem } from '../../../../../hooks';
 import { useSelector } from '../../../../../redux/store';
 import InfoButton from '../../../../InfoButton';
 import { ModalMessage } from '../../../../Modal';
@@ -12,7 +11,6 @@ import { ToggleListItem } from '../../../../toggle-list-item';
 export function EnableIpv6Setting() {
   const enableIpv6 = useSelector((state) => state.settings.enableIpv6);
   const { setEnableIpv6: setEnableIpv6Impl } = useAppContext();
-  const { animation } = useScrollToListItem();
 
   const setEnableIpv6 = useCallback(
     async (enableIpv6: boolean) => {
@@ -27,7 +25,7 @@ export function EnableIpv6Setting() {
   );
 
   return (
-    <ToggleListItem animation={animation} checked={enableIpv6} onCheckedChange={setEnableIpv6}>
+    <ToggleListItem checked={enableIpv6} onCheckedChange={setEnableIpv6}>
       <ToggleListItem.Label>
         {messages.pgettext('vpn-settings-view', 'Enable IPv6')}
       </ToggleListItem.Label>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/kill-switch-setting/KillSwitchSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/kill-switch-setting/KillSwitchSetting.tsx
index f8596643ca..0f4f2ceed2 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/kill-switch-setting/KillSwitchSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/kill-switch-setting/KillSwitchSetting.tsx
@@ -1,19 +1,18 @@
 import { messages } from '../../../../../../shared/gettext';
-import { useScrollToListItem } from '../../../../../hooks';
-import { ListItem } from '../../../../../lib/components/list-item';
 import { Switch } from '../../../../../lib/components/switch';
 import InfoButton from '../../../../InfoButton';
 import { ModalMessage } from '../../../../Modal';
+import { SettingsListItem } from '../../../../settings-list-item';
 
 export function KillSwitchSetting() {
-  const { animation } = useScrollToListItem();
-
   return (
-    <ListItem animation={animation}>
-      <ListItem.Item>
-        <ListItem.Content>
-          <ListItem.Label>{messages.pgettext('vpn-settings-view', 'Kill switch')}</ListItem.Label>
-          <ListItem.Group $gap="medium">
+    <SettingsListItem>
+      <SettingsListItem.Item>
+        <SettingsListItem.Content>
+          <SettingsListItem.Label>
+            {messages.pgettext('vpn-settings-view', 'Kill switch')}
+          </SettingsListItem.Label>
+          <SettingsListItem.Group $gap="medium">
             <InfoButton>
               <ModalMessage>
                 {messages.pgettext(
@@ -31,9 +30,9 @@ export function KillSwitchSetting() {
             <Switch checked disabled>
               <Switch.Thumb />
             </Switch>
-          </ListItem.Group>
-        </ListItem.Content>
-      </ListItem.Item>
-    </ListItem>
+          </SettingsListItem.Group>
+        </SettingsListItem.Content>
+      </SettingsListItem.Item>
+    </SettingsListItem>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/lockdown-mode-setting/LockdownModeSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/lockdown-mode-setting/LockdownModeSetting.tsx
index 5115dc9964..d19bed5325 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/lockdown-mode-setting/LockdownModeSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/lockdown-mode-setting/LockdownModeSetting.tsx
@@ -3,7 +3,6 @@ import { useCallback } from 'react';
 import { messages } from '../../../../../../shared/gettext';
 import log from '../../../../../../shared/logging';
 import { useAppContext } from '../../../../../context';
-import { useScrollToListItem } from '../../../../../hooks';
 import { Button } from '../../../../../lib/components';
 import { useBoolean } from '../../../../../lib/utility-hooks';
 import { useSelector } from '../../../../../redux/store';
@@ -14,7 +13,6 @@ import { ToggleListItem } from '../../../../toggle-list-item';
 export function LockdownModeSetting() {
   const blockWhenDisconnected = useSelector((state) => state.settings.blockWhenDisconnected);
   const { setBlockWhenDisconnected: setBlockWhenDisconnectedImpl } = useAppContext();
-  const { ref, animation } = useScrollToListItem('lockdown-mode-setting');
 
   const [confirmationDialogVisible, showConfirmationDialog, hideConfirmationDialog] =
     useBoolean(false);
@@ -49,8 +47,7 @@ export function LockdownModeSetting() {
 
   return (
     <ToggleListItem
-      ref={ref}
-      animation={animation}
+      anchorId="lockdown-mode-setting"
       checked={blockWhenDisconnected}
       onCheckedChange={setLockDownMode}>
       <ToggleListItem.Label>
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 d7acc15fcf..3b5a35af72 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
@@ -3,19 +3,14 @@ import { sprintf } from 'sprintf-js';
 import { strings } from '../../../../../../shared/constants';
 import { messages } from '../../../../../../shared/gettext';
 import { RoutePath } from '../../../../../../shared/routes';
-import { useScrollToListItem } from '../../../../../hooks';
 import { useTunnelProtocol } from '../../../../../lib/relay-settings-hooks';
 import { NavigationListItem } from '../../../../NavigationListItem';
 
 export function OpenVpnSettings() {
   const tunnelProtocol = useTunnelProtocol();
-  const { animation } = useScrollToListItem();
 
   return (
-    <NavigationListItem
-      to={RoutePath.openVpnSettings}
-      disabled={tunnelProtocol === 'wireguard'}
-      animation={animation}>
+    <NavigationListItem to={RoutePath.openVpnSettings} disabled={tunnelProtocol === 'wireguard'}>
       <NavigationListItem.Label>
         {sprintf(
           // TRANSLATORS: %(openvpn)s will be replaced with the string "OpenVPN"
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 82efa3410e..9c8f853e6a 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
@@ -3,7 +3,6 @@ import { sprintf } from 'sprintf-js';
 import { strings } from '../../../../../../shared/constants';
 import { messages } from '../../../../../../shared/gettext';
 import { RoutePath } from '../../../../../../shared/routes';
-import { useScrollToListItem } from '../../../../../hooks';
 import { RelaySettingsRedux } from '../../../../../redux/settings/reducers';
 import { useSelector } from '../../../../../redux/store';
 import { NavigationListItem } from '../../../../NavigationListItem';
@@ -22,16 +21,12 @@ function mapRelaySettingsToProtocol(relaySettings: RelaySettingsRedux) {
 }
 
 export function WireguardSettings() {
-  const { animation } = useScrollToListItem();
   const tunnelProtocol = useSelector((state) =>
     mapRelaySettingsToProtocol(state.settings.relaySettings),
   );
 
   return (
-    <NavigationListItem
-      to={RoutePath.wireguardSettings}
-      disabled={tunnelProtocol === 'openvpn'}
-      animation={animation}>
+    <NavigationListItem to={RoutePath.wireguardSettings} disabled={tunnelProtocol === 'openvpn'}>
       <NavigationListItem.Label>
         {sprintf(
           // TRANSLATORS: %(wireguard)s will be replaced with the string "WireGuard"
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/mtu-setting/MtuSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/mtu-setting/MtuSetting.tsx
index a432351834..d1fd17e81b 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/mtu-setting/MtuSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/mtu-setting/MtuSetting.tsx
@@ -6,10 +6,9 @@ import { messages } from '../../../../../../shared/gettext';
 import log from '../../../../../../shared/logging';
 import { removeNonNumericCharacters } from '../../../../../../shared/string-helpers';
 import { useAppContext } from '../../../../../context';
-import { useScrollToListItem } from '../../../../../hooks';
-import { ListItem } from '../../../../../lib/components/list-item';
 import { useTextField } from '../../../../../lib/components/text-field';
 import { useSelector } from '../../../../../redux/store';
+import { SettingsListItem } from '../../../../settings-list-item';
 
 const MIN_WIREGUARD_MTU_VALUE = 1280;
 const MAX_WIREGUARD_MTU_VALUE = 1420;
@@ -26,8 +25,6 @@ export function MtuSetting() {
   const { setWireguardMtu: setWireguardMtuImpl } = useAppContext();
   const mtu = useSelector((state) => state.settings.wireguard.mtu);
 
-  const { ref, animation } = useScrollToListItem('mtu-setting');
-
   const inputRef = React.useRef<HTMLInputElement>(null);
   const labelId = React.useId();
   const descriptionId = React.useId();
@@ -82,19 +79,19 @@ export function MtuSetting() {
   );
 
   return (
-    <ListItem animation={animation}>
-      <ListItem.Item ref={ref}>
-        <ListItem.Content>
-          <ListItem.Label id={labelId}>
+    <SettingsListItem anchorId="mtu-setting">
+      <SettingsListItem.Item>
+        <SettingsListItem.Content>
+          <SettingsListItem.Label id={labelId}>
             {
               // TRANSLATORS: The title for the WireGuard MTU setting. MTU stands for Maximum
               // TRANSLATORS: Transmission Unit and controls the maximum size of packets sent over
               // TRANSLATORS: the VPN tunnel.
               messages.pgettext('wireguard-settings-view', 'MTU')
             }
-          </ListItem.Label>
-          <ListItem.TextField invalid={invalid} onSubmit={handleSubmit}>
-            <ListItem.TextField.Input
+          </SettingsListItem.Label>
+          <SettingsListItem.TextField invalid={invalid} onSubmit={handleSubmit}>
+            <SettingsListItem.TextField.Input
               ref={inputRef}
               value={value}
               placeholder={messages.gettext('Default')}
@@ -105,11 +102,11 @@ export function MtuSetting() {
               onBlur={handleBlur}
               onChange={handleChange}
             />
-          </ListItem.TextField>
-        </ListItem.Content>
-      </ListItem.Item>
-      <ListItem.Footer>
-        <ListItem.Text id={descriptionId}>
+          </SettingsListItem.TextField>
+        </SettingsListItem.Content>
+      </SettingsListItem.Item>
+      <SettingsListItem.Footer>
+        <SettingsListItem.Text id={descriptionId}>
           {sprintf(
             // TRANSLATORS: The hint displayed below the WireGuard MTU input field.
             // TRANSLATORS: Available placeholders:
@@ -126,8 +123,8 @@ export function MtuSetting() {
               max: MAX_WIREGUARD_MTU_VALUE,
             },
           )}
-        </ListItem.Text>
-      </ListItem.Footer>
-    </ListItem>
+        </SettingsListItem.Text>
+      </SettingsListItem.Footer>
+    </SettingsListItem>
   );
 }