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)
2025-06-10 16:49:37 +02:00
parent a68895189c
commit a15318537f
17 changed files with 200 additions and 157 deletions
--- a/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx
@ -40,11 +40,13 @@ const StyledModalDiv = styled(motion.div)<{
    if (isMobile) return theme.modal.size.fullscreen;
    switch (size) {
      case 'small':
-        return theme.modal.size.sm;
+        return theme.modal.size.sm.width;
      case 'medium':
-        return theme.modal.size.md;
+        return theme.modal.size.md.width;
      case 'large':
-        return theme.modal.size.lg;
+        return theme.modal.size.lg.width;
+      case 'extraLarge':
+        return theme.modal.size.xl.width;
      default:
        return 'auto';
    }
@ -64,8 +66,16 @@ const StyledModalDiv = styled(motion.div)<{
        return 'auto';
    }
  }};
-  height: ${({ isMobile, theme }) =>
-    isMobile ? theme.modal.size.fullscreen : 'auto'};
+  height: ${({ isMobile, theme, size }) => {
+    if (isMobile) return theme.modal.size.fullscreen.height;
+
+    switch (size) {
+      case 'extraLarge':
+        return theme.modal.size.xl.height;
+      default:
+        return 'auto';
+    }
+  }};
  max-height: ${({ isMobile }) => (isMobile ? 'none' : '90dvh')};
 `;

@ -165,7 +175,7 @@ const ModalFooter = ({ children, className }: ModalFooterProps) => (
  <StyledFooter className={className}>{children}</StyledFooter>
 );

-export type ModalSize = 'small' | 'medium' | 'large';
+export type ModalSize = 'small' | 'medium' | 'large' | 'extraLarge';
 export type ModalPadding = 'none' | 'small' | 'medium' | 'large';
 export type ModalVariants = 'primary' | 'secondary' | 'tertiary';

--- a/packages/twenty-front/src/modules/ui/navigation/step-bar/components/Step.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/step-bar/components/Step.tsx
@ -15,15 +15,15 @@ const StyledContainer = styled.div<{ isLast: boolean }>`
  }
 `;

-const StyledStepCircle = styled(motion.div)<{ isNextStep: boolean }>`
+const StyledStepCircle = styled(motion.div)<{ isInNextSteps: boolean }>`
  align-items: center;
  border-radius: 50%;
  border-style: solid;
  border-width: 1px;
-  border-color: ${({ theme, isNextStep }) =>
-    isNextStep
-      ? theme.border.color.inverted
-      : theme.border.color.medium} !important;
+  border-color: ${({ theme, isInNextSteps }) =>
+    isInNextSteps
+      ? theme.border.color.medium
+      : theme.border.color.inverted} !important;
  display: flex;
  flex-basis: auto;
  flex-shrink: 0;
@ -34,18 +34,16 @@ const StyledStepCircle = styled(motion.div)<{ isNextStep: boolean }>`
  width: 20px;
 `;

-const StyledStepIndex = styled.span<{ isNextStep: boolean }>`
-  color: ${({ theme, isNextStep }) =>
-    isNextStep ? theme.font.color.secondary : theme.font.color.tertiary};
+const StyledStepIndex = styled.span<{ isCurrentStep: boolean }>`
+  color: ${({ theme, isCurrentStep }) =>
+    isCurrentStep ? theme.font.color.inverted : theme.font.color.tertiary};
  font-size: ${({ theme }) => theme.font.size.md};
  font-weight: ${({ theme }) => theme.font.weight.medium};
 `;

-const StyledStepLabel = styled.span<{ isActive: boolean; isNextStep: boolean }>`
-  color: ${({ theme, isActive, isNextStep }) =>
-    isActive || isNextStep
-      ? theme.font.color.primary
-      : theme.font.color.tertiary};
+const StyledStepLabel = styled.span<{ isInNextSteps: boolean }>`
+  color: ${({ theme, isInNextSteps }) =>
+    isInNextSteps ? theme.font.color.tertiary : theme.font.color.primary};
  font-size: ${({ theme }) => theme.font.size.md};
  font-weight: ${({ theme }) => theme.font.weight.semiBold};
  margin-left: ${({ theme }) => theme.spacing(2)};
