Progress on translations (#10142)

packages/twenty-ui/src/input/color-scheme/components/ColorSchemePicker.tsx

@@ -31,12 +31,18 @@ export type ColorSchemePickerProps = {
   value: ColorScheme;
   className?: string;
   onChange: (value: ColorScheme) => void;
+  lightLabel: string;
+  darkLabel: string;
+  systemLabel: string;
 };
 
 export const ColorSchemePicker = ({
   value,
   onChange,
   className,
+  lightLabel,
+  darkLabel,
+  systemLabel,
 }: ColorSchemePickerProps) => (
   <StyledContainer className={className}>
     <StyledCardContainer>
@@ -45,7 +51,7 @@ export const ColorSchemePicker = ({
         variant="Light"
         selected={value === 'Light'}
       />
-      <StyledLabel>Light</StyledLabel>
+      <StyledLabel>{lightLabel}</StyledLabel>
     </StyledCardContainer>
     <StyledCardContainer>
       <ColorSchemeCard
@@ -53,7 +59,7 @@ export const ColorSchemePicker = ({
         variant="Dark"
         selected={value === 'Dark'}
       />
-      <StyledLabel>Dark</StyledLabel>
+      <StyledLabel>{darkLabel}</StyledLabel>
     </StyledCardContainer>
     <StyledCardContainer>
       <ColorSchemeCard
@@ -61,7 +67,7 @@ export const ColorSchemePicker = ({
         variant="System"
         selected={value === 'System'}
       />
-      <StyledLabel>System settings</StyledLabel>
+      <StyledLabel>{systemLabel}</StyledLabel>
     </StyledCardContainer>
   </StyledContainer>
 );

packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx

@@ -1,9 +1,9 @@
 import styled from '@emotion/styled';
+import { useLingui } from '@lingui/react/macro';
 import { IconPoint } from '@ui/display';
 import { Toggle } from '@ui/input';
 import { MAIN_COLORS } from '@ui/theme';
 import { useId } from 'react';
-
 const StyledContainer = styled.div`
   align-items: center;
   display: flex;
@@ -46,6 +46,7 @@ export const AdvancedSettingsToggle = ({
   isAdvancedModeEnabled,
   setIsAdvancedModeEnabled,
 }: AdvancedSettingsToggleProps) => {
+  const { t } = useLingui();
   const onChange = (newValue: boolean) => {
     setIsAdvancedModeEnabled(newValue);
   };
@@ -61,7 +62,7 @@ export const AdvancedSettingsToggle = ({
         />
       </StyledIconContainer>
       <StyledToggleContainer htmlFor={inputId}>
-        <StyledText>Advanced:</StyledText>
+        <StyledText>{t`Advanced:`}</StyledText>
 
         <Toggle
           id={inputId}