Use new Switch component in BetaListItem

1 files changed, 26 insertions, 41 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/beta-list-item/BetaListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/beta-list-item/BetaListItem.tsx
index 9dbbb0d566..d17c947b67 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/beta-list-item/BetaListItem.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/beta-list-item/BetaListItem.tsx
@@ -1,51 +1,36 @@
-import React from 'react';
-
 import { messages } from '../../../../../../shared/gettext';
-import { ListItem } from '../../../../../lib/components/list-item';
 import { useSettingsShowBetaReleases, useVersionIsBeta } from '../../../../../redux/hooks';
-import Switch from '../../../../Switch';
+import { SettingsToggleListItem } from '../../../../settings-toggle-list-item';
 
 export function BetaListItem() {
   const { isBeta } = useVersionIsBeta();
   const { showBetaReleases, setShowBetaReleases } = useSettingsShowBetaReleases();
-  const switchId = React.useId();
-  const labelId = React.useId();
-  const descriptionId = React.useId();
 
   return (
-    <ListItem disabled={isBeta}>
-      <ListItem.Item>
-        <ListItem.Content>
-          <ListItem.Label id={labelId} as="label" htmlFor={switchId}>
-            {
-              // TRANSLATORS: Label for switch to toggle beta program.
-              messages.pgettext('app-info-view', 'Beta program')
-            }
-          </ListItem.Label>
-          <Switch
-            id={switchId}
-            aria-labelledby={labelId}
-            aria-describedby={descriptionId}
-            isOn={showBetaReleases}
-            onChange={setShowBetaReleases}
-          />
-        </ListItem.Content>
-      </ListItem.Item>
-      <ListItem.Footer>
-        <ListItem.Text id={descriptionId}>
-          {isBeta
-            ? // TRANSLATORS: Description for beta program switch when using a beta version.
-              messages.pgettext(
-                'app-info-view',
-                'This option is unavailable while using a beta version.',
-              )
-            : // TRANSLATORS: Description for beta program switch.
-              messages.pgettext(
-                'app-info-view',
-                'Enable to get notified when new beta versions of the app are released.',
-              )}
-        </ListItem.Text>
-      </ListItem.Footer>
-    </ListItem>
+    <SettingsToggleListItem
+      checked={showBetaReleases}
+      onCheckedChange={setShowBetaReleases}
+      disabled={isBeta}
+      description={
+        isBeta
+          ? // TRANSLATORS: Description for beta program switch when using a beta version.
+            messages.pgettext(
+              'app-info-view',
+              'This option is unavailable while using a beta version.',
+            )
+          : // TRANSLATORS: Description for beta program switch.
+            messages.pgettext(
+              'app-info-view',
+              'Enable to get notified when new beta versions of the app are released.',
+            )
+      }>
+      <SettingsToggleListItem.Label>
+        {
+          // TRANSLATORS: Label for switch to toggle beta program.
+          messages.pgettext('app-info-view', 'Beta program')
+        }
+      </SettingsToggleListItem.Label>
+      <SettingsToggleListItem.Switch />
+    </SettingsToggleListItem>
   );
 }