Themed wizard view steps.

assets/stylesheets/App.css

@@ -37,6 +37,8 @@
 .ant-badge,
 .ant-select-dropdown,
 .ant-splitter,
+.ant-steps-item-title,
+.ant-steps-icon,
 [class*=' ant-radio'] {
   font-family: 'DM Sans';
 }
@@ -46,6 +48,15 @@
   font-family: 'DM Mono';
 }
 
+.ant-steps .ant-steps-item-icon {
+  line-height: 30px;
+  font-weight: 600;
+}
+
+.ant-steps .ant-steps-item-icon .anticon.anticon-check.ant-steps-finish-icon {
+  line-height: 32px;
+}
+
 .ant-typography .id-text {
   font-family: 'DM Mono';
   font-size: 11.9px;

src/components/Dashboard/common/WizardView.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types'
 import { useState } from 'react'
 import { useMediaQuery } from 'react-responsive'
+import CheckIcon from '../../Icons/CheckIcon'
 import {
   Typography,
   Flex,
@@ -40,7 +41,17 @@ const WizardView = ({
           <div style={{ minWidth: sideBarGrow == true ? '100%' : '160px' }}>
             <Steps
               current={currentStep}
-              items={steps}
+              items={steps.map((step, index) => ({
+                ...step,
+                icon:
+                  index < currentStep ? (
+                    <div className='ant-steps-item-icon'>
+                      <CheckIcon />
+                    </div>
+                  ) : (
+                    step.icon
+                  )
+              }))}
               direction='vertical'
               style={{ width: 'fit-content' }}
             />