Move KillSwitchInfo component to separate folder

4 files changed, 68 insertions, 45 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/VpnSettingsView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/VpnSettingsView.tsx
index 3071fd41ff..5ff55f1adb 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/VpnSettingsView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/VpnSettingsView.tsx
@@ -42,7 +42,14 @@ import { NavigationContainer } from '../../NavigationContainer';
 import { NavigationListItem } from '../../NavigationListItem';
 import { NavigationScrollbars } from '../../NavigationScrollbars';
 import SettingsHeader, { HeaderTitle } from '../../SettingsHeader';
-import { AllowLan, AutoConnect, AutoStart, DnsBlockers, EnableIpv6 } from './components';
+import {
+  AllowLan,
+  AutoConnect,
+  AutoStart,
+  DnsBlockers,
+  EnableIpv6,
+  KillSwitchInfo,
+} from './components';
 
 const StyledInfoButton = styled(InfoButton)({
   marginRight: spacings.medium,
@@ -118,50 +125,6 @@ export function VpnSettingsView() {
   );
 }
 
-function KillSwitchInfo() {
-  const [killSwitchInfoVisible, showKillSwitchInfo, hideKillSwitchInfo] = useBoolean(false);
-
-  return (
-    <>
-      <AriaInputGroup>
-        <Cell.Container>
-          <AriaLabel>
-            <Cell.InputLabel>
-              {messages.pgettext('vpn-settings-view', 'Kill switch')}
-            </Cell.InputLabel>
-          </AriaLabel>
-          <StyledInfoButton onClick={showKillSwitchInfo} />
-          <AriaInput>
-            <Cell.Switch isOn disabled />
-          </AriaInput>
-        </Cell.Container>
-      </AriaInputGroup>
-      <ModalAlert
-        isOpen={killSwitchInfoVisible}
-        type={ModalAlertType.info}
-        buttons={[
-          <Button key="back" onClick={hideKillSwitchInfo}>
-            <Button.Text>{messages.gettext('Got it!')}</Button.Text>
-          </Button>,
-        ]}
-        close={hideKillSwitchInfo}>
-        <ModalMessage>
-          {messages.pgettext(
-            'vpn-settings-view',
-            'This built-in feature prevents your traffic from leaking outside of the VPN tunnel if your network suddenly stops working or if the tunnel fails, it does this by blocking your traffic until your connection is reestablished.',
-          )}
-        </ModalMessage>
-        <ModalMessage>
-          {messages.pgettext(
-            'vpn-settings-view',
-            'The difference between the Kill Switch and Lockdown Mode is that the Kill Switch will prevent any leaks from happening during automatic tunnel reconnects, software crashes and similar accidents. With Lockdown Mode enabled, you must be connected to a Mullvad VPN server to be able to reach the internet. Manually disconnecting or quitting the app will block your connection.',
-          )}
-        </ModalMessage>
-      </ModalAlert>
-    </>
-  );
-}
-
 function LockdownMode() {
   const blockWhenDisconnected = useSelector((state) => state.settings.blockWhenDisconnected);
   const { setBlockWhenDisconnected: setBlockWhenDisconnectedImpl } = useAppContext();
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/index.ts
index 377829e9be..349f238228 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/index.ts
@@ -3,3 +3,4 @@ export * from './auto-connect';
 export * from './auto-start';
 export * from './dns-blockers';
 export * from './enable-ipv6';
+export * from './kill-switch-info';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/kill-switch-info/KillSwitchInfo.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/kill-switch-info/KillSwitchInfo.tsx
new file mode 100644
index 0000000000..fcecb751b1
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/kill-switch-info/KillSwitchInfo.tsx
@@ -0,0 +1,58 @@
+import styled from 'styled-components';
+
+import { messages } from '../../../../../../shared/gettext';
+import { Button } from '../../../../../lib/components';
+import { spacings } from '../../../../../lib/foundations';
+import { useBoolean } from '../../../../../lib/utility-hooks';
+import { AriaInput, AriaInputGroup, AriaLabel } from '../../../../AriaGroup';
+import * as Cell from '../../../../cell';
+import InfoButton from '../../../../InfoButton';
+import { ModalAlert, ModalAlertType, ModalMessage } from '../../../../Modal';
+
+const StyledInfoButton = styled(InfoButton)({
+  marginRight: spacings.medium,
+});
+
+export function KillSwitchInfo() {
+  const [killSwitchInfoVisible, showKillSwitchInfo, hideKillSwitchInfo] = useBoolean(false);
+
+  return (
+    <>
+      <AriaInputGroup>
+        <Cell.Container>
+          <AriaLabel>
+            <Cell.InputLabel>
+              {messages.pgettext('vpn-settings-view', 'Kill switch')}
+            </Cell.InputLabel>
+          </AriaLabel>
+          <StyledInfoButton onClick={showKillSwitchInfo} />
+          <AriaInput>
+            <Cell.Switch isOn disabled />
+          </AriaInput>
+        </Cell.Container>
+      </AriaInputGroup>
+      <ModalAlert
+        isOpen={killSwitchInfoVisible}
+        type={ModalAlertType.info}
+        buttons={[
+          <Button key="back" onClick={hideKillSwitchInfo}>
+            <Button.Text>{messages.gettext('Got it!')}</Button.Text>
+          </Button>,
+        ]}
+        close={hideKillSwitchInfo}>
+        <ModalMessage>
+          {messages.pgettext(
+            'vpn-settings-view',
+            'This built-in feature prevents your traffic from leaking outside of the VPN tunnel if your network suddenly stops working or if the tunnel fails, it does this by blocking your traffic until your connection is reestablished.',
+          )}
+        </ModalMessage>
+        <ModalMessage>
+          {messages.pgettext(
+            'vpn-settings-view',
+            'The difference between the Kill Switch and Lockdown Mode is that the Kill Switch will prevent any leaks from happening during automatic tunnel reconnects, software crashes and similar accidents. With Lockdown Mode enabled, you must be connected to a Mullvad VPN server to be able to reach the internet. Manually disconnecting or quitting the app will block your connection.',
+          )}
+        </ModalMessage>
+      </ModalAlert>
+    </>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/kill-switch-info/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/kill-switch-info/index.ts
new file mode 100644
index 0000000000..67eeb3a5a2
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/kill-switch-info/index.ts
@@ -0,0 +1 @@
+export * from './KillSwitchInfo';