From 847e59315487b7b248690f2dc886613a59ee8430 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Fri, 13 Mar 2026 20:22:36 +0000
Subject: [PATCH] Themed wizard view steps.

---
 assets/stylesheets/App.css                     | 11 +++++++++++
 src/components/Dashboard/common/WizardView.jsx | 13 ++++++++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/assets/stylesheets/App.css b/assets/stylesheets/App.css
index b88a855..7f8d807 100644
--- a/assets/stylesheets/App.css
+++ b/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;
diff --git a/src/components/Dashboard/common/WizardView.jsx b/src/components/Dashboard/common/WizardView.jsx
index faa470a..31fe6c7 100644
--- a/src/components/Dashboard/common/WizardView.jsx
+++ b/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' }}
             />