From 685552a66126e470537b936ada25362df4d08e78 Mon Sep 17 00:00:00 2001
From: Richard Wei <54336863+WaysonWei@users.noreply.github.com>
Date: Fri, 8 Oct 2021 14:59:01 +1300
Subject: [PATCH] fix(wizard): fix wizard not visible in dark theme EE-1800
 (#5822)

* fix wizard not visible in dark theme
---
 app/assets/css/theme.css                                  | 7 +++++++
 .../wizard-endpoints/wizard-stepper/wizard-stepper.css    | 8 ++++----
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/app/assets/css/theme.css b/app/assets/css/theme.css
index 17e94309b..0f034437b 100644
--- a/app/assets/css/theme.css
+++ b/app/assets/css/theme.css
@@ -62,6 +62,7 @@ html {
   --grey-58: #ebf4f8;
   --grey-59: #e6e6e6;
   --grey-60: #cacaca;
+  --grey-61: rgb(231, 231, 231);
 
   --blue-1: #219;
   --blue-2: #337ab7;
@@ -158,6 +159,8 @@ html {
   --bg-small-select-color: var(--white-color);
   --bg-app-datatable-thead: var(--grey-23);
   --bg-app-datatable-tbody: var(--grey-24);
+  --bg-stepper-item-active: var(--white-color);
+  --bg-stepper-item-counter: var(--grey-61);
 
   --text-main-color: var(--grey-7);
   --text-body-color: var(--grey-6);
@@ -328,6 +331,8 @@ html {
   --bg-small-select-color: var(--grey-2);
   --bg-app-datatable-thead: var(--grey-1);
   --bg-app-datatable-tbody: var(--grey-1);
+  --bg-stepper-item-active: var(--grey-1);
+  --bg-stepper-item-counter: var(--grey-7);
 
   --text-main-color: var(--white-color);
   --text-body-color: var(--white-color);
@@ -497,6 +502,8 @@ html {
   --bg-small-select-color: var(--black-color);
   --bg-app-datatable-thead: var(--black-color);
   --bg-app-datatable-tbody: var(--black-color);
+  --bg-stepper-item-active: var(--black-color);
+  --bg-stepper-item-counter: var(--grey-3);
 
   --text-main-color: var(--white-color);
   --text-body-color: var(--white-color);
diff --git a/app/portainer/views/wizard/wizard-endpoints/wizard-stepper/wizard-stepper.css b/app/portainer/views/wizard/wizard-endpoints/wizard-stepper/wizard-stepper.css
index 2bff2354e..738c63194 100644
--- a/app/portainer/views/wizard/wizard-endpoints/wizard-stepper/wizard-stepper.css
+++ b/app/portainer/views/wizard/wizard-endpoints/wizard-stepper/wizard-stepper.css
@@ -30,17 +30,17 @@
 .stepper-item::before {
   position: absolute;
   content: '';
-  border-bottom: 5px solid rgb(231, 231, 231);
   width: 100%;
   top: 20px;
   left: -100%;
   z-index: 2;
+  border-bottom: 5px solid var(--bg-stepper-item-counter);
 }
 
 .stepper-item::after {
   position: absolute;
   content: '';
-  border-bottom: 5px solid rgb(231, 231, 231);
+  border-bottom: 5px solid var(--bg-stepper-item-counter);
   width: 100%;
   top: 20px;
   left: 0;
@@ -56,13 +56,13 @@
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  background: rgb(231, 231, 231);
+  background: var(--bg-stepper-item-counter);
   margin-bottom: 6px;
 }
 
 .stepper-item.active {
   font-weight: bold;
-  background: #fff;
+  background: var(--bg-stepper-item-active);
   content: none;
 }