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>
 );