fix: incorporated review comments

deriv-com · Jan 8, 2024 · b94df51 · b94df51
1 parent a0b11c4
commit b94df51
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 19 deletions.
diff --git a/packages/account-v2/src/components/form-progress/form-progress.classnames.ts b/packages/account-v2/src/components/form-progress/form-progress.classnames.ts
@@ -27,11 +27,11 @@ export const stepperVariants = cva(stepperBaseStyles, {
 });
 
 export const desktopStyle = {
-    stepper: 'lg:flex lg:w-fit lg:items-end lg:gap-800',
+    stepper: 'lg:flex lg:w-fit lg:items-end lg:gap-gap-lg',
     connector:
         'lg:h-2000 lg:w-100 lg:bg-[length:100%_200%] lg:bg-bottom lg:bg-gradient-to-b lg:aria-[current=true]:bg-top',
 };
 
 export const mobileStyle = {
-    connector: 'h-100 bg-[length:200%_100%] bg-right bg-gradient-to-r aria-[current=true]:bg-left w-auto',
+    connector: 'bg-[length:200%_100%] bg-right bg-gradient-to-r aria-[current=true]:bg-left w-auto h-general-2xs',
 };
diff --git a/packages/account-v2/src/components/form-progress/index.tsx b/packages/account-v2/src/components/form-progress/index.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useBreakpoint } from '@deriv/quill-design';
-import Stepper, { TStep } from './stepper';
 import StepConnector from './step-connector';
+import Stepper, { TStep } from './stepper';
 
 type TFormProgressProps = {
-    steps: Array<TStep>;
-    activeStep: number; // [TODO]:Mock - Enable once isActive comes from Modal
+    activeStep: number;
+    steps: TStep[]; // [TODO]:Mock - Enable once isActive comes from Modal
 };
 
 /**
@@ -14,7 +14,7 @@ type TFormProgressProps = {
  * @returns React Component
  */
 export const FormProgress = ({ steps = [] }: TFormProgressProps) => {
-    const [activeStep, setActiveStep] = React.useState(0); // [TODO]:Mock - remove once isActive comes from Modal
+    const [activeStep, setActiveStep] = useState(0); // [TODO]:Mock - remove once isActive comes from Modal
 
     const { isMobile } = useBreakpoint();
 
@@ -31,7 +31,7 @@ export const FormProgress = ({ steps = [] }: TFormProgressProps) => {
                 <React.Fragment>
                     {' '}
                     {/* [TODO]:Mock - remove Fragment once isActive comes from Modal*/}
-                    <div className='grid grid-flow-col gap-75'>
+                    <div className='grid grid-flow-col gap-gap-2xs'>
                         {steps.map((step, index) => (
                             <StepConnector isActive={index <= activeStep} key={step.title} />
                         ))}
@@ -50,13 +50,13 @@ export const FormProgress = ({ steps = [] }: TFormProgressProps) => {
                 <React.Fragment>
                     {steps.map((step, index) => (
                         <Stepper
-                            key={step.title}
-                            step={step}
-                            stepCount={index}
                             isActive={index <= activeStep}
+                            key={step.title}
                             onClick={() => {
                                 if (steps[index - 1]?.isFilled || index === 0) setActiveStep(index);
                             }}
+                            step={step}
+                            stepCount={index}
                         />
                     ))}
                 </React.Fragment>

diff --git a/packages/account-v2/src/components/form-progress/stepper.tsx b/packages/account-v2/src/components/form-progress/stepper.tsx
@@ -1,27 +1,27 @@
 import React from 'react';
-import { Text, qtMerge } from '@deriv/quill-design';
+import { qtMerge, Text } from '@deriv/quill-design';
 import { StandaloneCheckBoldIcon } from '@deriv/quill-icons';
+import { desktopStyle, stepperVariants } from './form-progress.classnames';
 import StepConnector from './step-connector';
-import { stepperVariants, desktopStyle } from './form-progress.classnames';
 
-export type TStep = { title: string; isFilled: boolean };
+export type TStep = { isFilled: boolean; title: string };
 
 type TStepperProps = {
     isActive: boolean;
+    onClick: React.MouseEventHandler<HTMLSpanElement>;
     step: TStep;
-    stepCount: number;
-    onClick: React.MouseEventHandler<HTMLSpanElement>; // [TODO]:Mock - remove once isActive comes from Modal
+    stepCount: number; // [TODO]:Mock - remove once isActive comes from Modal
 };
 
-const Stepper = ({ isActive, step, stepCount, onClick }: TStepperProps) => (
-    <div className={qtMerge('group relative justify-center', desktopStyle.stepper)} aria-current={isActive}>
+const Stepper = ({ isActive, onClick, step, stepCount }: TStepperProps) => (
+    <div aria-current={isActive} className={qtMerge('group relative justify-center', desktopStyle.stepper)}>
         <div className='flex flex-col items-center'>
             {stepCount !== 0 && <StepConnector isActive={isActive} />}
             <span className={stepperVariants({ isActive, isFilled: step.isFilled })}>
                 {step.isFilled ? <StandaloneCheckBoldIcon fill={isActive ? '#fff' : '#000'} /> : null}
             </span>
         </div>
-        <Text bold={isActive} size='sm' className='relative top-200' onClick={onClick}>
+        <Text bold={isActive} className='relative top-200' onClick={onClick} size='sm'>
             {step.title}
         </Text>
     </div>