CSV Import translations and dark mode fixes (#11184)

Fixes #11182 and adds missing translations

packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnSelect.tsx

@@ -20,6 +20,7 @@ import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/Dropdow
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+import { useLingui } from '@lingui/react/macro';
 import { useUpdateEffect } from '~/hooks/useUpdateEffect';
 
 const StyledFloatingDropdown = styled.div`
@@ -109,6 +110,8 @@ export const MatchColumnSelect = ({
     setOptions(initialOptions);
   }, [initialOptions]);
 
+  const { t } = useLingui();
+
   return (
     <>
       <div ref={refs.setReference}>
@@ -152,7 +155,7 @@ export const MatchColumnSelect = ({
                           <AppTooltip
                             key={option.value}
                             anchorSelect={`#${option.value}`}
-                            content="You are already importing this column."
+                            content={t`You are already importing this column.`}
                             place="right"
                             offset={-20}
                           />,
@@ -161,7 +164,7 @@ export const MatchColumnSelect = ({
                     </React.Fragment>
                   ))}
                   {options?.length === 0 && (
-                    <MenuItem key="No results" text="No results" />
+                    <MenuItem key="No results" text={t`No results`} />
                   )}
                 </DropdownMenuItemsContainer>
               </DropdownMenu>

packages/twenty-front/src/modules/spreadsheet-import/components/ModalCloseButton.tsx

@@ -5,6 +5,7 @@ import { useSpreadsheetImportInitialStep } from '@/spreadsheet-import/hooks/useS
 import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
 import { useDialogManager } from '@/ui/feedback/dialog-manager/hooks/useDialogManager';
 import { useStepBar } from '@/ui/navigation/step-bar/hooks/useStepBar';
+import { useLingui } from '@lingui/react/macro';
 
 const StyledCloseButtonContainer = styled.div`
   align-items: center;
@@ -34,17 +35,24 @@ export const ModalCloseButton = ({ onClose }: ModalCloseButtonProps) => {
 
   const { enqueueDialog } = useDialogManager();
 
+  const { t } = useLingui();
+
   const handleClose = () => {
     if (activeStep === -1) {
       onClose();
       return;
     }
     enqueueDialog({
-      title: 'Exit import flow',
-      message: 'Are you sure? Your current information will not be saved.',
+      title: t`Exit import flow`,
+      message: t`Are you sure? Your current information will not be saved.`,
       buttons: [
-        { title: 'Cancel' },
-        { title: 'Exit', onClick: onClose, accent: 'danger', role: 'confirm' },
+        { title: t`Cancel` },
+        {
+          title: t`Exit`,
+          onClick: onClose,
+          accent: 'danger',
+          role: 'confirm',
+        },
       ],
     });
   };

packages/twenty-front/src/modules/spreadsheet-import/components/SpreadsheetImportTable.tsx

@@ -1,3 +1,4 @@
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 // @ts-expect-error  // Todo: remove usage of react-data-grid
 import DataGrid, { DataGridProps } from 'react-data-grid';
@@ -125,6 +126,8 @@ export const SpreadsheetImportTable = <Data,>({
   selectedRows,
 }: SpreadsheetImportTableProps<Data>) => {
   const { rtl } = useSpreadsheetImportInternal();
+  const theme = useTheme();
+  const themeClassName = theme.name === 'dark' ? 'rdg-dark' : 'rdg-light';
 
   if (!rows?.length || !columns?.length) return null;
 
@@ -133,7 +136,7 @@ export const SpreadsheetImportTable = <Data,>({
       direction={rtl ? 'rtl' : 'ltr'}
       rowHeight={52}
       {...{
-        className,
+        className: `${className || ''} ${themeClassName}`,
         columns,
         components,
         headerRowHeight,