From 31f90000e434094fd695c5f9e5e3f99ff5721dba Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Mon, 20 Jul 2026 02:08:52 +0100
Subject: [PATCH] Enhance App.css by adding styles for subSteps in the timeline
 component, including adjustments for item appearance, padding, and background
 colors. Introduce new styles for step indicators and improve visual
 consistency for completed steps, enhancing overall user experience.

---
 assets/stylesheets/App.css | 63 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)

diff --git a/assets/stylesheets/App.css b/assets/stylesheets/App.css
index 75a46eb..96c77ee 100644
--- a/assets/stylesheets/App.css
+++ b/assets/stylesheets/App.css
@@ -696,3 +696,66 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
 .ant-color-picker .ant-collapse .ant-collapse-item .ant-collapse-header {
   margin: 5.5px 0;
 }
+
+.subSteps.ant-timeline .ant-timeline-item-last > .ant-timeline-item-content {
+  min-height: unset;
+}
+
+.subSteps.ant-timeline .ant-timeline-item-last {
+  padding-bottom: 6px;
+}
+
+.subSteps.ant-timeline {
+  margin-top: 16px;
+}
+
+.ant-steps.ant-steps-vertical
+  > .ant-steps-item
+  > .ant-steps-item-container
+  > .ant-steps-item-tail::after {
+  width: 1.5px;
+}
+
+.subSteps.ant-timeline .ant-timeline-item-head {
+  background-color: unset;
+}
+
+.subSteps.ant-timeline .subSteps-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: var(--color-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.subSteps.ant-timeline .subSteps-dot svg path {
+  stroke: var(--layout-modal-bg);
+  stroke-width: 10px;
+}
+
+.subSteps.ant-timeline .subSteps-dot span {
+  width: 5px;
+  height: 5px;
+  margin-top: 0px;
+  margin-right: 0px;
+}
+
+.subSteps.ant-timeline .subSteps-dot.subSteps-dot-disabled {
+  background-color: var(--color-primary-disabled);
+}
+
+.subSteps.ant-timeline .subSteps-dot.subSteps-dot-disabled svg path {
+  stroke: var(--color-primary);
+}
+
+.ant-steps .ant-steps-item-finish .ant-steps-item-icon svg path {
+  stroke: var(--color-primary);
+  stroke-width: 3px;
+}
+
+.ant-descriptions .ant-descriptions-item-label::after {
+  top: 0;
+}