From 536c1c37b1de1e03b3a2cf8603a1b5364a625289 Mon Sep 17 00:00:00 2001
From: chamiakJ <chamika@ceydigital.com>
Date: Thu, 15 May 2025 07:56:15 +0530
Subject: [PATCH] feat(settings): add appearance settings with dark mode toggle
 and translations

- Introduced new appearance settings page with a dark mode toggle feature.
- Added localization support for English, Spanish, and Portuguese in appearance settings.
- Removed the ThemeSelector component and updated PreferenceSelector accordingly.
---
 .../locales/en/settings/appearance.json       |  5 +++
 .../public/locales/en/settings/sidebar.json   |  3 +-
 .../locales/es/settings/appearance.json       |  5 +++
 .../public/locales/es/settings/sidebar.json   |  3 +-
 .../locales/pt/settings/appearance.json       |  5 +++
 .../public/locales/pt/settings/sidebar.json   |  3 +-
 worklenz-frontend/src/App.tsx                 |  1 -
 .../src/components/PreferenceSelector.tsx     |  6 +--
 .../src/features/theme/ThemeSelector.tsx      | 28 ------------
 .../src/lib/settings/settings-constants.ts    |  9 ++++
 .../appearance/appearance-settings.tsx        | 44 +++++++++++++++++++
 11 files changed, 77 insertions(+), 35 deletions(-)
 create mode 100644 worklenz-frontend/public/locales/en/settings/appearance.json
 create mode 100644 worklenz-frontend/public/locales/es/settings/appearance.json
 create mode 100644 worklenz-frontend/public/locales/pt/settings/appearance.json
 delete mode 100644 worklenz-frontend/src/features/theme/ThemeSelector.tsx
 create mode 100644 worklenz-frontend/src/pages/settings/appearance/appearance-settings.tsx

diff --git a/worklenz-frontend/public/locales/en/settings/appearance.json b/worklenz-frontend/public/locales/en/settings/appearance.json
new file mode 100644
index 00000000..76fb246f
--- /dev/null
+++ b/worklenz-frontend/public/locales/en/settings/appearance.json
@@ -0,0 +1,5 @@
+{
+  "title": "Appearance",
+  "darkMode": "Dark Mode",
+  "darkModeDescription": "Switch between light and dark mode to customize your viewing experience."
+} 
\ No newline at end of file
diff --git a/worklenz-frontend/public/locales/en/settings/sidebar.json b/worklenz-frontend/public/locales/en/settings/sidebar.json
index 41bc3e0f..d0b64829 100644
--- a/worklenz-frontend/public/locales/en/settings/sidebar.json
+++ b/worklenz-frontend/public/locales/en/settings/sidebar.json
@@ -10,5 +10,6 @@
   "team-members": "Team Members",
   "teams": "Teams",
   "change-password": "Change Password",
-  "language-and-region": "Language and Region"
+  "language-and-region": "Language and Region",
+  "appearance": "Appearance"
 }
diff --git a/worklenz-frontend/public/locales/es/settings/appearance.json b/worklenz-frontend/public/locales/es/settings/appearance.json
new file mode 100644
index 00000000..a4c168a4
--- /dev/null
+++ b/worklenz-frontend/public/locales/es/settings/appearance.json
@@ -0,0 +1,5 @@
+{
+  "title": "Apariencia",
+  "darkMode": "Modo Oscuro",
+  "darkModeDescription": "Cambia entre el modo claro y oscuro para personalizar tu experiencia visual."
+} 
\ No newline at end of file
diff --git a/worklenz-frontend/public/locales/es/settings/sidebar.json b/worklenz-frontend/public/locales/es/settings/sidebar.json
index 32d529ea..3793e77f 100644
--- a/worklenz-frontend/public/locales/es/settings/sidebar.json
+++ b/worklenz-frontend/public/locales/es/settings/sidebar.json
@@ -10,5 +10,6 @@
   "team-members": "Miembros del equipo",
   "teams": "Equipos",
   "change-password": "Cambiar contraseña",
-  "language-and-region": "Idioma y región"
+  "language-and-region": "Idioma y región",
+  "appearance": "Apariencia"
 }
diff --git a/worklenz-frontend/public/locales/pt/settings/appearance.json b/worklenz-frontend/public/locales/pt/settings/appearance.json
new file mode 100644
index 00000000..eaffbb32
--- /dev/null
+++ b/worklenz-frontend/public/locales/pt/settings/appearance.json
@@ -0,0 +1,5 @@
+{
+  "title": "Aparência",
+  "darkMode": "Modo Escuro",
+  "darkModeDescription": "Alterne entre o modo claro e escuro para personalizar sua experiência de visualização."
+} 
\ No newline at end of file
diff --git a/worklenz-frontend/public/locales/pt/settings/sidebar.json b/worklenz-frontend/public/locales/pt/settings/sidebar.json
index b9047fae..67fac9dc 100644
--- a/worklenz-frontend/public/locales/pt/settings/sidebar.json
+++ b/worklenz-frontend/public/locales/pt/settings/sidebar.json
@@ -10,5 +10,6 @@
   "team-members": "Membros da Equipe",
   "teams": "Equipes",
   "change-password": "Alterar Senha",
