status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-01-20 16:30:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: style stepper

Browse Source
This commit is contained in:
RadoslavDimchev 2023-08-24 10:27:06 +03:00
parent bf4c721c9b
commit 29c8aec33f
2 changed files with 38 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,46 +6,44 @@ const FormStepper = () => {
const [activeStep, setActiveStep] = useState<number>(0)
return (
<div style={{ zIndex: 999 }}>
<Stepper
activeStep={activeStep}
nonLinear={true}
styleConfig={stepStyle}
connectorStyleConfig={customConnectorStyle}
style={{ fontSize: '14px' }}
>
<Step
className="custom-step"
label={'Overview'}
onClick={() => setActiveStep(0)}
completed={activeStep >= 0}
/>
<Step
className="custom-step"
label="Advicsories"
onClick={() => setActiveStep(1)}
completed={activeStep > 0}
/>
<Step
label="Validator Setup"
className="custom-step"
onClick={() => setActiveStep(2)}
completed={activeStep > 1}
/>
<Step
label="Key Generation"
className="custom-step"
onClick={() => setActiveStep(3)}
completed={activeStep > 2}
/>
<Step
label="Activation"
className="custom-step"
onClick={() => setActiveStep(4)}
completed={activeStep > 3}
/>
</Stepper>
</div>
<Stepper
activeStep={activeStep}
nonLinear={true}
styleConfig={stepStyle}
connectorStyleConfig={customConnectorStyle}
style={{ fontSize: '14px', zIndex: 999, width: '100%', padding: 0, marginBottom: '1rem' }}
>
<Step
className="custom-step"
label={'Overview'}
onClick={() => setActiveStep(0)}
completed={activeStep >= 0}
/>
<Step
className="custom-step"
label="Advicsories"
onClick={() => setActiveStep(1)}
completed={activeStep > 0}
/>
<Step
label="Validator Setup"
className="custom-step"
onClick={() => setActiveStep(2)}
completed={activeStep > 1}
/>
<Step
label="Key Generation"
className="custom-step"
onClick={() => setActiveStep(3)}
completed={activeStep > 2}
/>
<Step
label="Activation"
className="custom-step"
onClick={() => setActiveStep(4)}
completed={activeStep > 3}
/>
</Stepper>
)
}
const stepStyle = {
@ -59,7 +57,6 @@ const stepStyle = {
activeBorderWidth: '2px',
// For completed dots:
completedBgColor: '#2A4CF4',
activeTextColor: '#ffffff',
completedTextColor: '#ffffff',
inactiveTextColor: '#000000',

2
src/pages/ValidatorOnboarding/StepperStyles.css
View File

@ -30,7 +30,5 @@
height: 20px;
background-color: #2a4cf4;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}