From 31bcba96c694a44ecc6d33b6d49ad893de416488 Mon Sep 17 00:00:00 2001
From: Prabhat Khera <91852476+prabhat-org@users.noreply.github.com>
Date: Thu, 12 Oct 2023 07:34:38 +1300
Subject: [PATCH] feature(UI): toggle styling changes [EE-4602] (#10373)

---
 app/assets/css/bootstrap-override.css         | 33 ++++++++++++++-----
 app/assets/css/theme.css                      |  3 --
 app/assets/css/vendor-override.css            |  4 ++-
 .../ScreenBannerFieldset.tsx                  |  2 +-
 4 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/app/assets/css/bootstrap-override.css b/app/assets/css/bootstrap-override.css
index 526fef18a..d1ae6d68d 100644
--- a/app/assets/css/bootstrap-override.css
+++ b/app/assets/css/bootstrap-override.css
@@ -70,11 +70,14 @@
 }
 
 .switch input[type='checkbox']:disabled + .slider {
-  background-color: var(--ui-gray-3);
-  @apply th-dark:before:bg-gray-warm-8;
-  @apply th-highcontrast:before:bg-gray-warm-8;
-  @apply th-dark:bg-gray-warm-9;
-  @apply th-highcontrast:bg-gray-warm-9;
+  opacity: 0.3;
+  @apply th-dark:bg-gray-warm-6 th-dark:opacity-40;
+  @apply th-highcontrast:bg-gray-warm-6 th-highcontrast:opacity-40;
+}
+
+.switch input[type='checkbox']:disabled:is(:checked) + .slider {
+  @apply th-dark:bg-blue-9 th-dark:opacity-60;
+  @apply th-highcontrast:bg-blue-9 th-highcontrast:opacity-60;
 }
 
 .switch-values {
@@ -92,11 +95,23 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: var(--bg-switch-box-color);
   -webkit-transition: 0.4s;
   transition: 0.4s;
-  @apply th-dark:bg-gray-warm-9;
-  @apply th-highcontrast:bg-gray-warm-9;
+  @apply bg-gray-6;
+  @apply th-dark:bg-gray-warm-8;
+  @apply th-highcontrast:bg-gray-warm-8;
+}
+
+.slider:hover {
+  @apply bg-gray-7;
+  @apply th-dark:bg-gray-warm-7;
+  @apply th-highcontrast:bg-gray-warm-7;
+}
+
+input:checked + .slider:hover {
+  background-color: var(--ui-blue-9);
+  @apply th-dark:bg-blue-10;
+  @apply th-highcontrast:bg-blue-10;
 }
 
 .slider:before {
@@ -118,7 +133,7 @@ input:checked + .slider {
 }
 
 input:focus + .slider {
-  box-shadow: 0 0 1px var(--ui-blue-8);
+  box-shadow: 0 0 2px var(--ui-blue-8);
 }
 
 input:checked + .slider:before {
diff --git a/app/assets/css/theme.css b/app/assets/css/theme.css
index 87be93bc0..99a95a068 100644
--- a/app/assets/css/theme.css
+++ b/app/assets/css/theme.css
@@ -108,7 +108,6 @@
   --bg-widget-table-color: var(--ui-gray-3);
   --bg-header-color: var(--white-color);
   --bg-hover-table-color: var(--grey-14);
-  --bg-switch-box-color: var(--ui-gray-5);
   --bg-input-group-addon-color: var(--ui-gray-3);
   --bg-btn-default-color: var(--ui-blue-10);
   --bg-blocklist-hover-color: var(--ui-blue-2);
@@ -284,7 +283,6 @@
   --bg-widget-table-color: var(--grey-3);
   --bg-header-color: var(--grey-2);
   --bg-hover-table-color: var(--grey-3);
-  --bg-switch-box-color: var(--grey-53);
   --bg-table-color: var(--grey-1);
   --bg-md-checkbox-color: var(--grey-31);
   --bg-form-control-disabled-color: var(--grey-3);
@@ -452,7 +450,6 @@
   --bg-widget-table-color: var(--black-color);
   --bg-header-color: var(--black-color);
   --bg-hover-table-color: var(--grey-3);
-  --bg-switch-box-color: var(--grey-53);
   --bg-panel-body-color: var(--black-color);
   --bg-dropdown-menu-color: var(--ui-gray-warm-8);
   --bg-motd-body-color: var(--black-color);
diff --git a/app/assets/css/vendor-override.css b/app/assets/css/vendor-override.css
index e2ae29ae7..80f49191e 100644
--- a/app/assets/css/vendor-override.css
+++ b/app/assets/css/vendor-override.css
@@ -18,7 +18,9 @@
 }
 
 .switch i {
-  background: var(--bg-switch-box-color);
+  @apply bg-gray-6;
+  @apply th-dark:bg-gray-warm-8;
+  @apply th-highcontrast:bg-gray-warm-8;
 }
 
 .table > thead > tr > th,
diff --git a/app/react/portainer/settings/SettingsView/ApplicationSettingsPanel/ScreenBannerFieldset.tsx b/app/react/portainer/settings/SettingsView/ApplicationSettingsPanel/ScreenBannerFieldset.tsx
index 9d2108b55..cc1590ee1 100644
--- a/app/react/portainer/settings/SettingsView/ApplicationSettingsPanel/ScreenBannerFieldset.tsx
+++ b/app/react/portainer/settings/SettingsView/ApplicationSettingsPanel/ScreenBannerFieldset.tsx
@@ -23,7 +23,7 @@ export function ScreenBannerFieldset() {
           <SwitchField
             labelClass="col-sm-3 col-lg-2"
             label="Login screen banner"
-            checked
+            checked={isEnabled}
             name="toggle_login_banner"
             disabled={isDemoQuery.data}
             onChange={(checked) => setIsEnabled(checked)}