diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css index 5828631c..67ebfa23 100644 --- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css +++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css @@ -1,7 +1,22 @@ .custom-step { background-color: #ffffff; } - +div[class*="StepMain-"] { + align-items: start; +} +div[class*="LabelContainer-"] span[class*="Label-"] { + text-align: initial; + text-transform: uppercase; +} +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; @@ -37,32 +52,8 @@ content: attr(data-subtitle); position: absolute; top: calc(100% + 4px); + left: 8px; font-size: 12px; color: #A2A9B0; - background: transparent; - border: none; -} - -[data-step="Overview"]::after { - left: 35%; -} - -[data-step="Advisories"]::after { - left: 30%; -} - -[data-step="Client Setup"]::after { - left: 32%; -} - -[data-step="Validator Setup"]::after { - left: 25%; -} - -[data-step="Key Generation"]::after { - left: 24.5%; -} - -[data-step="Activation"]::after { - left: 33%; + width: max-content; } \ No newline at end of file diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx index 8aa130ce..c82c721a 100644 --- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx +++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx @@ -22,7 +22,14 @@ const FormStepper = ({ activeStep, changeActiveStep }: FormStepperProps) => { nonLinear={true} styleConfig={stepStyle} connectorStyleConfig={customConnectorStyle} - style={{ fontSize: '14px', zIndex: 999, width: '100%', padding: 0, marginBottom: '2rem' }} + style={{ + fontSize: '14px', + zIndex: 999, + width: '100%', + padding: 0, + marginBottom: '3rem', + fontFamily: 'Inter', + }} > {steps.map((step, index) => (