Merge branch 'feature/project-finance' into finance-module

worklenz-frontend/src/pages/account-setup/account-setup.tsx

@@ -24,8 +24,8 @@ import { useDocumentTitle } from '@/hooks/useDoumentTItle';
 import { getUserSession, setSession } from '@/utils/session-helper';
 import { validateEmail } from '@/utils/validateEmail';
 import { sanitizeInput } from '@/utils/sanitizeInput';
-import logo from '@/assets/images/logo.png';
-import logoDark from '@/assets/images/logo-dark-mode.png';
+import logo from '@/assets/images/worklenz-light-mode.png';
+import logoDark from '@/assets/images/worklenz-dark-mode.png';
 
 import './account-setup.css';
 import { IAccountSetupRequest } from '@/types/project-templates/project-templates.types';

worklenz-frontend/src/pages/projects/projectView/insights/project-view-insights.tsx

@@ -17,7 +17,7 @@ import {
 import { format } from 'date-fns';
 import html2canvas from 'html2canvas';
 import jsPDF from 'jspdf';
-import logo from '@/assets/images/logo.png';
+import logo from '@/assets/images/worklenz-light-mode.png';
 import { evt_project_insights_members_visit, evt_project_insights_overview_visit, evt_project_insights_tasks_visit } from '@/shared/worklenz-analytics-events';
 import { useMixpanelTracking } from '@/hooks/useMixpanelTracking';
 

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;