fix(deposit stepper): fix Deposit Stepper

src/pages/LogsPage/LogsTerminal.tsx

@@ -5,6 +5,7 @@ import TerminalRow from './TerminalRow'
 import { simulateLogs } from '../../constants'
 import { LogType } from '../../types'
 import { useDispatch } from 'react-redux'
+
 import {
   incrementErrorLogs,
   incrementNoticeCount,

src/pages/ValidatorManagement/ManageValidator/DepositStatus.tsx

@@ -51,7 +51,7 @@ const DepositStatus = () => {
           </Text>
         </YStack>
       </XStack>
-      <DepositStepper activeStep={0}></DepositStepper>
+      <DepositStepper activeStep={1}></DepositStepper>
     </XStack>
   )
 }

src/pages/ValidatorManagement/ManageValidator/DepositStepper.module.css

@@ -4,64 +4,21 @@
 div[class*='StepMain-'] {
   align-items: start;
 }
-div[class*='LabelContainer-'] span[class*='Label-'] {
-  text-align: initial;
-  text-transform: uppercase;
-  font-family: 'Inter', sans-serif;
-}
+
 div[class*='ConnectorContainer-'] {
-  right: unset;
-  left: calc(-100% + 28px);
   width: 100%;
 }
 span[class*='Connector-'] {
   position: relative;
   z-index: -1;
 }
-.custom-step.StepMain--active,
-.custom-step.StepMain--completed {
-  background-color: #2a4cf4;
-}
 
 .custom-step::before {
   content: '';
   display: block;
   position: absolute;
-  width: 20px;
-  height: 20px;
-  border: 2px solid #e0e0e0;
+  width: 21px;
+  height: 21px;
+  border: 3px solid #e0e0e0;
   border-radius: 50%;
 }
-
-.custom-step.StepMain--active::before,
-.custom-step.StepMain--completed::before {
-  border-color: #2a4cf4;
-}
-
-.custom-step.StepMain--active::after {
-  content: '';
-  display: block;
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  background-color: #2a4cf4;
-  border-radius: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.custom-step::after {
-  content: attr(data-subtitle);
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 9px;
-  font-size: 12px;
-  font-family: 'Inter', sans-serif;
-  color: #a2a9b0;
-  width: max-content;
-}
-
-@media (max-width: 410px) {
-  .custom-step::after {
-    font-size: 10px;
-  }
-}

src/pages/ValidatorManagement/ManageValidator/DepositStepper.tsx

@@ -12,6 +12,8 @@ const DepositStepper = ({ activeStep }: DepositStepperProps) => {
   const windowSize = useWindowSize()
 
   const stepToUrlMap = [
+    '/validator-management/',
+    '/validator-management/',
     '/validator-management/',
     // fix paths
   ]
@@ -71,10 +73,8 @@ const DepositStepper = ({ activeStep }: DepositStepperProps) => {
       styleConfig={stepStyle}
       connectorStyleConfig={customConnectorStyle}
       style={{
-        fontSize: '14px',
         zIndex: 1,
-        width: '40%',
-        height: 'fit-content',
+        width: '50%',
         padding: 0,
         paddingBottom: '10px',
       }}
@@ -82,6 +82,13 @@ const DepositStepper = ({ activeStep }: DepositStepperProps) => {
       {DepositStatusSteps.filter((_, index) => isStepVisible(index)).map(
         step => {
           const originalIndex = DepositStatusSteps.indexOf(step)
+          const isActive = originalIndex <= activeStep
+
+          const customStepStyle = {
+            backgroundColor: isActive ? '#2A4CF4' : '#E0E0E0',
+            border: '4px solid #fff',
+          }
+
           return (
             <Step
               key={originalIndex}
@@ -90,11 +97,7 @@ const DepositStepper = ({ activeStep }: DepositStepperProps) => {
               onClick={() => changeStepOnClickHandler(originalIndex)}
               completed={activeStep > originalIndex - 1}
               data-step={step.label}
-              style={
-                originalIndex === activeStep
-                  ? { backgroundColor: stepStyle.currentBgColor }
-                  : {}
-              }
+              style={customStepStyle} // Apply custom inline style
             />
           )
         },
@@ -110,6 +113,7 @@ const stepStyle = {
   inactiveBorderWidth: '2px',
   // For active dots:
   activeBgColor: '#FFFFFF',
+  activeTextColor: '',
   activeBorderColor: '#2A4CF4',
   activeBorderWidth: '2px',
   // For completed dots:
@@ -117,8 +121,10 @@ const stepStyle = {
   activeTextColor: '#ffffff',
   completedTextColor: '#ffffff',
   inactiveTextColor: '#000000',
-  size: '13px',
+  size: '22px',
+
   circleFontSize: '0px',
+
   labelFontSize: '11px',
   borderRadius: '50%',
   fontWeight: 700,
@@ -126,7 +132,8 @@ const stepStyle = {
 }
 
 const customConnectorStyle = {
-  size: '2px',
+  size: '3px',
+
   activeColor: '#2A4CF4',
   disabledColor: '#bdbdbd',
   completedColor: '#a10308',