Style stepper

src/pages/ValidatorOnboarding/Stepper.tsx

@@ -1,4 +1,4 @@
-import { Text } from '@status-im/components'
+import './StepperStyles.css'
 import React, { useState } from 'react'
 import { Stepper, Step } from 'react-form-stepper'
 
@@ -6,7 +6,7 @@ const FormStepper: React.FC = () => {
   const [activeStep, setActiveStep] = useState<number>(0)
 
   return (
-    <div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
+    <div style={{ width: '100%', justifyContent: 'center' }}>
       <Stepper
         activeStep={activeStep}
         nonLinear={true}
@@ -14,36 +14,69 @@ const FormStepper: React.FC = () => {
         connectorStyleConfig={customConnectorStyle}
         style={{ fontSize: '14px' }}
       >
-        <Step label={'Overview'} onClick={() => setActiveStep(0)} completed={activeStep >= 0} />
+        <Step
-        <Step label="ADVISORIES" onClick={() => setActiveStep(1)} completed={activeStep > 0} />
+          className="custom-step"
-        <Step label="ADVISORIES" onClick={() => setActiveStep(2)} completed={activeStep > 1} />
+          label={'Overview'}
-        <Step label="ADVISORIES" onClick={() => setActiveStep(3)} completed={activeStep > 2} />
+          onClick={() => setActiveStep(0)}
-        <Step label="ADVISORIES" onClick={() => setActiveStep(4)} completed={activeStep > 3} />
+          completed={activeStep >= 0}
+        />
+        <Step
+          className="custom-step"
+          label="ADVISORIES"
+          onClick={() => setActiveStep(1)}
+          completed={activeStep > 0}
+        />
+        <Step
+          label="ADVISORIES"
+          className="custom-step"
+          onClick={() => setActiveStep(2)}
+          completed={activeStep > 1}
+        />
+        <Step
+          label="ADVISORIES"
+          className="custom-step"
+          onClick={() => setActiveStep(3)}
+          completed={activeStep > 2}
+        />
+        <Step
+          label="ADVISORIES"
+          className="custom-step"
+          onClick={() => setActiveStep(4)}
+          completed={activeStep > 3}
+        />
       </Stepper>
     </div>
   )
 }
-
 const stepStyle = {
-  activeBgColor: '#2A4CF4',
+  // For default dots:
-  completedBgColor: '#a10308',
+  inactiveBgColor: '#FFFFFF',
-  inactiveBgColor: '#e0e0e0',
+  inactiveBorderColor: '#E0E0E0', // added this for border color
+  inactiveBorderWidth: '2px', // added this for border width
+
+  // For active dots:
+  activeBgColor: '#FFFFFF',
+  activeBorderColor: '#2A4CF4', // added this for border color
+  activeBorderWidth: '2px', // added this for border width
+
+  // For completed dots:
+  completedBgColor: '#2A4CF4',
+
   activeTextColor: '#ffffff',
   completedTextColor: '#ffffff',
   inactiveTextColor: '#000000', // assuming you want black text for inactive steps
-  size: '2em',
+  size: '20px', // Width & height of the circle dot
-  circleFontSize: '1rem',
+  circleFontSize: '10px', // This makes the numbers in the circle smaller
   labelFontSize: '0.875rem',
   borderRadius: '50%',
   fontWeight: 500,
 }
 
 const customConnectorStyle = {
+  size: '2px',
   activeColor: '#2A4CF4',
   disabledColor: '#bdbdbd', // color when a step is disabled
   completedColor: '#a10308', // color for completed steps
-  backgroundColor: '#DDE1E6',
-  height: '2px',
   style: 'solid', // style of the connector line
 }
 

src/pages/ValidatorOnboarding/StepperStyles.css

@@ -0,0 +1,36 @@
+.custom-step {
+  background-color: #ffffff;
+}
+
+.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;
+  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%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}

src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx

@@ -19,10 +19,11 @@ function ValidatorOnboarding() {
       <PageWrapperShadow rightImageSrc="./background-images/landing-page-bg.png">
         <YStack className="landing-page">
           <YStack style={{ width: '100%', margin: '30vh 0 4vh' }}>
-            <Title>Light and performant clients, for all Ethereum validators.</Title>
+            <Text size={19} weight={'semibold'}>
+              Create Nimbus Validator
+            </Text>
             <Text size={15} weight="regular">
-              <strong>Nimbus Nodes</strong> allows you to take control and ownership of the services
+              Earn Rewards for securing the Ethereum Network
-              you wish to run in a completely trustless and decentralized manner.
             </Text>
           </YStack>
           <FormStepper />