improve UI translations

PxlSyl · May 24, 2024 · 3227903 · 3227903
1 parent 44f295c
commit 3227903
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 11 deletions.
diff --git 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"
-}
+}
diff --git 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"
-}
+}
diff --git 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,14 +185,15 @@ 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')}
                 >
                   <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
@@ -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>