-
- Dark Mode
-
-
- Dark mode
-
-
+
+
+
+
+ ),
+ },
+ {
+ title: t('entry-selector.title'),
+ desc: t('entry-selector.desc'),
+ leadingIcon: 'looks_two',
+ trailing: (
+
+
+
+ ),
+ },
+ ]}
+ />
+ {
+ navigate(routes.display);
+ },
+ trailing: (
+
+ arrow_right
+
+ ),
+ },
+ ]}
+ />
+ {
+ navigate(routes.logs);
+ },
+ trailing: (
+
+ arrow_right
+
+ ),
+ },
+ ]}
+ />
+ {
+ navigate(routes.feedback);
+ },
+ trailing: (
+
+ arrow_right
+
+ ),
+ },
+ {
+ title: t('error-reporting.title'),
+ desc: t('error-reporting.desc'),
+ leadingIcon: 'error',
+ trailing: (
+
+
+
+ ),
+ },
+ {
+ title: t('faq'),
+ leadingIcon: 'help',
+ trailing: (
+ launch
+ ),
+ },
+ ]}
+ />
+ {
+ navigate(routes.legal);
+ },
+ trailing: (
+
+ arrow_right
+
+ ),
+ },
+ ]}
+ />
+ {
+ //TODO shutdown gracefully
+ },
+ },
+ ]}
+ />
+
+ Version {state.version}
-
);
}
diff --git a/nym-vpn/ui/src/pages/settings/SettingsGroup.tsx b/nym-vpn/ui/src/pages/settings/SettingsGroup.tsx
new file mode 100644
index 0000000000..e1bd46a30f
--- /dev/null
+++ b/nym-vpn/ui/src/pages/settings/SettingsGroup.tsx
@@ -0,0 +1,66 @@
+import clsx from 'clsx';
+import { ReactNode } from 'react';
+import { RadioGroup } from '@headlessui/react';
+
+type Setting = {
+ title: string;
+ leadingIcon?: string;
+ desc?: string;
+ onClick?: () => void;
+ trailing?: ReactNode;
+};
+
+interface Props {
+ settings: Setting[];
+}
+
+function SettingsGroup({ settings }: Props) {
+ return (
+
+ {settings.map((setting, index) => (
+
+
+ {setting.leadingIcon && (
+
{setting.leadingIcon}
+ )}
+
+
+
+ {setting.title}
+
+
+ {setting.desc}
+
+
+
+
{setting.trailing}
+
+ );
+}
+
+export default SettingsGroup;
diff --git a/nym-vpn/ui/src/pages/settings/SettingsLayout.tsx b/nym-vpn/ui/src/pages/settings/SettingsLayout.tsx
new file mode 100644
index 0000000000..90015a54fc
--- /dev/null
+++ b/nym-vpn/ui/src/pages/settings/SettingsLayout.tsx
@@ -0,0 +1,11 @@
+import { Outlet } from 'react-router-dom';
+
+function SettingsLayout() {
+ return (
+
+
+
+ );
+}
+
+export default SettingsLayout;
diff --git a/nym-vpn/ui/src/pages/settings/display/Display.tsx b/nym-vpn/ui/src/pages/settings/display/Display.tsx
new file mode 100644
index 0000000000..a783161baf
--- /dev/null
+++ b/nym-vpn/ui/src/pages/settings/display/Display.tsx
@@ -0,0 +1,64 @@
+import { useEffect, useState } from 'react';
+import clsx from 'clsx';
+import { invoke } from '@tauri-apps/api';
+import { Switch } from '@headlessui/react';
+import { useMainDispatch, useMainState } from '../../../contexts';
+import { StateDispatch } from '../../../types';
+import UiScaler from './UiScaler';
+
+function Display() {
+ const state = useMainState();
+ const dispatch = useMainDispatch() as StateDispatch;
+
+ const [darkModeEnabled, setDarkModeEnabled] = useState(
+ state.uiTheme === 'Dark',
+ );
+
+ useEffect(() => {
+ setDarkModeEnabled(state.uiTheme === 'Dark');
+ }, [state]);
+
+ const handleThemeChange = async (darkMode: boolean) => {
+ if (darkMode && state.uiTheme === 'Light') {
+ dispatch({ type: 'set-ui-theme', theme: 'Dark' });
+ } else if (!darkMode && state.uiTheme === 'Dark') {
+ dispatch({ type: 'set-ui-theme', theme: 'Light' });
+ }
+ invoke
('set_ui_theme', { theme: darkMode ? 'Dark' : 'Light' }).catch(
+ (e) => {
+ console.log(e);
+ },
+ );
+ };
+
+ return (
+
+
+
+ Dark Mode
+
+
+ Dark mode
+
+
+
+
+