fixed step border, disabled steps selection for passed steps

Author: Artem

packages/atlas/src/components/_referrals/Step/Step.styles.ts

@@ -14,7 +14,7 @@ const loading = keyframes`
   }
 `
 
-export const StyledStepContainer = styled(FlexBox)<{ isSelected: boolean }>`
+export const StyledStepContainer = styled(FlexBox)<{ isSelected: boolean; disabled: boolean }>`
   border-radius: calc(1.5 * ${cVar('radiusLarge')});
   padding: ${sizes(2.5)} ${sizes(3)};
   align-items: center;
@@ -28,12 +28,15 @@ export const StyledStepContainer = styled(FlexBox)<{ isSelected: boolean }>`
   flex: 1;
   background-size: 200% 100%;
 
-  &:hover {
-    border: 1px solid ${cVar('colorCoreNeutral600Lighten')};
-    opacity: 1;
-    box-sizing: border-box;
-    cursor: pointer;
-  }
+  ${({ disabled }) =>
+    !disabled &&
+    css`
+      &:hover {
+        box-shadow: 0 0 0 1px ${cVar('colorCoreNeutral600Lighten')};
+        opacity: 1;
+        cursor: pointer;
+      }
+    `}
 
   ${media.md} {
     padding: ${sizes(6)};

packages/atlas/src/components/_referrals/Step/Step.tsx

@@ -6,10 +6,17 @@ type StepProps = {
   isSelected: boolean
   title: string
   onClick: (idx: number) => void
+  disabled: boolean
 }
-export const Step = ({ isSelected, stepIdx, title, onClick }: StepProps) => {
+export const Step = ({ isSelected, stepIdx, title, onClick, disabled }: StepProps) => {
   return (
-    <StyledStepContainer gap={6} isSelected={isSelected} flow="row" onClick={() => onClick(stepIdx)}>
+    <StyledStepContainer
+      gap={6}
+      disabled={disabled}
+      isSelected={isSelected}
+      flow="row"
+      onClick={() => onClick(stepIdx)}
+    >
       <StyledStepNumberWrapper justifyContent="center">
         <Text as="div" variant="t300">
           {stepIdx}

packages/atlas/src/views/global/ReferralsView/sections/ReferralSteps/ReferralSteps.tsx

@@ -114,7 +114,11 @@ export const ReferralSteps = () => {
                 stepIdx={idx + 1}
                 isSelected={selectedStep === idx}
                 title={step}
-                onClick={() => setSelectedStep(idx)}
+                disabled={idx < minStep}
+                onClick={() => {
+                  if (idx < minStep) return
+                  setSelectedStep(idx)
+                }}
               />
             ))}
           </StyledStepsContainer>