update import steps design (#12463)

closes https://github.com/twentyhq/core-team-issues/issues/916

![Screenshot 2025-06-05 at 10 52
58](https://github.com/user-attachments/assets/ba5b6d65-0c1f-4d63-a197-e61816ec2d55)
![Screenshot 2025-06-05 at 10 53
09](https://github.com/user-attachments/assets/4aed579e-5e0e-4570-9518-b6e8ac604ea6)
![Screenshot 2025-06-05 at 10 53
24](https://github.com/user-attachments/assets/6f716306-ba08-468c-875a-4279991c1abd)

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

@@ -9,7 +9,9 @@ import { MatchColumnSelectSubFieldSelectDropdownContent } from '@/spreadsheet-im
 import { DO_NOT_IMPORT_OPTION_KEY } from '@/spreadsheet-import/constants/DoNotImportOptionKey';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import styled from '@emotion/styled';
 import { isDefined } from 'twenty-shared/utils';
+import { IconChevronDown } from 'twenty-ui/display';
 import { SelectOption } from 'twenty-ui/input';
 import { MenuItem } from 'twenty-ui/navigation';
 
@@ -21,6 +23,11 @@ interface MatchColumnToFieldSelectProps {
   placeholder?: string;
 }
 
+const StyledMenuItem = styled(MenuItem)`
+  background-color: ${({ theme }) => theme.background.transparent.lighter};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+`;
 export const MatchColumnToFieldSelect = ({
   onChange,
   value,
@@ -112,10 +119,11 @@ export const MatchColumnToFieldSelect = ({
       }}
       dropdownPlacement="bottom-start"
       clickableComponent={
-        <MenuItem
+        <StyledMenuItem
           LeftIcon={value?.Icon}
           text={value?.label ?? placeholder ?? ''}
           accent={value?.label ? 'default' : 'placeholder'}
+          RightIcon={IconChevronDown}
         />
       }
       dropdownComponents={

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

@@ -7,12 +7,10 @@ import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
 import { SpreadSheetImportModalCloseButton } from './SpreadSheetImportModalCloseButton';
 
 const StyledModal = styled(Modal)`
-  height: 61%;
   min-height: 600px;
   min-width: 800px;
   padding: 0;
   position: relative;
-  width: 63%;
   @media (max-width: ${MOBILE_VIEWPORT}px) {
     min-width: auto;
     min-height: auto;
@@ -42,7 +40,7 @@ export const SpreadSheetImportModalWrapper = ({
 
   return (
     <StyledModal
-      size="large"
+      size="extraLarge"
       modalId={modalId}
       isClosable={true}
       onClose={onClose}

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

@@ -28,18 +28,17 @@ const StyledDataGrid = styled(DataGrid)`
   --row-selected-hover-background-color: ${({ theme }) =>
     theme.background.secondary};
 
+  border: none;
   block-size: 100%;
-  border: 1px solid ${({ theme }) => theme.border.color.medium};
-  border-radius: ${({ theme }) => theme.border.radius.md};
   width: 100%;
 
   .rdg-header-row .rdg-cell {
     box-shadow: none;
     color: ${({ theme }) => theme.font.color.tertiary};
+    background-color: ${({ theme }) => theme.background.secondary};
     font-size: ${({ theme }) => theme.font.size.sm};
     font-weight: ${({ theme }) => theme.font.weight.semiBold};
     letter-spacing: wider;
-    text-transform: uppercase;
     ${({ headerRowHeight }) => {
       if (headerRowHeight === 0) {
         return `
@@ -68,7 +67,7 @@ const StyledDataGrid = styled(DataGrid)`
   }
 
   .rdg-cell-error {
-    background-color: ${({ theme }) => RGBA(theme.color.red, 0.08)};
+    background-color: ${({ theme }) => theme.adaptiveColors.yellow1};
   }
 
   .rdg-cell-warning {
@@ -134,7 +133,7 @@ export const SpreadsheetImportTable = <Data,>({
   return (
     <StyledDataGrid
       direction={rtl ? 'rtl' : 'ltr'}
-      rowHeight={52}
+      rowHeight={40}
       {...{
         className: `${className || ''} ${themeClassName}`,
         columns,

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

@@ -1,14 +1,17 @@
 import styled from '@emotion/styled';
 
 import { Modal } from '@/ui/layout/modal/components/Modal';
-import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
 import { CircularProgressBar } from 'twenty-ui/feedback';
 import { MainButton } from 'twenty-ui/input';
+import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
 
 const StyledFooter = styled(Modal.Footer)`
+  border-top: 1px solid ${({ theme }) => theme.border.color.medium};
+  box-shadow: ${({ theme }) => theme.boxShadow.strong};
   gap: ${({ theme }) => theme.spacing(2.5)};
   justify-content: space-between;
-  padding: ${({ theme }) => theme.spacing(6)} ${({ theme }) => theme.spacing(8)};
+  padding: ${({ theme }) => theme.spacing(4)};
+  height: auto;
 `;
 
 type StepNavigationButtonProps = {
@@ -16,6 +19,7 @@ type StepNavigationButtonProps = {
   title: string;
   isLoading?: boolean;
   onBack?: () => void;
+  isNextDisabled?: boolean;
 };
 
 export const StepNavigationButton = ({
@@ -23,6 +27,7 @@ export const StepNavigationButton = ({
   title,
   isLoading,
   onBack,
+  isNextDisabled = false,
 }: StepNavigationButtonProps) => {
   return (
     <StyledFooter>
@@ -39,6 +44,7 @@ export const StepNavigationButton = ({
         title={title}
         onClick={!isLoading ? onClick : undefined}
         variant="primary"
+        disabled={isNextDisabled}
       />
     </StyledFooter>
   );