From d7611a6b59fe3ef23cd61e56ebd78881e3a76ee4 Mon Sep 17 00:00:00 2001
From: TekH <h.tek@digitaldata.works>
Date: Mon, 9 Nov 2026 09:13:58 +0100
Subject: [PATCH] Enhance stepper functionality and visual design

Added new properties to `<MudStepper>` for customization and
visual feedback. Introduced `_completedSteps` to track step
completion dynamically. Updated logic to manage completed
steps and reset state. Improved CSS for stepper appearance,
including step labels, icons, and content differentiation.
These changes improve usability and flexibility of the
stepper component.
---
 .../Sender/CreateEnvelopeWizardPopup.razor    | 11 ++++-
 .../wwwroot/css/sender-page.css               | 49 +++++++++++++++----
 2 files changed, 50 insertions(+), 10 deletions(-)

diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/Sender/CreateEnvelopeWizardPopup.razor b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/Sender/CreateEnvelopeWizardPopup.razor
index 090cc193..0bf976d0 100644
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/Sender/CreateEnvelopeWizardPopup.razor
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/Sender/CreateEnvelopeWizardPopup.razor
@@ -32,6 +32,10 @@
                 <MudStepper Vertical="true"
                             NonLinear="false"
                             ShowResetButton="false"
+                            CurrentStepColor="Color.Info"
+                            CompletedStepColor="Color.Success"
+                            ErrorStepColor="Color.Error"
+                            StepCompleteIcon="@Icons.Material.Filled.CheckCircle"
                             ActiveIndex="@_currentStep"
                             Class="sender-create-wizard__stepper">
                     <ChildContent>
@@ -39,7 +43,9 @@
                         {
                             var stepIndex = step;
 
-                            <MudStep Title="@GetStepTitle(stepIndex)">
+                            <MudStep Title="@GetStepTitle(stepIndex)"
+                                     Completed="@_completedSteps.Contains(stepIndex)"
+                                     Skippable="@(stepIndex == 3)">
                                 <div class="sender-create-wizard__stepper-description">@GetStepDescription(stepIndex)</div>
 
                                 @if (stepIndex == _currentStep)
@@ -422,6 +428,7 @@
     private bool _isVisible;
     private bool _previousVisible;
     private int _currentStep;
+    private readonly HashSet<int> _completedSteps = [];
 
     private string _title = string.Empty;
     private int? _selectedEnvelopeTypeId;
@@ -714,6 +721,7 @@
 
             if (!IsLastStep)
             {
+                _completedSteps.Add(_currentStep);
                 _currentStep++;
 
                 if (_currentStep == 1)
@@ -1120,6 +1128,7 @@
     private void ResetWizardState()
     {
         _currentStep = 0;
+        _completedSteps.Clear();
         _validationMessage = null;
 
         _title = string.Empty;
diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css
index 41f3dfc8..ed5a0a3c 100644
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css
@@ -1137,7 +1137,7 @@
 }
 
 .sender-create-wizard__stepper .mud-step-label {
-    color: #1f2937;
+    color: #334155;
     font-size: 0.86rem;
     font-weight: 700;
 }
@@ -1153,22 +1153,53 @@
 .sender-create-wizard__stepper .mud-step-icon {
     color: #64748b;
     background: #f8fafc;
-    border: 1px solid rgba(126, 34, 206, 0.25);
+    border: 1px solid #cbd5e1;
 }
 
-.sender-create-wizard__stepper .mud-step-completed .mud-step-icon,
-.sender-create-wizard__stepper .mud-step-current .mud-step-icon {
-    color: #ffffff;
-    border-color: transparent;
+.sender-create-wizard__stepper .mud-step:not(.mud-step-completed) .mud-step-icon {
+    position: relative;
+    color: transparent;
+    background: #e2e8f0;
+    border-color: #94a3b8;
+}
+
+.sender-create-wizard__stepper .mud-step:not(.mud-step-completed) .mud-step-icon::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0.55rem;
+    height: 0.55rem;
+    border-radius: 50%;
+    border: 2px solid #64748b;
+    background: #64748b;
+    transform: translate(-50%, -50%);
+}
+
+.sender-create-wizard__stepper .mud-step-current:not(.mud-step-completed) .mud-step-icon::before {
+    border-color: #0e7490;
+    background: #22d3ee;
+}
+
+.sender-create-wizard__stepper .mud-step-current .mud-step-label {
+    color: #0f172a;
 }
 
 .sender-create-wizard__stepper .mud-step-current .mud-step-icon {
-    background: linear-gradient(135deg, #7e22ce 0%, #2a5298 100%);
-    box-shadow: 0 0 0 3px rgba(126, 34, 206, 0.15);
+    box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.2);
 }
 
 .sender-create-wizard__stepper .mud-step-completed .mud-step-icon {
-    background: #2a5298;
+    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2);
+}
+
+.sender-create-wizard__stepper .mud-step-completed .mud-step-label {
+    color: #14532d;
+}
+
+.sender-create-wizard__stepper .mud-step-completed .mud-step-content,
+.sender-create-wizard__stepper .mud-step-current .mud-step-content {
+    color: #475569;
 }
 
 .sender-create-wizard__stepper-description {