@ -62,7 +60,6 @@ const StyledStepLine = styled(motion.div)`

 export type StepProps = React.PropsWithChildren &
  React.ComponentProps<'div'> & {
-    isActive?: boolean;
    isLast?: boolean;
    index?: number;
    label: string;
@ -70,7 +67,6 @@ export type StepProps = React.PropsWithChildren &
  };

 export const Step = ({
-  isActive = false,
  isLast = false,
  index = 0,
  label,
@ -80,59 +76,65 @@ export const Step = ({
  const theme = useTheme();
  const isMobile = useIsMobile();

-  const variantsCircle = {
-    active: {
-      backgroundColor: theme.font.color.primary,
-      borderColor: theme.font.color.primary,
-      transition: { duration: 0.5 },
-    },
-    inactive: {
-      backgroundColor: theme.background.transparent.lighter,
-      borderColor: theme.border.color.medium,
-      transition: { duration: 0.5 },
-    },
-  };
-
  const variantsLine = {
-    active: {
+    previous: {
      backgroundColor: theme.font.color.primary,
      transition: { duration: 0.5 },
    },
-    inactive: {
+    next: {
      backgroundColor: theme.border.color.medium,
      transition: { duration: 0.5 },
    },
  };

-  const isNextStep = activeStep + 1 === index;
+  const variantsCircle = {
+    current: {
+      backgroundColor: theme.background.invertedPrimary,
+      transition: { duration: 0.5 },
+    },
+    previous: {
+      backgroundColor: theme.background.secondary,
+      transition: { duration: 0.5 },
+    },
+    next: {
+      backgroundColor: theme.background.tertiary,
+      transition: { duration: 0.5 },
+    },
+  };
+
+  const isInPreviousSteps = activeStep > index;
+  const isCurrentStep = activeStep === index;
+  const isInNextSteps = activeStep < index;

  return (
    <StyledContainer isLast={isLast}>
      <StyledStepCircle
        variants={variantsCircle}
-        animate={isActive ? 'active' : 'inactive'}
-        isNextStep={isNextStep}
+        animate={
+          isCurrentStep ? 'current' : isInPreviousSteps ? 'previous' : 'next'
+        }
+        isInNextSteps={isInNextSteps}
      >
-        {isActive && (
+        {isInPreviousSteps && (
          <AnimatedCheckmark
-            isAnimating={isActive}
-            color={theme.grayScale.gray0}
+            isAnimating={isInPreviousSteps}
+            color={theme.grayScale.gray60}
          />
        )}
-        {!isActive && (
-          <StyledStepIndex isNextStep={isNextStep}>{index + 1}</StyledStepIndex>
+        {!isInPreviousSteps && (
+          <StyledStepIndex isCurrentStep={isCurrentStep}>
+            {index + 1}
+          </StyledStepIndex>
        )}
      </StyledStepCircle>
-      <StyledStepLabel isNextStep={isNextStep} isActive={isActive}>
-        {label}
-      </StyledStepLabel>
+      <StyledStepLabel isInNextSteps={isInNextSteps}>{label}</StyledStepLabel>
      {!isLast && !isMobile && (
        <StyledStepLine
          variants={variantsLine}
-          animate={isActive ? 'active' : 'inactive'}
+          animate={isInPreviousSteps ? 'previous' : 'next'}
        />
      )}
-      {isActive && children}
+      {(isInPreviousSteps || isCurrentStep) && children}
    </StyledContainer>
  );
 };
--- a/packages/twenty-front/src/modules/ui/navigation/step-bar/components/StepBar.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/step-bar/components/StepBar.tsx
@ -1,10 +1,10 @@
-import React from 'react';
 import styled from '@emotion/styled';
+import React from 'react';

 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';

-import { Step, StepProps } from './Step';
 import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
+import { Step, StepProps } from './Step';

 const StyledContainer = styled.div`
  display: flex;
@ -48,8 +48,8 @@ export const StepBar = ({ activeStep, children }: StepBarProps) => {

        return React.cloneElement<StepProps>(child as any, {
          index,
-          isActive: index <= activeStep,
          isLast: index === React.Children.count(children) - 1,
+          activeStep,
        });
      })}
    </StyledContainer>