Rename ToggleListItem to SettingsToggleListItem

26 files changed, 133 insertions, 130 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/toggle-list-item/ToggleListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/SettingsToggleListItem.tsx
index d31a526256..24f2f85930 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/toggle-list-item/ToggleListItem.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/SettingsToggleListItem.tsx
@@ -1,14 +1,14 @@
 import { Switch, SwitchProps } from '../../lib/components/switch';
 import { SettingsListItem, SettingsListItemProps } from '../settings-list-item';
-import { ToggleListItemLabel, ToggleListItemSwitch } from './components';
+import { SettingsToggleListItemLabel, SettingsToggleListItemSwitch } from './components';
 
-export type ToggleListItemProps = {
+export type SettingsToggleListItemProps = {
   footer?: string;
   checked?: SwitchProps['checked'];
   onCheckedChange?: SwitchProps['onCheckedChange'];
 } & SettingsListItemProps;
 
-function ToggleListItem({
+function SettingsToggleListItem({
   ref,
   children,
   footer,
@@ -16,7 +16,7 @@ function ToggleListItem({
   onCheckedChange,
   disabled,
   ...props
-}: ToggleListItemProps) {
+}: SettingsToggleListItemProps) {
   return (
     <SettingsListItem disabled={disabled} {...props}>
       <SettingsListItem.Item>
@@ -34,12 +34,12 @@ function ToggleListItem({
     </SettingsListItem>
   );
 }
-const ToggleListItemNamespace = Object.assign(ToggleListItem, {
-  Label: ToggleListItemLabel,
+const SettingsToggleListItemNamespace = Object.assign(SettingsToggleListItem, {
+  Label: SettingsToggleListItemLabel,
   Text: SettingsListItem.Text,
   Group: SettingsListItem.Group,
   Footer: SettingsListItem.Footer,
-  Switch: ToggleListItemSwitch,
+  Switch: SettingsToggleListItemSwitch,
 });
 
-export { ToggleListItemNamespace as ToggleListItem };
+export { SettingsToggleListItemNamespace as SettingsToggleListItem };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/components/index.ts
new file mode 100644
index 0000000000..6113b135df
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/components/index.ts
@@ -0,0 +1,2 @@
+export * from './settings-toggle-list-item-label';
+export * from './settings-toggle-list-item-switch';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/toggle-list-item/components/toggle-list-item-label/ToggleListItemLabel.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/components/settings-toggle-list-item-label/SettingsToggleListItemLabel.tsx
index d71b2248c7..c11a9d658b 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/toggle-list-item/components/toggle-list-item-label/ToggleListItemLabel.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/components/settings-toggle-list-item-label/SettingsToggleListItemLabel.tsx
@@ -1,8 +1,8 @@
 import { Switch } from '../../../../lib/components/switch';
 import { SwitchLabelProps } from '../../../../lib/components/switch/components/switch-label';
 
-export type ToggleListItemLabelProps = SwitchLabelProps;
+export type SettingsToggleListItemLabelProps = SwitchLabelProps;
 
-export function ToggleListItemLabel(props: ToggleListItemLabelProps) {
+export function SettingsToggleListItemLabel(props: SettingsToggleListItemLabelProps) {
   return <Switch.Label variant="titleMedium" {...props} />;
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/components/settings-toggle-list-item-label/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/components/settings-toggle-list-item-label/index.ts
new file mode 100644
index 0000000000..cd68db8771
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/components/settings-toggle-list-item-label/index.ts
@@ -0,0 +1 @@
+export * from './SettingsToggleListItemLabel';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/components/settings-toggle-list-item-switch/SettingsToggleListItemSwitch.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/components/settings-toggle-list-item-switch/SettingsToggleListItemSwitch.tsx
new file mode 100644
index 0000000000..f68e4d9e8f
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/components/settings-toggle-list-item-switch/SettingsToggleListItemSwitch.tsx
@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+import { Switch } from '../../../../lib/components/switch';
+import { SwitchTriggerProps } from '../../../../lib/components/switch/components';
+import { spacings } from '../../../../lib/foundations';
+
+export type SettingsToggleListItemSwitchProps = SwitchTriggerProps;
+
+export const StyledSettingsToggleListItemSwitch = styled(Switch.Trigger)`
+  margin-left: ${spacings.small};
+`;
+
+export function SettingsToggleListItemSwitch(props: SettingsToggleListItemSwitchProps) {
+  return (
+    <StyledSettingsToggleListItemSwitch {...props}>
+      <Switch.Thumb />
+    </StyledSettingsToggleListItemSwitch>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/components/settings-toggle-list-item-switch/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/components/settings-toggle-list-item-switch/index.ts
new file mode 100644
index 0000000000..fc58780050
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/components/settings-toggle-list-item-switch/index.ts
@@ -0,0 +1 @@
+export * from './SettingsToggleListItemSwitch';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/index.ts
new file mode 100644
index 0000000000..34380a2ff8
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-toggle-list-item/index.ts
@@ -0,0 +1 @@
+export * from './SettingsToggleListItem';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/toggle-list-item/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/toggle-list-item/components/index.ts
deleted file mode 100644
index 654c53c6f8..0000000000
--- a/desktop/packages/mullvad-vpn/src/renderer/components/toggle-list-item/components/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './toggle-list-item-label';
-export * from './toggle-list-item-switch';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/toggle-list-item/components/toggle-list-item-label/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/toggle-list-item/components/toggle-list-item-label/index.ts
deleted file mode 100644
index e890bb3e48..0000000000
--- a/desktop/packages/mullvad-vpn/src/renderer/components/toggle-list-item/components/toggle-list-item-label/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ToggleListItemLabel';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/toggle-list-item/components/toggle-list-item-switch/ToggleListItemSwitch.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/toggle-list-item/components/toggle-list-item-switch/ToggleListItemSwitch.tsx
deleted file mode 100644
index f8a1818bd0..0000000000
--- a/desktop/packages/mullvad-vpn/src/renderer/components/toggle-list-item/components/toggle-list-item-switch/ToggleListItemSwitch.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import styled from 'styled-components';
-
-import { Switch } from '../../../../lib/components/switch';
-import { SwitchTriggerProps } from '../../../../lib/components/switch/components';
-import { spacings } from '../../../../lib/foundations';
-
-export type ToggleListItemSwitchProps = SwitchTriggerProps;
-
-export const StyledToggleListItemSwitch = styled(Switch.Trigger)`
-  margin-left: ${spacings.small};
-`;
-
-export function ToggleListItemSwitch(props: ToggleListItemSwitchProps) {
-  return (
-    <StyledToggleListItemSwitch {...props}>
-      <Switch.Thumb />
-    </StyledToggleListItemSwitch>
-  );
-}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/toggle-list-item/components/toggle-list-item-switch/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/toggle-list-item/components/toggle-list-item-switch/index.ts
deleted file mode 100644
index 886a89f279..0000000000
--- a/desktop/packages/mullvad-vpn/src/renderer/components/toggle-list-item/components/toggle-list-item-switch/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ToggleListItemSwitch';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/toggle-list-item/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/toggle-list-item/index.ts
deleted file mode 100644
index 2d21dcfe30..0000000000
--- a/desktop/packages/mullvad-vpn/src/renderer/components/toggle-list-item/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ToggleListItem';
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 53c0d27c81..fa25bd39a1 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
@@ -18,8 +18,8 @@ import { ModalAlert, ModalAlertType, ModalMessage } from '../../Modal';
 import { NavigationContainer } from '../../NavigationContainer';
 import { NavigationScrollbars } from '../../NavigationScrollbars';
 import PageSlider from '../../PageSlider';
+import { SettingsToggleListItem } from '../../settings-toggle-list-item';
 import SettingsHeader, { HeaderSubTitle, HeaderTitle } from '../../SettingsHeader';
-import { ToggleListItem } from '../../toggle-list-item';
 import { useShowDaitaMultihopInfo } from './hooks';
 
 const StyledHeaderSubTitle = styled(HeaderSubTitle)({
@@ -197,26 +197,26 @@ function DaitaToggle() {
 
   return (
     <>
-      <ToggleListItem
+      <SettingsToggleListItem
         anchorId="daita-enable-setting"
         disabled={unavailable}
         checked={daita && !unavailable}
         onCheckedChange={setDaita}>
-        <ToggleListItem.Label>{messages.gettext('Enable')}</ToggleListItem.Label>
-        <ToggleListItem.Switch />
-      </ToggleListItem>
-      <ToggleListItem
+        <SettingsToggleListItem.Label>{messages.gettext('Enable')}</SettingsToggleListItem.Label>
+        <SettingsToggleListItem.Switch />
+      </SettingsToggleListItem>
+      <SettingsToggleListItem
         disabled={!daita || unavailable}
         checked={directOnly && !unavailable}
         onCheckedChange={setDirectOnly}>
-        <ToggleListItem.Label>{directOnlyString}</ToggleListItem.Label>
-        <ToggleListItem.Group>
+        <SettingsToggleListItem.Label>{directOnlyString}</SettingsToggleListItem.Label>
+        <SettingsToggleListItem.Group>
           <InfoButton>
             <DirectOnlyModalMessage />
           </InfoButton>
-          <ToggleListItem.Switch />
-        </ToggleListItem.Group>
-      </ToggleListItem>
+          <SettingsToggleListItem.Switch />
+        </SettingsToggleListItem.Group>
+      </SettingsToggleListItem>
       {unavailable ? (
         <Cell.CellFooter>
           <Cell.CellFooterText>{featureUnavailableMessage()}</Cell.CellFooterText>
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 9174afa8ed..e9c2e9b0d3 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
@@ -8,7 +8,7 @@ import { useRelaySettingsUpdater } from '../../../../../lib/constraint-updater';
 import { useSelector } from '../../../../../redux/store';
 import { AriaDescription } from '../../../../AriaGroup';
 import * as Cell from '../../../../cell';
-import { ToggleListItem } from '../../../../toggle-list-item';
+import { SettingsToggleListItem } from '../../../../settings-toggle-list-item';
 
 export function MultihopSetting() {
   const relaySettings = useSelector((state) => state.settings.relaySettings);
@@ -35,14 +35,14 @@ export function MultihopSetting() {
 
   return (
     <>
-      <ToggleListItem
+      <SettingsToggleListItem
         anchorId="multihop-setting"
         disabled={unavailable}
         checked={multihop && !unavailable}
         onCheckedChange={setMultihop}>
-        <ToggleListItem.Label>{messages.gettext('Enable')}</ToggleListItem.Label>
-        <ToggleListItem.Switch />
-      </ToggleListItem>
+        <SettingsToggleListItem.Label>{messages.gettext('Enable')}</SettingsToggleListItem.Label>
+        <SettingsToggleListItem.Switch />
+      </SettingsToggleListItem>
       {unavailable ? (
         <Cell.CellFooter>
           <AriaDescription>
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 a8e7b33399..73c36df204 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
@@ -6,7 +6,7 @@ import { spacings } from '../../../../../lib/foundations';
 import { useSelector } from '../../../../../redux/store';
 import InfoButton from '../../../../InfoButton';
 import { ModalMessage } from '../../../../Modal';
-import { ToggleListItem } from '../../../../toggle-list-item';
+import { SettingsToggleListItem } from '../../../../settings-toggle-list-item';
 
 const LanIpRanges = styled.ul({
   listStyle: 'disc outside',
@@ -18,11 +18,14 @@ export function AllowLanSetting() {
   const { setAllowLan } = useAppContext();
 
   return (
-    <ToggleListItem anchorId="allow-lan-setting" checked={allowLan} onCheckedChange={setAllowLan}>
-      <ToggleListItem.Label>
+    <SettingsToggleListItem
+      anchorId="allow-lan-setting"
+      checked={allowLan}
+      onCheckedChange={setAllowLan}>
+      <SettingsToggleListItem.Label>
         {messages.pgettext('vpn-settings-view', 'Local network sharing')}
-      </ToggleListItem.Label>
-      <ToggleListItem.Group>
+      </SettingsToggleListItem.Label>
+      <SettingsToggleListItem.Group>
         <InfoButton>
           <ModalMessage>
             {messages.pgettext(
@@ -45,8 +48,8 @@ export function AllowLanSetting() {
             </LanIpRanges>
           </ModalMessage>
         </InfoButton>
-        <ToggleListItem.Switch />
-      </ToggleListItem.Group>
-    </ToggleListItem>
+        <SettingsToggleListItem.Switch />
+      </SettingsToggleListItem.Group>
+    </SettingsToggleListItem>
   );
 }
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 9832fae94c..3fdc22f36b 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,7 +1,7 @@
 import { messages } from '../../../../../../shared/gettext';
 import { useAppContext } from '../../../../../context';
 import { useSelector } from '../../../../../redux/store';
-import { ToggleListItem } from '../../../../toggle-list-item';
+import { SettingsToggleListItem } from '../../../../settings-toggle-list-item';
 
 export function AutoConnectSetting() {
   const autoConnect = useSelector((state) => state.settings.guiSettings.autoConnect);
@@ -13,11 +13,11 @@ export function AutoConnectSetting() {
   );
 
   return (
-    <ToggleListItem checked={autoConnect} onCheckedChange={setAutoConnect} footer={footer}>
-      <ToggleListItem.Label>
+    <SettingsToggleListItem checked={autoConnect} onCheckedChange={setAutoConnect} footer={footer}>
+      <SettingsToggleListItem.Label>
         {messages.pgettext('vpn-settings-view', 'Auto-connect')}
-      </ToggleListItem.Label>
-      <ToggleListItem.Switch aria-description={footer} />
-    </ToggleListItem>
+      </SettingsToggleListItem.Label>
+      <SettingsToggleListItem.Switch aria-description={footer} />
+    </SettingsToggleListItem>
   );
 }
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 237f10c9dc..7dd96b73d6 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
@@ -4,7 +4,7 @@ import { messages } from '../../../../../../shared/gettext';
 import log from '../../../../../../shared/logging';
 import { useAppContext } from '../../../../../context';
 import { useSelector } from '../../../../../redux/store';
-import { ToggleListItem } from '../../../../toggle-list-item';
+import { SettingsToggleListItem } from '../../../../settings-toggle-list-item';
 
 export function AutoStartSetting() {
   const autoStart = useSelector((state) => state.settings.autoStart);
@@ -23,11 +23,11 @@ export function AutoStartSetting() {
   );
 
   return (
-    <ToggleListItem checked={autoStart} onCheckedChange={setAutoStart}>
-      <ToggleListItem.Label>
+    <SettingsToggleListItem checked={autoStart} onCheckedChange={setAutoStart}>
+      <SettingsToggleListItem.Label>
         {messages.pgettext('vpn-settings-view', 'Launch app on start-up')}
-      </ToggleListItem.Label>
-      <ToggleListItem.Switch />
-    </ToggleListItem>
+      </SettingsToggleListItem.Label>
+      <SettingsToggleListItem.Switch />
+    </SettingsToggleListItem>
   );
 }
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 11405cbffa..dc12364632 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
@@ -12,7 +12,7 @@ import { AriaDescribed, AriaDescription, AriaDescriptionGroup } from '../../../.
 import * as Cell from '../../../../cell';
 import List, { stringValueAsKey } from '../../../../List';
 import { ModalAlert, ModalAlertType } from '../../../../Modal';
-import { ToggleListItem } from '../../../../toggle-list-item';
+import { SettingsToggleListItem } from '../../../../settings-toggle-list-item';
 import {
   AddServerContainer,
   StyledAddCustomDnsLabel,
@@ -188,16 +188,16 @@ export function CustomDnsSettings() {
 
   return (
     <>
-      <ToggleListItem
+      <SettingsToggleListItem
         anchorId="custom-dns-settings"
         checked={dns.state === 'custom' || inputVisible}
         onCheckedChange={setCustomDnsEnabled}
         disabled={!featureAvailable}>
-        <ToggleListItem.Label>
+        <SettingsToggleListItem.Label>
           {messages.pgettext('vpn-settings-view', 'Use custom DNS server')}
-        </ToggleListItem.Label>
-        <ToggleListItem.Switch ref={switchRef} aria-describedby={descriptionId} />
-      </ToggleListItem>
+        </SettingsToggleListItem.Label>
+        <SettingsToggleListItem.Switch ref={switchRef} aria-describedby={descriptionId} />
+      </SettingsToggleListItem>
       <Accordion expanded={listExpanded} disabled={!featureAvailable}>
         <Accordion.Content>
           <Cell.Section role="listbox">
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 d5cd44a73e..df06d6cb19 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
@@ -1,27 +1,27 @@
 import { messages } from '../../../../../../../../shared/gettext';
 import { FlexRow } from '../../../../../../../lib/components/flex-row';
-import { ToggleListItem } from '../../../../../../toggle-list-item';
+import { SettingsToggleListItem } from '../../../../../../settings-toggle-list-item';
 import { useDns } from '../../hooks';
 
 export function BlockAdsSetting() {
   const [dns, setBlockAds] = useDns('blockAds');
 
   return (
-    <ToggleListItem
+    <SettingsToggleListItem
       level={1}
       animation={undefined}
       disabled={dns.state === 'custom'}
       checked={dns.state === 'default' && dns.defaultOptions.blockAds}
       onCheckedChange={setBlockAds}>
       <FlexRow $padding={{ left: 'medium' }}>
-        <ToggleListItem.Label variant="bodySmall">
+        <SettingsToggleListItem.Label variant="bodySmall">
           {
             // TRANSLATORS: Label for settings that enables ad blocking.
             messages.pgettext('vpn-settings-view', 'Ads')
           }
-        </ToggleListItem.Label>
+        </SettingsToggleListItem.Label>
       </FlexRow>
-      <ToggleListItem.Switch />
-    </ToggleListItem>
+      <SettingsToggleListItem.Switch />
+    </SettingsToggleListItem>
   );
 }
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 4d092b9b71..c49f91e10e 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
@@ -1,27 +1,27 @@
 import { messages } from '../../../../../../../../shared/gettext';
 import { FlexRow } from '../../../../../../../lib/components/flex-row';
-import { ToggleListItem } from '../../../../../../toggle-list-item';
+import { SettingsToggleListItem } from '../../../../../../settings-toggle-list-item';
 import { useDns } from '../../hooks';
 
 export function BlockAdultContentSetting() {
   const [dns, setBlockAdultContent] = useDns('blockAdultContent');
 
   return (
-    <ToggleListItem
+    <SettingsToggleListItem
       level={1}
       animation={undefined}
       disabled={dns.state === 'custom'}
       checked={dns.state === 'default' && dns.defaultOptions.blockAdultContent}
       onCheckedChange={setBlockAdultContent}>
       <FlexRow $padding={{ left: 'medium' }}>
-        <ToggleListItem.Label variant="bodySmall">
+        <SettingsToggleListItem.Label variant="bodySmall">
           {
             // TRANSLATORS: Label for settings that enables block of adult content.
             messages.pgettext('vpn-settings-view', 'Adult content')
           }
-        </ToggleListItem.Label>
+        </SettingsToggleListItem.Label>
       </FlexRow>
-      <ToggleListItem.Switch />
-    </ToggleListItem>
+      <SettingsToggleListItem.Switch />
+    </SettingsToggleListItem>
   );
 }
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 31bf40adac..c8a14887a4 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
@@ -1,27 +1,27 @@
 import { messages } from '../../../../../../../../shared/gettext';
 import { FlexRow } from '../../../../../../../lib/components/flex-row';
-import { ToggleListItem } from '../../../../../../toggle-list-item';
+import { SettingsToggleListItem } from '../../../../../../settings-toggle-list-item';
 import { useDns } from '../../hooks';
 
 export function BlockGamblingSetting() {
   const [dns, setBlockGambling] = useDns('blockGambling');
 
   return (
-    <ToggleListItem
+    <SettingsToggleListItem
       level={1}
       animation={undefined}
       disabled={dns.state === 'custom'}
       checked={dns.state === 'default' && dns.defaultOptions.blockGambling}
       onCheckedChange={setBlockGambling}>
       <FlexRow $padding={{ left: 'medium' }}>
-        <ToggleListItem.Label variant="bodySmall">
+        <SettingsToggleListItem.Label variant="bodySmall">
           {
             // TRANSLATORS: Label for settings that enables block of gamling related websites.
             messages.pgettext('vpn-settings-view', 'Gambling')
           }
-        </ToggleListItem.Label>
+        </SettingsToggleListItem.Label>
       </FlexRow>
-      <ToggleListItem.Switch />
-    </ToggleListItem>
+      <SettingsToggleListItem.Switch />
+    </SettingsToggleListItem>
   );
 }
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 d25e17a0f2..8274ab997a 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
@@ -2,28 +2,28 @@ import { messages } from '../../../../../../../../shared/gettext';
 import { FlexRow } from '../../../../../../../lib/components/flex-row';
 import InfoButton from '../../../../../../InfoButton';
 import { ModalMessage } from '../../../../../../Modal';
-import { ToggleListItem } from '../../../../../../toggle-list-item';
+import { SettingsToggleListItem } from '../../../../../../settings-toggle-list-item';
 import { useDns } from '../../hooks';
 
 export function BlockMalwareSetting() {
   const [dns, setBlockMalware] = useDns('blockMalware');
 
   return (
-    <ToggleListItem
+    <SettingsToggleListItem
       level={1}
       animation={undefined}
       disabled={dns.state === 'custom'}
       checked={dns.state === 'default' && dns.defaultOptions.blockMalware}
       onCheckedChange={setBlockMalware}>
       <FlexRow $padding={{ left: 'medium' }}>
-        <ToggleListItem.Label variant="bodySmall">
+        <SettingsToggleListItem.Label variant="bodySmall">
           {
             // TRANSLATORS: Label for settings that enables malware blocking.
             messages.pgettext('vpn-settings-view', 'Malware')
           }
-        </ToggleListItem.Label>
+        </SettingsToggleListItem.Label>
       </FlexRow>
-      <ToggleListItem.Group>
+      <SettingsToggleListItem.Group>
         <InfoButton>
           <ModalMessage>
             {messages.pgettext(
@@ -32,8 +32,8 @@ export function BlockMalwareSetting() {
             )}
           </ModalMessage>
         </InfoButton>
-        <ToggleListItem.Switch />
-      </ToggleListItem.Group>
-    </ToggleListItem>
+        <SettingsToggleListItem.Switch />
+      </SettingsToggleListItem.Group>
+    </SettingsToggleListItem>
   );
 }
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 d4017eb64a..b4e35ce6cd 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
@@ -1,27 +1,27 @@
 import { messages } from '../../../../../../../../shared/gettext';
 import { FlexRow } from '../../../../../../../lib/components/flex-row';
-import { ToggleListItem } from '../../../../../../toggle-list-item';
+import { SettingsToggleListItem } from '../../../../../../settings-toggle-list-item';
 import { useDns } from '../../hooks';
 
 export function BlockSocialMediaSetting() {
   const [dns, setBlockSocialMedia] = useDns('blockSocialMedia');
 
   return (
-    <ToggleListItem
+    <SettingsToggleListItem
       level={1}
       animation={undefined}
       disabled={dns.state === 'custom'}
       checked={dns.state === 'default' && dns.defaultOptions.blockSocialMedia}
       onCheckedChange={setBlockSocialMedia}>
       <FlexRow $padding={{ left: 'medium' }}>
-        <ToggleListItem.Label variant="bodySmall">
+        <SettingsToggleListItem.Label variant="bodySmall">
           {
             // TRANSLATORS: Label for settings that enables block of social media.
             messages.pgettext('vpn-settings-view', 'Social media')
           }
-        </ToggleListItem.Label>
+        </SettingsToggleListItem.Label>
       </FlexRow>
-      <ToggleListItem.Switch />
-    </ToggleListItem>
+      <SettingsToggleListItem.Switch />
+    </SettingsToggleListItem>
   );
 }
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 ba09ea71e3..1f5f85270f 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
@@ -1,27 +1,27 @@
 import { messages } from '../../../../../../../../shared/gettext';
 import { FlexRow } from '../../../../../../../lib/components/flex-row';
-import { ToggleListItem } from '../../../../../../toggle-list-item';
+import { SettingsToggleListItem } from '../../../../../../settings-toggle-list-item';
 import { useDns } from '../../hooks';
 
 export function BlockTrackersSetting() {
   const [dns, setBlockTrackers] = useDns('blockTrackers');
 
   return (
-    <ToggleListItem
+    <SettingsToggleListItem
       level={1}
       animation={undefined}
       disabled={dns.state === 'custom'}
       checked={dns.state === 'default' && dns.defaultOptions.blockTrackers}
       onCheckedChange={setBlockTrackers}>
       <FlexRow $padding={{ left: 'medium' }}>
-        <ToggleListItem.Label variant="bodySmall">
+        <SettingsToggleListItem.Label variant="bodySmall">
           {
             // TRANSLATORS: Label for settings that enables tracker blocking.
             messages.pgettext('vpn-settings-view', 'Trackers')
           }
-        </ToggleListItem.Label>
+        </SettingsToggleListItem.Label>
       </FlexRow>
-      <ToggleListItem.Switch />
-    </ToggleListItem>
+      <SettingsToggleListItem.Switch />
+    </SettingsToggleListItem>
   );
 }
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 52600635e3..e821206afa 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
@@ -6,7 +6,7 @@ import { useAppContext } from '../../../../../context';
 import { useSelector } from '../../../../../redux/store';
 import InfoButton from '../../../../InfoButton';
 import { ModalMessage } from '../../../../Modal';
-import { ToggleListItem } from '../../../../toggle-list-item';
+import { SettingsToggleListItem } from '../../../../settings-toggle-list-item';
 
 export function EnableIpv6Setting() {
   const enableIpv6 = useSelector((state) => state.settings.enableIpv6);
@@ -25,11 +25,11 @@ export function EnableIpv6Setting() {
   );
 
   return (
-    <ToggleListItem checked={enableIpv6} onCheckedChange={setEnableIpv6}>
-      <ToggleListItem.Label>
+    <SettingsToggleListItem checked={enableIpv6} onCheckedChange={setEnableIpv6}>
+      <SettingsToggleListItem.Label>
         {messages.pgettext('vpn-settings-view', 'Enable IPv6')}
-      </ToggleListItem.Label>
-      <ToggleListItem.Group>
+      </SettingsToggleListItem.Label>
+      <SettingsToggleListItem.Group>
         <InfoButton>
           <ModalMessage>
             {messages.pgettext(
@@ -44,8 +44,8 @@ export function EnableIpv6Setting() {
             )}
           </ModalMessage>
         </InfoButton>
-        <ToggleListItem.Switch />
-      </ToggleListItem.Group>
-    </ToggleListItem>
+        <SettingsToggleListItem.Switch />
+      </SettingsToggleListItem.Group>
+    </SettingsToggleListItem>
   );
 }
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 d19bed5325..30da61d848 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
@@ -8,7 +8,7 @@ import { useBoolean } from '../../../../../lib/utility-hooks';
 import { useSelector } from '../../../../../redux/store';
 import InfoButton from '../../../../InfoButton';
 import { ModalAlert, ModalAlertType, ModalMessage } from '../../../../Modal';
-import { ToggleListItem } from '../../../../toggle-list-item';
+import { SettingsToggleListItem } from '../../../../settings-toggle-list-item';
 
 export function LockdownModeSetting() {
   const blockWhenDisconnected = useSelector((state) => state.settings.blockWhenDisconnected);
@@ -46,14 +46,14 @@ export function LockdownModeSetting() {
   }, [hideConfirmationDialog, setBlockWhenDisconnected]);
 
   return (
-    <ToggleListItem
+    <SettingsToggleListItem
       anchorId="lockdown-mode-setting"
       checked={blockWhenDisconnected}
       onCheckedChange={setLockDownMode}>
-      <ToggleListItem.Label>
+      <SettingsToggleListItem.Label>
         {messages.pgettext('vpn-settings-view', 'Lockdown mode')}
-      </ToggleListItem.Label>
-      <ToggleListItem.Group>
+      </SettingsToggleListItem.Label>
+      <SettingsToggleListItem.Group>
         <InfoButton>
           <ModalMessage>
             {messages.pgettext(
@@ -94,8 +94,8 @@ export function LockdownModeSetting() {
             )}
           </ModalMessage>
         </ModalAlert>
-        <ToggleListItem.Switch />
-      </ToggleListItem.Group>
-    </ToggleListItem>
+        <SettingsToggleListItem.Switch />
+      </SettingsToggleListItem.Group>
+    </SettingsToggleListItem>
   );
 }