Merge pull request #126 from chamikaJ/chore/improved-dark-mode-toggle

feat(settings): add appearance settings with dark mode toggle and tra…

worklenz-frontend/src/pages/settings/appearance/appearance-settings.tsx

@@ -0,0 +1,44 @@
+import { Card, Divider, Flex, Switch, Typography } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { useAppSelector } from '@/hooks/useAppSelector';
+import { toggleTheme } from '@/features/theme/themeSlice';
+import { useDocumentTitle } from '@/hooks/useDoumentTItle';
+import { MoonOutlined, SunOutlined } from '@ant-design/icons';
+
+const AppearanceSettings = () => {
+  const { t } = useTranslation('settings/appearance');
+  const themeMode = useAppSelector(state => state.themeReducer.mode);
+  const dispatch = useAppDispatch();
+
+  useDocumentTitle(t('title'));
+
+  const handleThemeToggle = () => {
+    dispatch(toggleTheme());
+  };
+
+  return (
+    <Card style={{ width: '100%' }}>
+      <Flex vertical gap={4}>
+        <Flex gap={8} align="center">
+          <Switch
+            checked={themeMode === 'dark'}
+            onChange={handleThemeToggle}
+            checkedChildren={<MoonOutlined />}
+            unCheckedChildren={<SunOutlined />}
+          />
+          <Typography.Title level={4} style={{ marginBlockEnd: 0 }}>
+            {t('darkMode')}
+          </Typography.Title>
+        </Flex>
+        <Typography.Text
+          style={{ fontSize: 14, color: themeMode === 'dark' ? '#9CA3AF' : '#00000073' }}
+        >
+          {t('darkModeDescription')}
+        </Typography.Text>
+      </Flex>
+    </Card>
+  );
+};
+
+export default AppearanceSettings;