Move user interface settings components to separate folders

14 files changed, 224 insertions, 179 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/UserInterfaceSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/UserInterfaceSettings.tsx
index 461aa02ad6..f6929b9a41 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/UserInterfaceSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/UserInterfaceSettings.tsx
@@ -1,14 +1,9 @@
 import styled from 'styled-components';
 
 import { messages } from '../../../../shared/gettext';
-import { RoutePath } from '../../../../shared/routes';
-import { useAppContext } from '../../../context';
-import { Image } from '../../../lib/components';
 import { useHistory } from '../../../lib/history';
 import { useSelector } from '../../../redux/store';
 import { AppNavigationHeader } from '../..';
-import { AriaDescription, AriaInput, AriaInputGroup, AriaLabel } from '../../AriaGroup';
-import * as Cell from '../../cell';
 import { BackAction } from '../../KeyboardNavigation';
 import {
   Layout,
@@ -19,8 +14,15 @@ import {
 } from '../../Layout';
 import { NavigationContainer } from '../../NavigationContainer';
 import { NavigationScrollbars } from '../../NavigationScrollbars';
-import { SettingsNavigationListItem } from '../../settings-navigation-list-item';
 import SettingsHeader, { HeaderTitle } from '../../SettingsHeader';
+import {
+  AnimateMapSetting,
+  LanguageButton,
+  MonochromaticTrayIconSetting,
+  NotificationsSetting,
+  StartMinimizedSetting,
+  UnpinnedWindowSetting,
+} from './components';
 
 const StyledAnimateMapCellGroup = styled(SettingsGroup)({
   '@media (prefers-reduced-motion: reduce)': {
@@ -89,176 +91,3 @@ export function UserInterfaceSettings() {
     </BackAction>
   );
 }
-
-function NotificationsSetting() {
-  const enableSystemNotifications = useSelector(
-    (state) => state.settings.guiSettings.enableSystemNotifications,
-  );
-  const { setEnableSystemNotifications } = useAppContext();
-
-  return (
-    <AriaInputGroup>
-      <Cell.Container>
-        <AriaLabel>
-          <Cell.InputLabel>
-            {messages.pgettext('user-interface-settings-view', 'Notifications')}
-          </Cell.InputLabel>
-        </AriaLabel>
-        <AriaInput>
-          <Cell.Switch isOn={enableSystemNotifications} onChange={setEnableSystemNotifications} />
-        </AriaInput>
-      </Cell.Container>
-      <Cell.CellFooter>
-        <AriaDescription>
-          <Cell.CellFooterText>
-            {messages.pgettext(
-              'user-interface-settings-view',
-              'Enable or disable system notifications. The critical notifications will always be displayed.',
-            )}
-          </Cell.CellFooterText>
-        </AriaDescription>
-      </Cell.CellFooter>
-    </AriaInputGroup>
-  );
-}
-
-function MonochromaticTrayIconSetting() {
-  const monochromaticIcon = useSelector((state) => state.settings.guiSettings.monochromaticIcon);
-  const { setMonochromaticIcon } = useAppContext();
-
-  return (
-    <AriaInputGroup>
-      <Cell.Container>
-        <AriaLabel>
-          <Cell.InputLabel>
-            {messages.pgettext('user-interface-settings-view', 'Monochromatic tray icon')}
-          </Cell.InputLabel>
-        </AriaLabel>
-        <AriaInput>
-          <Cell.Switch isOn={monochromaticIcon} onChange={setMonochromaticIcon} />
-        </AriaInput>
-      </Cell.Container>
-      <Cell.CellFooter>
-        <AriaDescription>
-          <Cell.CellFooterText>
-            {messages.pgettext(
-              'user-interface-settings-view',
-              'Use a monochromatic tray icon instead of a colored one.',
-            )}
-          </Cell.CellFooterText>
-        </AriaDescription>
-      </Cell.CellFooter>
-    </AriaInputGroup>
-  );
-}
-
-function UnpinnedWindowSetting() {
-  const unpinnedWindow = useSelector((state) => state.settings.guiSettings.unpinnedWindow);
-  const { setUnpinnedWindow } = useAppContext();
-
-  return (
-    <AriaInputGroup>
-      <Cell.Container>
-        <AriaLabel>
-          <Cell.InputLabel>
-            {messages.pgettext('user-interface-settings-view', 'Unpin app from taskbar')}
-          </Cell.InputLabel>
-        </AriaLabel>
-        <AriaInput>
-          <Cell.Switch isOn={unpinnedWindow} onChange={setUnpinnedWindow} />
-        </AriaInput>
-      </Cell.Container>
-      <Cell.CellFooter>
-        <AriaDescription>
-          <Cell.CellFooterText>
-            {messages.pgettext(
-              'user-interface-settings-view',
-              'Enable to move the app around as a free-standing window.',
-            )}
-          </Cell.CellFooterText>
-        </AriaDescription>
-      </Cell.CellFooter>
-    </AriaInputGroup>
-  );
-}
-
-function StartMinimizedSetting() {
-  const startMinimized = useSelector((state) => state.settings.guiSettings.startMinimized);
-  const { setStartMinimized } = useAppContext();
-
-  return (
-    <AriaInputGroup>
-      <Cell.Container>
-        <AriaLabel>
-          <Cell.InputLabel>
-            {messages.pgettext('user-interface-settings-view', 'Start minimized')}
-          </Cell.InputLabel>
-        </AriaLabel>
-        <AriaInput>
-          <Cell.Switch isOn={startMinimized} onChange={setStartMinimized} />
-        </AriaInput>
-      </Cell.Container>
-      <Cell.CellFooter>
-        <AriaDescription>
-          <Cell.CellFooterText>
-            {messages.pgettext(
-              'user-interface-settings-view',
-              'Show only the tray icon when the app starts.',
-            )}
-          </Cell.CellFooterText>
-        </AriaDescription>
-      </Cell.CellFooter>
-    </AriaInputGroup>
-  );
-}
-
-function AnimateMapSetting() {
-  const animateMap = useSelector((state) => state.settings.guiSettings.animateMap);
-  const { setAnimateMap } = useAppContext();
-
-  return (
-    <AriaInputGroup>
-      <Cell.Container>
-        <AriaLabel>
-          <Cell.InputLabel>
-            {messages.pgettext('user-interface-settings-view', 'Animate map')}
-          </Cell.InputLabel>
-        </AriaLabel>
-        <AriaInput>
-          <Cell.Switch isOn={animateMap} onChange={setAnimateMap} />
-        </AriaInput>
-      </Cell.Container>
-      <Cell.CellFooter>
-        <AriaDescription>
-          <Cell.CellFooterText>
-            {messages.pgettext('user-interface-settings-view', 'Animate map movements.')}
-          </Cell.CellFooterText>
-        </AriaDescription>
-      </Cell.CellFooter>
-    </AriaInputGroup>
-  );
-}
-
-function LanguageButton() {
-  const { getPreferredLocaleDisplayName } = useAppContext();
-  const preferredLocale = useSelector((state) => state.settings.guiSettings.preferredLocale);
-  const localeDisplayName = getPreferredLocaleDisplayName(preferredLocale);
-
-  return (
-    <SettingsNavigationListItem to={RoutePath.selectLanguage}>
-      <SettingsNavigationListItem.Group>
-        <Image source="icon-language" />
-        <SettingsNavigationListItem.Label>
-          {
-            // TRANSLATORS: Navigation button to the 'Language' settings view
-            messages.pgettext('user-interface-settings-view', 'Language')
-          }
-        </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/user-interface-settings/components/animate-map-setting/AnimateMapSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/animate-map-setting/AnimateMapSetting.tsx
new file mode 100644
index 0000000000..d7677d7f15
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/animate-map-setting/AnimateMapSetting.tsx
@@ -0,0 +1,32 @@
+import { messages } from '../../../../../../shared/gettext';
+import { useAppContext } from '../../../../../context';
+import { useSelector } from '../../../../../redux/store';
+import { AriaDescription, AriaInput, AriaInputGroup, AriaLabel } from '../../../../AriaGroup';
+import * as Cell from '../../../../cell';
+
+export function AnimateMapSetting() {
+  const animateMap = useSelector((state) => state.settings.guiSettings.animateMap);
+  const { setAnimateMap } = useAppContext();
+
+  return (
+    <AriaInputGroup>
+      <Cell.Container>
+        <AriaLabel>
+          <Cell.InputLabel>
+            {messages.pgettext('user-interface-settings-view', 'Animate map')}
+          </Cell.InputLabel>
+        </AriaLabel>
+        <AriaInput>
+          <Cell.Switch isOn={animateMap} onChange={setAnimateMap} />
+        </AriaInput>
+      </Cell.Container>
+      <Cell.CellFooter>
+        <AriaDescription>
+          <Cell.CellFooterText>
+            {messages.pgettext('user-interface-settings-view', 'Animate map movements.')}
+          </Cell.CellFooterText>
+        </AriaDescription>
+      </Cell.CellFooter>
+    </AriaInputGroup>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/animate-map-setting/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/animate-map-setting/index.ts
new file mode 100644
index 0000000000..0bd2c4cffc
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/animate-map-setting/index.ts
@@ -0,0 +1 @@
+export * from './AnimateMapSetting';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/index.ts
new file mode 100644
index 0000000000..a09336521a
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/index.ts
@@ -0,0 +1,6 @@
+export * from './animate-map-setting';
+export * from './language-button';
+export * from './monochromatic-tray-icon-setting';
+export * from './notifications-setting';
+export * from './start-minimized-setting';
+export * from './unpinned-window-setting';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/language-button/LanguageButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/language-button/LanguageButton.tsx
new file mode 100644
index 0000000000..7742dc9598
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/language-button/LanguageButton.tsx
@@ -0,0 +1,30 @@
+import { messages } from '../../../../../../shared/gettext';
+import { RoutePath } from '../../../../../../shared/routes';
+import { useAppContext } from '../../../../../context';
+import { Image } from '../../../../../lib/components';
+import { useSelector } from '../../../../../redux/store';
+import { SettingsNavigationListItem } from '../../../../settings-navigation-list-item';
+
+export function LanguageButton() {
+  const { getPreferredLocaleDisplayName } = useAppContext();
+  const preferredLocale = useSelector((state) => state.settings.guiSettings.preferredLocale);
+  const localeDisplayName = getPreferredLocaleDisplayName(preferredLocale);
+
+  return (
+    <SettingsNavigationListItem to={RoutePath.selectLanguage}>
+      <SettingsNavigationListItem.Group>
+        <Image source="icon-language" />
+        <SettingsNavigationListItem.Label>
+          {
+            // TRANSLATORS: Navigation button to the 'Language' settings view
+            messages.pgettext('user-interface-settings-view', 'Language')
+          }
+        </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/user-interface-settings/components/language-button/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/language-button/index.ts
new file mode 100644
index 0000000000..2df0ec9f14
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/language-button/index.ts
@@ -0,0 +1 @@
+export * from './LanguageButton';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/monochromatic-tray-icon-setting/MonochromaticTrayIconSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/monochromatic-tray-icon-setting/MonochromaticTrayIconSetting.tsx
new file mode 100644
index 0000000000..eae48e6b39
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/monochromatic-tray-icon-setting/MonochromaticTrayIconSetting.tsx
@@ -0,0 +1,35 @@
+import { messages } from '../../../../../../shared/gettext';
+import { useAppContext } from '../../../../../context';
+import { useSelector } from '../../../../../redux/store';
+import { AriaDescription, AriaInput, AriaInputGroup, AriaLabel } from '../../../../AriaGroup';
+import * as Cell from '../../../../cell';
+
+export function MonochromaticTrayIconSetting() {
+  const monochromaticIcon = useSelector((state) => state.settings.guiSettings.monochromaticIcon);
+  const { setMonochromaticIcon } = useAppContext();
+
+  return (
+    <AriaInputGroup>
+      <Cell.Container>
+        <AriaLabel>
+          <Cell.InputLabel>
+            {messages.pgettext('user-interface-settings-view', 'Monochromatic tray icon')}
+          </Cell.InputLabel>
+        </AriaLabel>
+        <AriaInput>
+          <Cell.Switch isOn={monochromaticIcon} onChange={setMonochromaticIcon} />
+        </AriaInput>
+      </Cell.Container>
+      <Cell.CellFooter>
+        <AriaDescription>
+          <Cell.CellFooterText>
+            {messages.pgettext(
+              'user-interface-settings-view',
+              'Use a monochromatic tray icon instead of a colored one.',
+            )}
+          </Cell.CellFooterText>
+        </AriaDescription>
+      </Cell.CellFooter>
+    </AriaInputGroup>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/monochromatic-tray-icon-setting/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/monochromatic-tray-icon-setting/index.ts
new file mode 100644
index 0000000000..38e9f4ae91
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/monochromatic-tray-icon-setting/index.ts
@@ -0,0 +1 @@
+export * from './MonochromaticTrayIconSetting';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/notifications-setting/NotificationsSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/notifications-setting/NotificationsSetting.tsx
new file mode 100644
index 0000000000..565ad16250
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/notifications-setting/NotificationsSetting.tsx
@@ -0,0 +1,37 @@
+import { messages } from '../../../../../../shared/gettext';
+import { useAppContext } from '../../../../../context';
+import { useSelector } from '../../../../../redux/store';
+import { AriaDescription, AriaInput, AriaInputGroup, AriaLabel } from '../../../../AriaGroup';
+import * as Cell from '../../../../cell';
+
+export function NotificationsSetting() {
+  const enableSystemNotifications = useSelector(
+    (state) => state.settings.guiSettings.enableSystemNotifications,
+  );
+  const { setEnableSystemNotifications } = useAppContext();
+
+  return (
+    <AriaInputGroup>
+      <Cell.Container>
+        <AriaLabel>
+          <Cell.InputLabel>
+            {messages.pgettext('user-interface-settings-view', 'Notifications')}
+          </Cell.InputLabel>
+        </AriaLabel>
+        <AriaInput>
+          <Cell.Switch isOn={enableSystemNotifications} onChange={setEnableSystemNotifications} />
+        </AriaInput>
+      </Cell.Container>
+      <Cell.CellFooter>
+        <AriaDescription>
+          <Cell.CellFooterText>
+            {messages.pgettext(
+              'user-interface-settings-view',
+              'Enable or disable system notifications. The critical notifications will always be displayed.',
+            )}
+          </Cell.CellFooterText>
+        </AriaDescription>
+      </Cell.CellFooter>
+    </AriaInputGroup>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/notifications-setting/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/notifications-setting/index.ts
new file mode 100644
index 0000000000..2f05ed81ca
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/notifications-setting/index.ts
@@ -0,0 +1 @@
+export * from './NotificationsSetting';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/start-minimized-setting/StartMinimizedSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/start-minimized-setting/StartMinimizedSetting.tsx
new file mode 100644
index 0000000000..20b6bb59a4
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/start-minimized-setting/StartMinimizedSetting.tsx
@@ -0,0 +1,35 @@
+import { messages } from '../../../../../../shared/gettext';
+import { useAppContext } from '../../../../../context';
+import { useSelector } from '../../../../../redux/store';
+import { AriaDescription, AriaInput, AriaInputGroup, AriaLabel } from '../../../../AriaGroup';
+import * as Cell from '../../../../cell';
+
+export function StartMinimizedSetting() {
+  const startMinimized = useSelector((state) => state.settings.guiSettings.startMinimized);
+  const { setStartMinimized } = useAppContext();
+
+  return (
+    <AriaInputGroup>
+      <Cell.Container>
+        <AriaLabel>
+          <Cell.InputLabel>
+            {messages.pgettext('user-interface-settings-view', 'Start minimized')}
+          </Cell.InputLabel>
+        </AriaLabel>
+        <AriaInput>
+          <Cell.Switch isOn={startMinimized} onChange={setStartMinimized} />
+        </AriaInput>
+      </Cell.Container>
+      <Cell.CellFooter>
+        <AriaDescription>
+          <Cell.CellFooterText>
+            {messages.pgettext(
+              'user-interface-settings-view',
+              'Show only the tray icon when the app starts.',
+            )}
+          </Cell.CellFooterText>
+        </AriaDescription>
+      </Cell.CellFooter>
+    </AriaInputGroup>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/start-minimized-setting/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/start-minimized-setting/index.ts
new file mode 100644
index 0000000000..39e6bdb574
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/start-minimized-setting/index.ts
@@ -0,0 +1 @@
+export * from './StartMinimizedSetting';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/unpinned-window-setting/UnpinnedWindowSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/unpinned-window-setting/UnpinnedWindowSetting.tsx
new file mode 100644
index 0000000000..ae01dd6e6d
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/unpinned-window-setting/UnpinnedWindowSetting.tsx
@@ -0,0 +1,35 @@
+import { messages } from '../../../../../../shared/gettext';
+import { useAppContext } from '../../../../../context';
+import { useSelector } from '../../../../../redux/store';
+import { AriaDescription, AriaInput, AriaInputGroup, AriaLabel } from '../../../../AriaGroup';
+import * as Cell from '../../../../cell';
+
+export function UnpinnedWindowSetting() {
+  const unpinnedWindow = useSelector((state) => state.settings.guiSettings.unpinnedWindow);
+  const { setUnpinnedWindow } = useAppContext();
+
+  return (
+    <AriaInputGroup>
+      <Cell.Container>
+        <AriaLabel>
+          <Cell.InputLabel>
+            {messages.pgettext('user-interface-settings-view', 'Unpin app from taskbar')}
+          </Cell.InputLabel>
+        </AriaLabel>
+        <AriaInput>
+          <Cell.Switch isOn={unpinnedWindow} onChange={setUnpinnedWindow} />
+        </AriaInput>
+      </Cell.Container>
+      <Cell.CellFooter>
+        <AriaDescription>
+          <Cell.CellFooterText>
+            {messages.pgettext(
+              'user-interface-settings-view',
+              'Enable to move the app around as a free-standing window.',
+            )}
+          </Cell.CellFooterText>
+        </AriaDescription>
+      </Cell.CellFooter>
+    </AriaInputGroup>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/unpinned-window-setting/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/unpinned-window-setting/index.ts
new file mode 100644
index 0000000000..8f3f823fb1
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/unpinned-window-setting/index.ts
@@ -0,0 +1 @@
+export * from './UnpinnedWindowSetting';