feature(UI): toggle styling changes [EE-4602] (#10373)

app/assets/css/bootstrap-override.css

@@ -70,11 +70,14 @@
 }
 
 .switch input[type='checkbox']:disabled + .slider {
-  background-color: var(--ui-gray-3);
+  opacity: 0.3;
-  @apply th-dark:before:bg-gray-warm-8;
+  @apply th-dark:bg-gray-warm-6 th-dark:opacity-40;
-  @apply th-highcontrast:before:bg-gray-warm-8;
+  @apply th-highcontrast:bg-gray-warm-6 th-highcontrast:opacity-40;
-  @apply th-dark:bg-gray-warm-9;
+}
-  @apply th-highcontrast:bg-gray-warm-9;
+
+.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 bg-gray-6;
-  @apply th-highcontrast:bg-gray-warm-9;
+  @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 {

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);

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,

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)}