-  "language-and-region": "Idioma e Região"
+  "language-and-region": "Idioma e Região",
+  "appearance": "Aparência"
 } 
\ No newline at end of file
diff --git a/worklenz-frontend/src/App.tsx b/worklenz-frontend/src/App.tsx
index 13abc6f8..8b313508 100644
--- a/worklenz-frontend/src/App.tsx
+++ b/worklenz-frontend/src/App.tsx
@@ -39,7 +39,6 @@ const App: React.FC<{ children: React.ReactNode }> = ({ children }) => {
     <Suspense fallback={<SuspenseFallback />}>
       <ThemeWrapper>
         <RouterProvider router={router} future={{ v7_startTransition: true }} />
-        <PreferenceSelector />
       </ThemeWrapper>
     </Suspense>
   );
diff --git a/worklenz-frontend/src/components/PreferenceSelector.tsx b/worklenz-frontend/src/components/PreferenceSelector.tsx
index 9bf3c324..b908c247 100644
--- a/worklenz-frontend/src/components/PreferenceSelector.tsx
+++ b/worklenz-frontend/src/components/PreferenceSelector.tsx
@@ -1,7 +1,7 @@
 import { FloatButton, Space, Tooltip } from 'antd';
 import { FormatPainterOutlined } from '@ant-design/icons';
-import LanguageSelector from '../features/i18n/language-selector';
-import ThemeSelector from '../features/theme/ThemeSelector';
+// import LanguageSelector from '../features/i18n/language-selector';
+// import ThemeSelector from '../features/theme/ThemeSelector';
 
 const PreferenceSelector = () => {
   return (
@@ -17,7 +17,7 @@ const PreferenceSelector = () => {
               justifyContent: 'center',
             }}
           >
-            <ThemeSelector />
+            {/* <ThemeSelector /> */}
           </Space>
         </FloatButton.Group>
       </div>
diff --git a/worklenz-frontend/src/features/theme/ThemeSelector.tsx b/worklenz-frontend/src/features/theme/ThemeSelector.tsx
deleted file mode 100644
index ea26b286..00000000
--- a/worklenz-frontend/src/features/theme/ThemeSelector.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-// ThemeSelector.tsx
-import { Button } from 'antd';
-import React from 'react';
-import { useAppDispatch } from '@/hooks/useAppDispatch';
-import { useAppSelector } from '@/hooks/useAppSelector';
-import { toggleTheme } from './themeSlice';
-import { MoonOutlined, SunOutlined } from '@ant-design/icons';
-
-const ThemeSelector = () => {
-  const themeMode = useAppSelector(state => state.themeReducer.mode);
-  const dispatch = useAppDispatch();
-
-  const handleDarkModeToggle = () => {
-    dispatch(toggleTheme());
-  };
-
-  return (
-    <Button
-      type={themeMode === 'dark' ? 'primary' : 'default'}
-      icon={themeMode === 'dark' ? <SunOutlined /> : <MoonOutlined />}
-      shape="circle"
-      onClick={handleDarkModeToggle}
-      className="transition-all duration-300" // Optional: add smooth transition
-    />
-  );
-};
-
-export default ThemeSelector;
diff --git a/worklenz-frontend/src/lib/settings/settings-constants.ts b/worklenz-frontend/src/lib/settings/settings-constants.ts
index ad72be2b..9855b008 100644
--- a/worklenz-frontend/src/lib/settings/settings-constants.ts
+++ b/worklenz-frontend/src/lib/settings/settings-constants.ts
@@ -11,6 +11,7 @@ import {
   TeamOutlined,
   UserOutlined,
   UserSwitchOutlined,
+  BulbOutlined,
 } from '@ant-design/icons';
 import React, { ReactNode } from 'react';
 import ProfileSettings from '../../pages/settings/profile/profile-settings';
@@ -25,6 +26,7 @@ import TeamMembersSettings from '@/pages/settings/team-members/team-members-sett
 import TeamsSettings from '../../pages/settings/teams/teams-settings';
 import ChangePassword from '@/pages/settings/change-password/change-password';
 import LanguageAndRegionSettings from '@/pages/settings/language-and-region/language-and-region-settings';
+import AppearanceSettings from '@/pages/settings/appearance/appearance-settings';
 
 // type of menu item in settings sidebar
 type SettingMenuItems = {
@@ -52,6 +54,13 @@ export const settingsItems: SettingMenuItems[] = [
     icon: React.createElement(NotificationOutlined),
     element: React.createElement(NotificationsSettings),
   },
+  {
+    key: 'appearance',
+    name: 'appearance',
+    endpoint: 'appearance',
+    icon: React.createElement(BulbOutlined),
+    element: React.createElement(AppearanceSettings),
+  },
   {
     key: 'change-password',
     name: 'change-password',
diff --git a/worklenz-frontend/src/pages/settings/appearance/appearance-settings.tsx b/worklenz-frontend/src/pages/settings/appearance/appearance-settings.tsx
new file mode 100644
index 00000000..2708babb
--- /dev/null
+++ b/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; 
\ No newline at end of file