status-im
/
nimbus-gui
mirror of https://github.com/status-im/nimbus-gui.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Clear code and add figma texts

This commit is contained in:
Hristo Nedelkov 2023-08-23 14:57:41 +03:00
parent 4ac05ea697
commit 0ac63701e3
1 changed files with 19 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/pages/ValidatorOnboarding/Stepper.tsx
View File

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