Add more translations (#9707)

As per title

packages/twenty-front/src/pages/settings/profile/appearance/components/LocalePicker.tsx

@@ -8,6 +8,7 @@ import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import { Select } from '@/ui/input/components/Select';
 
 import { i18n } from '@lingui/core';
+import { useLingui } from '@lingui/react/macro';
 import { dynamicActivate } from '~/utils/i18n/dynamicActivate';
 import { isDefined } from '~/utils/isDefined';
 import { logError } from '~/utils/logError';
@@ -19,6 +20,7 @@ const StyledContainer = styled.div`
 `;
 
 export const LocalePicker = () => {
+  const { t } = useLingui();
   const [currentWorkspaceMember, setCurrentWorkspaceMember] = useRecoilState(
     currentWorkspaceMemberState,
   );
@@ -57,38 +59,38 @@ export const LocalePicker = () => {
 
   const localeOptions = [
     {
-      label: 'Portuguese',
+      label: t`Portuguese`,
       value: 'pt',
     },
     {
-      label: 'French',
+      label: t`French`,
       value: 'fr',
     },
     {
-      label: 'German',
+      label: t`German`,
       value: 'de',
     },
     {
-      label: 'Italian',
+      label: t`Italian`,
       value: 'it',
     },
     {
-      label: 'Spanish',
+      label: t`Spanish`,
       value: 'es',
     },
     {
-      label: 'English',
+      label: t`English`,
       value: 'en',
     },
     {
-      label: 'Chinese',
+      label: t`Chinese`,
       value: 'zh',
     },
   ];
 
   if (isDebugMode) {
     localeOptions.push({
-      label: 'Pseudo-English',
+      label: t`Pseudo-English`,
       value: 'pseudo-en',
     });
   }

packages/twenty-front/src/pages/settings/profile/appearance/components/SettingsExperience.tsx

@@ -7,7 +7,7 @@ import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBa
 import { useColorScheme } from '@/ui/theme/hooks/useColorScheme';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 
-import { useLingui } from '@lingui/react/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { FeatureFlagKey } from '~/generated/graphql';
 import { DateTimeSettings } from '~/pages/settings/profile/appearance/components/DateTimeSettings';
 import { LocalePicker } from '~/pages/settings/profile/appearance/components/LocalePicker';
@@ -23,24 +23,24 @@ export const SettingsExperience = () => {
 
   return (
     <SubMenuTopBarContainer
-      title="Experience"
+      title={t`Experience`}
       links={[
         {
-          children: 'User',
+          children: <Trans>User</Trans>,
           href: getSettingsPagePath(SettingsPath.ProfilePage),
         },
-        { children: 'Experience' },
+        { children: <Trans>Experience</Trans> },
       ]}
     >
       <SettingsPageContainer>
         <Section>
-          <H2Title title="Appearance" />
+          <H2Title title={t`Appearance`} />
           <ColorSchemePicker value={colorScheme} onChange={setColorScheme} />
         </Section>
         <Section>
           <H2Title
-            title="Date and time"
-            description="Configure how dates are displayed across the app"
+            title={t`Date and time`}
+            description={t`Configure how dates are displayed across the app`}
           />
           <DateTimeSettings />
         </Section>