diff --git a/src/pages/LogsPage/LogsTerminal.tsx b/src/pages/LogsPage/LogsTerminal.tsx index 6c254fa4..63b42abd 100644 --- a/src/pages/LogsPage/LogsTerminal.tsx +++ b/src/pages/LogsPage/LogsTerminal.tsx @@ -5,6 +5,7 @@ import TerminalRow from './TerminalRow' import { simulateLogs } from '../../constants' import { LogType } from '../../types' import { useDispatch } from 'react-redux' + import { incrementErrorLogs, incrementNoticeCount, diff --git a/src/pages/ValidatorManagement/ManageValidator/DepositStatus.tsx b/src/pages/ValidatorManagement/ManageValidator/DepositStatus.tsx index ad09cb75..f221197a 100644 --- a/src/pages/ValidatorManagement/ManageValidator/DepositStatus.tsx +++ b/src/pages/ValidatorManagement/ManageValidator/DepositStatus.tsx @@ -51,7 +51,7 @@ const DepositStatus = () => { - + ) } diff --git a/src/pages/ValidatorManagement/ManageValidator/DepositStepper.module.css b/src/pages/ValidatorManagement/ManageValidator/DepositStepper.module.css index 42da0daf..04dd23fe 100644 --- a/src/pages/ValidatorManagement/ManageValidator/DepositStepper.module.css +++ b/src/pages/ValidatorManagement/ManageValidator/DepositStepper.module.css @@ -4,64 +4,21 @@ div[class*='StepMain-'] { align-items: start; } -div[class*='LabelContainer-'] span[class*='Label-'] { - text-align: initial; - text-transform: uppercase; - font-family: 'Inter', sans-serif; -} + 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; -} .custom-step::before { content: ''; display: block; position: absolute; - width: 20px; - height: 20px; - border: 2px solid #e0e0e0; + width: 21px; + height: 21px; + border: 3px 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%; - transform: translate(-50%, -50%); -} - -.custom-step::after { - content: attr(data-subtitle); - position: absolute; - top: calc(100% + 4px); - left: 9px; - font-size: 12px; - font-family: 'Inter', sans-serif; - color: #a2a9b0; - width: max-content; -} - -@media (max-width: 410px) { - .custom-step::after { - font-size: 10px; - } -} diff --git a/src/pages/ValidatorManagement/ManageValidator/DepositStepper.tsx b/src/pages/ValidatorManagement/ManageValidator/DepositStepper.tsx index 45d94a68..64ccfd60 100644 --- a/src/pages/ValidatorManagement/ManageValidator/DepositStepper.tsx +++ b/src/pages/ValidatorManagement/ManageValidator/DepositStepper.tsx @@ -12,6 +12,8 @@ const DepositStepper = ({ activeStep }: DepositStepperProps) => { const windowSize = useWindowSize() const stepToUrlMap = [ + '/validator-management/', + '/validator-management/', '/validator-management/', // fix paths ] @@ -71,10 +73,8 @@ const DepositStepper = ({ activeStep }: DepositStepperProps) => { styleConfig={stepStyle} connectorStyleConfig={customConnectorStyle} style={{ - fontSize: '14px', zIndex: 1, - width: '40%', - height: 'fit-content', + width: '50%', padding: 0, paddingBottom: '10px', }} @@ -82,6 +82,13 @@ const DepositStepper = ({ activeStep }: DepositStepperProps) => { {DepositStatusSteps.filter((_, index) => isStepVisible(index)).map( step => { const originalIndex = DepositStatusSteps.indexOf(step) + const isActive = originalIndex <= activeStep + + const customStepStyle = { + backgroundColor: isActive ? '#2A4CF4' : '#E0E0E0', + border: '4px solid #fff', + } + return ( { onClick={() => changeStepOnClickHandler(originalIndex)} completed={activeStep > originalIndex - 1} data-step={step.label} - style={ - originalIndex === activeStep - ? { backgroundColor: stepStyle.currentBgColor } - : {} - } + style={customStepStyle} // Apply custom inline style /> ) }, @@ -110,6 +113,7 @@ const stepStyle = { inactiveBorderWidth: '2px', // For active dots: activeBgColor: '#FFFFFF', + activeTextColor: '', activeBorderColor: '#2A4CF4', activeBorderWidth: '2px', // For completed dots: @@ -117,8 +121,10 @@ const stepStyle = { activeTextColor: '#ffffff', completedTextColor: '#ffffff', inactiveTextColor: '#000000', - size: '13px', + size: '22px', + circleFontSize: '0px', + labelFontSize: '11px', borderRadius: '50%', fontWeight: 700, @@ -126,7 +132,8 @@ const stepStyle = { } const customConnectorStyle = { - size: '2px', + size: '3px', + activeColor: '#2A4CF4', disabledColor: '#bdbdbd', completedColor: '#a10308',