Improve csv import (#5753)

This is a small PR to improve the design of our CSV import.

I noticed the back button that was implemented in a recent PR #5625 was
broken and would need to be fixed (e.g. try to come back to the very
first upload step from the sheet selection step). cc @shashankvish0010
if you want to give a stab at fixing your PR that'd be amazing, thanks!

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

@@ -3,35 +3,40 @@ import styled from '@emotion/styled';
 import { CircularProgressBar } from '@/ui/feedback/progress-bar/components/CircularProgressBar';
 import { MainButton } from '@/ui/input/button/components/MainButton';
 import { Modal } from '@/ui/layout/modal/components/Modal';
+import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
 
 const StyledFooter = styled(Modal.Footer)`
-  height: 60px;
-  justify-content: center;
-  padding: 0px;
-  padding-left: ${({ theme }) => theme.spacing(30)};
-  padding-right: ${({ theme }) => theme.spacing(30)};
-`;
-
-const StyledButton = styled(MainButton)`
-  width: 200px;
+  gap: ${({ theme }) => theme.spacing(2)};
+  justify-content: space-between;
 `;
 
 type StepNavigationButtonProps = {
   onClick: () => void;
   title: string;
   isLoading?: boolean;
+  onBack?: () => void;
 };
 
 export const StepNavigationButton = ({
   onClick,
   title,
   isLoading,
+  onBack,
 }: StepNavigationButtonProps) => (
   <StyledFooter>
-    <StyledButton
+    {!isUndefinedOrNull(onBack) && (
+      <MainButton
+        Icon={isLoading ? CircularProgressBar : undefined}
+        title="Back"
+        onClick={!isLoading ? onBack : undefined}
+        variant="secondary"
+      />
+    )}
+    <MainButton
       Icon={isLoading ? CircularProgressBar : undefined}
       title={title}
       onClick={!isLoading ? onClick : undefined}
+      variant="primary"
     />
   </StyledFooter>
 );

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

@@ -287,11 +287,11 @@ export const MatchColumnsStep = <T extends string>({
         />
       </StyledContent>
       <StepNavigationButton
+        onBack={onBack}
         onClick={handleOnContinue}
         isLoading={isLoading}
-        title="Next"
+        title="Continue"
       />
-      <StepNavigationButton onClick={onBack} title="Back" />
     </>
   );
 };

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

@@ -57,10 +57,10 @@ export const SelectHeaderStep = ({
       </Modal.Content>
       <StepNavigationButton
         onClick={handleContinue}
-        title="Next"
+        onBack={onBack}
+        title="Continue"
         isLoading={isLoading}
       />
-      <StepNavigationButton onClick={onBack} title="Back" />
     </>
   );
 };

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

@@ -55,17 +55,17 @@ export const SelectSheetStep = ({
         <StyledRadioContainer>
           <RadioGroup onValueChange={(value) => setValue(value)} value={value}>
             {sheetNames.map((sheetName) => (
-              <Radio value={sheetName} key={sheetName} />
+              <Radio value={sheetName} key={sheetName} label={sheetName} />
             ))}
           </RadioGroup>
         </StyledRadioContainer>
       </StyledContent>
       <StepNavigationButton
         onClick={() => handleOnContinue(value)}
+        onBack={onBack}
         isLoading={isLoading}
-        title="Next"
+        title="Continue"
       />
-      <StepNavigationButton onClick={onBack} title="Back" />
     </>
   );
 };

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

@@ -240,8 +240,11 @@ export const ValidationStep = <T extends string>({
           />
         </StyledScrollContainer>
       </StyledContent>
-      <StepNavigationButton onClick={onContinue} title="Confirm" />
-      <StepNavigationButton onClick={onBack} title="Back" />
+      <StepNavigationButton
+        onClick={onContinue}
+        onBack={onBack}
+        title="Confirm"
+      />
     </>
   );
 };

packages/twenty-front/src/modules/ui/input/button/components/MainButton.tsx

@@ -3,13 +3,13 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { IconComponent } from 'twenty-ui';
 
-type Variant = 'primary' | 'secondary';
+export type MainButtonVariant = 'primary' | 'secondary';
 
 type Props = {
   title: string;
   fullWidth?: boolean;
   width?: number;
-  variant?: Variant;
+  variant?: MainButtonVariant;
   soon?: boolean;
 } & React.ComponentProps<'button'>;