From 0ac63701e3caf871b9157a6bda8c9437795cb8b1 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Wed, 23 Aug 2023 14:57:41 +0300
Subject: [PATCH] Clear code and add figma texts

---
 src/pages/ValidatorOnboarding/Stepper.tsx | 40 +++++++++++------------
 1 file changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/Stepper.tsx b/src/pages/ValidatorOnboarding/Stepper.tsx
index 7e8d8b15..8cb750ec 100644
--- a/src/pages/ValidatorOnboarding/Stepper.tsx
+++ b/src/pages/ValidatorOnboarding/Stepper.tsx
@@ -1,12 +1,12 @@
 import './StepperStyles.css'
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { Stepper, Step } from 'react-form-stepper'
 
-const FormStepper: React.FC = () => {
+const FormStepper = () => {
   const [activeStep, setActiveStep] = useState<number>(0)
 
   return (
-    <div>
+    <div style={{ zIndex: 999 }}>
       <Stepper
         activeStep={activeStep}
         nonLinear={true}
@@ -22,24 +22,24 @@ const FormStepper: React.FC = () => {
         />
         <Step
           className="custom-step"
-          label="ADVISORIES"
+          label="Advicsories"
           onClick={() => setActiveStep(1)}
           completed={activeStep > 0}
         />
         <Step
-          label="ADVISORIES"
+          label="Validator Setup"
           className="custom-step"
           onClick={() => setActiveStep(2)}
           completed={activeStep > 1}
         />
         <Step
-          label="ADVISORIES"
+          label="Key Generation"
           className="custom-step"
           onClick={() => setActiveStep(3)}
           completed={activeStep > 2}
         />
         <Step
-          label="ADVISORIES"
+          label="Activation"
           className="custom-step"
           onClick={() => setActiveStep(4)}
           completed={activeStep > 3}
@@ -51,33 +51,31 @@ const FormStepper: React.FC = () => {
 const stepStyle = {
   // For default dots:
   inactiveBgColor: '#FFFFFF',
-  inactiveBorderColor: '#E0E0E0', // added this for border color
-  inactiveBorderWidth: '2px', // added this for border width
-
+  inactiveBorderColor: '#E0E0E0',
+  inactiveBorderWidth: '2px',
   // For active dots:
   activeBgColor: '#FFFFFF',
-  activeBorderColor: '#2A4CF4', // added this for border color
-  activeBorderWidth: '2px', // added this for border width
-
+  activeBorderColor: '#2A4CF4',
+  activeBorderWidth: '2px',
   // For completed dots:
   completedBgColor: '#2A4CF4',
 
   activeTextColor: '#ffffff',
   completedTextColor: '#ffffff',
-  inactiveTextColor: '#000000', // assuming you want black text for inactive steps
-  size: '20px', // Width & height of the circle dot
-  circleFontSize: '10px', // This makes the numbers in the circle smaller
-  labelFontSize: '0.875rem',
+  inactiveTextColor: '#000000',
+  size: '20px',
+  circleFontSize: '10px',
+  labelFontSize: '14px',
   borderRadius: '50%',
-  fontWeight: 500,
+  fontWeight: 700,
 }
 
 const customConnectorStyle = {
   size: '2px',
   activeColor: '#2A4CF4',
-  disabledColor: '#bdbdbd', // color when a step is disabled
-  completedColor: '#a10308', // color for completed steps
-  style: 'solid', // style of the connector line
+  disabledColor: '#bdbdbd',
+  completedColor: '#a10308',
+  style: 'solid',
 }
 
 export default FormStepper