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',