From 32279035646760c1cd60aa8a7476e0d8e04e64ca Mon Sep 17 00:00:00 2001
From: PxlSyl <SMCBeatz@protonmail.com.com>
Date: Fri, 24 May 2024 12:23:13 +0200
Subject: [PATCH] improve UI translations

---
 app/[locale]/i18n/locales/en/common.json   |  6 +++++-
 app/[locale]/i18n/locales/fr/common.json   |  6 +++++-
 components/search/components/KBarModal.tsx | 12 +++++++-----
 components/theme/ThemeSwitch.tsx           | 13 +++++++++----
 4 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/app/[locale]/i18n/locales/en/common.json b/app/[locale]/i18n/locales/en/common.json
index 5455c71..b56852f 100644
--- a/app/[locale]/i18n/locales/en/common.json
+++ b/app/[locale]/i18n/locales/en/common.json
@@ -25,6 +25,10 @@
   "telegramshare": "telegram share button",
   "pinterestshare": "pinterest share button",
   "threadsshare": "threadsshare button",
+  "theme": "Theme",
+  "light": "Light",
+  "dark": "Dark",
+  "system": "System",
   "name": "Name*",
   "title": "Contact me",
   "mail": "Email*",
@@ -36,4 +40,4 @@
   "urlcopied": "URL copied!",
   "contact": "Contact",
   "back": "Go Back"
-}
+}
\ No newline at end of file
diff --git a/app/[locale]/i18n/locales/fr/common.json b/app/[locale]/i18n/locales/fr/common.json
index 92f06dc..c13260a 100644
--- a/app/[locale]/i18n/locales/fr/common.json
+++ b/app/[locale]/i18n/locales/fr/common.json
@@ -25,6 +25,10 @@
   "telegramshare": "bouton de partage telegram",
   "pinterestshare": "bouton de partage pinterest",
   "threadsshare": "bouton de partage threads",
+  "theme": "Thème",
+  "light": "Clair",
+  "dark": "Sombre",
+  "system": "Système",
   "name": "Nom*",
   "title": "Me contacter",
   "mail": "Email*",
@@ -36,4 +40,4 @@
   "urlcopied": "URL copiée!",
   "contact": "Contact",
   "back": "Retour"
-}
+}
\ No newline at end of file
diff --git a/components/search/components/KBarModal.tsx b/components/search/components/KBarModal.tsx
index a4f3c75..612bb48 100644
--- a/components/search/components/KBarModal.tsx
+++ b/components/search/components/KBarModal.tsx
@@ -142,7 +142,7 @@ export const KBarModal = ({ actions, isLoading }: { actions: Action[]; isLoading
                       <span className="mr-2">
                         <SettingsIcon />
                       </span>
-                      <div>Theme</div>
+                      <div>{t('theme')}</div>
                     </>
                   )}
                 </button>
@@ -168,7 +168,8 @@ export const KBarModal = ({ actions, isLoading }: { actions: Action[]; isLoading
               </div>
             </div>
             {showEmailForm && (
-              <div className="mb-20 ml-2 mr-2 mt-20">
+              <div className="mb-20 ml-2 mr-2 mt-16">
+                <div className='text-3xl font-semibold'>{t('title')}</div>
                 <ModalBody
                   state={state}
                   handleSubmit={handleSubmit}
@@ -184,6 +185,7 @@ export const KBarModal = ({ actions, isLoading }: { actions: Action[]; isLoading
             )}
             {showSettings && (
               <div className="mb-20 mt-20 flex flex-col space-y-4">
+                <div className='ml-4 text-3xl font-semibold'>{t('theme')}</div>
                 <button
                   className="flex flex-row py-2 hover:bg-primary-600 hover:text-white"
                   onClick={() => handleThemeChange('light')}
@@ -191,7 +193,7 @@ export const KBarModal = ({ actions, isLoading }: { actions: Action[]; isLoading
                   <span className="ml-4 mr-2 hover:text-white">
                     <Sun />
                   </span>
-                  <div>Light</div>
+                  <div>{t('light')}</div>
                 </button>
                 <button
                   className="flex flex-row py-2 hover:bg-primary-600 hover:text-white"
@@ -200,7 +202,7 @@ export const KBarModal = ({ actions, isLoading }: { actions: Action[]; isLoading
                   <span className="ml-4 mr-2 hover:text-white">
                     <Moon />
                   </span>
-                  <div>Dark</div>
+                  <div>{t('dark')}</div>
                 </button>
                 <button
                   className="flex flex-row py-2 hover:bg-primary-600 hover:text-white"
@@ -209,7 +211,7 @@ export const KBarModal = ({ actions, isLoading }: { actions: Action[]; isLoading
                   <span className="ml-4 mr-2 hover:text-white">
                     <Monitor />
                   </span>
-                  <div>System</div>
+                  <div>{t('system')}</div>
                 </button>
               </div>
             )}
diff --git a/components/theme/ThemeSwitch.tsx b/components/theme/ThemeSwitch.tsx
index 7410854..8219c38 100644
--- a/components/theme/ThemeSwitch.tsx
+++ b/components/theme/ThemeSwitch.tsx
@@ -7,8 +7,13 @@ import { DarkModeSwitch } from './DarkModeSwitch'
 import { Monitor, Moon, Sun } from './icons'
 import { useTheme } from './ThemeContext'
 import { useOuterClick } from '../util/useOuterClick'
+import { useParams } from 'next/navigation'
+import { LocaleTypes } from 'app/[locale]/i18n/settings'
+import { useTranslation } from 'app/[locale]/i18n/client'
 
 const ThemeSwitch = () => {
+  const locale = useParams()?.locale as LocaleTypes
+  const { t } = useTranslation(locale, '')
   const { theme, setTheme, mounted } = useTheme()
   const [menuOpen, setMenuOpen] = React.useState(false)
   const [darkModeChecked, setDarkModeChecked] = React.useState(theme === 'dark')
@@ -30,7 +35,7 @@ const ThemeSwitch = () => {
   return (
     <div ref={menubarRef} className="mr-5">
       <Menu as="div" className="relative mt-1 inline-block text-left">
-        <Menu.Button aria-label="Theme">
+        <Menu.Button aria-label={t('theme')}>
           <DarkModeSwitch
             checked={darkModeChecked}
             onChange={(isChecked) => setDarkModeChecked(isChecked)}
@@ -63,7 +68,7 @@ const ThemeSwitch = () => {
                         } group flex w-full items-center rounded-md px-2 py-2 text-sm hover:text-primary-500 dark:hover:text-primary-500`}
                       >
                         <Sun />
-                        <span className="ml-2">Light</span>
+                        <span className="ml-2">{t('light')}</span>
                       </button>
                     )}
                   </Menu.Item>
@@ -80,7 +85,7 @@ const ThemeSwitch = () => {
                         } group flex w-full items-center rounded-md px-2 py-2 text-sm hover:text-primary-500 dark:hover:text-primary-500`}
                       >
                         <Moon />
-                        <span className="ml-2">Dark</span>
+                        <span className="ml-2">{t('dark')}</span>
                       </button>
                     )}
                   </Menu.Item>
@@ -97,7 +102,7 @@ const ThemeSwitch = () => {
                         } group flex w-full items-center rounded-md px-2 py-2 text-sm hover:text-primary-500 dark:hover:text-primary-500`}
                       >
                         <Monitor />
-                        <span className="ml-2">System</span>
+                        <span className="ml-2">{t('system')}</span>
                       </button>
                     )}
                   </Menu.Item>