From 3bfabab4ebee8883b9c2555c71c9167d9385b982 Mon Sep 17 00:00:00 2001
From: Sajid Alam <sajid_alam@mckinsey.com>
Date: Wed, 24 Apr 2024 16:23:40 +0100
Subject: [PATCH] update settings-modal design

Signed-off-by: Sajid Alam <sajid_alam@mckinsey.com>
---
 .../settings-modal/settings-modal.js          |  7 ------
 .../settings-modal/settings-modal.scss        | 23 ++++++++++---------
 src/components/ui/button/button.scss          |  4 ++--
 src/components/ui/modal/modal.scss            |  5 ++--
 src/components/ui/toggle/toggle.scss          | 19 +++++++++++----
 5 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/src/components/settings-modal/settings-modal.js b/src/components/settings-modal/settings-modal.js
index a4847d04e7..aeb0fb5656 100644
--- a/src/components/settings-modal/settings-modal.js
+++ b/src/components/settings-modal/settings-modal.js
@@ -104,13 +104,6 @@ const SettingsModal = ({
       >
         <div className="pipeline-settings-modal__content">
           <div className="pipeline-settings-modal__group">
-            <div className="pipeline-settings-modal__header">
-              <div className="pipeline-settings-modal__name">Name</div>
-              <div className="pipeline-settings-modal__state">State</div>
-              <div className="pipeline-settings-modal__description">
-                Description
-              </div>
-            </div>
             <SettingsModalRow
               id="isPrettyName"
               name={settingsConfig['isPrettyName'].name}
diff --git a/src/components/settings-modal/settings-modal.scss b/src/components/settings-modal/settings-modal.scss
index ea67b59031..b94d3e1db5 100644
--- a/src/components/settings-modal/settings-modal.scss
+++ b/src/components/settings-modal/settings-modal.scss
@@ -2,13 +2,17 @@
 @use '../../styles/mixins' as mixins;
 
 .kui-theme--light {
-  --color-modal-header-text: #{colors.$black-700};
+  --color-modal-header-text: #{colors.$black-0};
   --color-upgrade-reminder-text: #{colors.$blue-300};
+  --color-modal-table-text: rgb(0 0 0 / 85%);
+  --color-modal-table-description: rgb(0 0 0 / 70%);
 }
 
 .kui-theme--dark {
-  --color-modal-header-text: #{colors.$black-0};
+  --color-modal-header-text: #{colors.$black-300};
   --color-upgrade-reminder-text: #{colors.$yellow-300};
+  --color-modal-table-text: rgb(255 255 255 / 85%);
+  --color-modal-table-description: rgb(255 255 255 / 70%);
 }
 
 .pipeline-settings-modal {
@@ -45,21 +49,12 @@
 
 .pipeline-settings-modal__column {
   margin: 1.145em 0;
-}
-
-.pipeline-settings-modal__column,
-.pipeline-settings-modal__header {
   align-items: baseline;
   display: flex;
   flex-wrap: wrap;
   font-size: 1.4em;
 }
 
-.pipeline-settings-modal__header {
-  margin-bottom: 10px;
-  color: var(--color-modal-header-text);
-}
-
 .pipeline-settings-modal__subtitle {
   margin-bottom: 24px;
   font-size: 1.8em;
@@ -67,10 +62,16 @@
 
 .pipeline-settings-modal__name {
   @include mixins.flexColumn(3);
+
+  color: var(--color-modal-table-text);
+  font-weight: 500;
 }
 
 .pipeline-settings-modal__description {
   @include mixins.flexColumn(6);
+
+  color: var(--color-modal-table-description);
+  font-weight: 500;
 }
 
 .pipeline-settings-modal__state {
diff --git a/src/components/ui/button/button.scss b/src/components/ui/button/button.scss
index 55a6658346..ce4fd48a51 100644
--- a/src/components/ui/button/button.scss
+++ b/src/components/ui/button/button.scss
@@ -10,7 +10,7 @@ $secondary-underline-offset-hover: 4px;
 
 .kui-theme--light {
   --color-button--border: #{colors.$black-900};
-  --color-button--border--disabled: #{colors.$grey-400};
+  --color-button--border--disabled: #{colors.$black-900};
   --color-button__text--hover: #{colors.$white-600};
   --color-button__text: #{colors.$black-800};
   --color-secondary-active: #{colors.$white-100};
@@ -18,7 +18,7 @@ $secondary-underline-offset-hover: 4px;
 
 .kui-theme--dark {
   --color-button--border: #{colors.$white-0};
-  --color-button--border--disabled: #{colors.$grey-900};
+  --color-button--border--disabled: rgb(255 255 255 / 30%);
   --color-button__text--hover: #{colors.$black-800};
   --color-button__text: #{colors.$white-600};
   --color-secondary-active: #{colors.$slate-0};
diff --git a/src/components/ui/modal/modal.scss b/src/components/ui/modal/modal.scss
index 9911d3aa36..268e55633c 100644
--- a/src/components/ui/modal/modal.scss
+++ b/src/components/ui/modal/modal.scss
@@ -10,14 +10,14 @@ $duration-visibility: 0.4s;
 .kui-theme--light {
   --color-modal-bg: #{colors.$black-700};
   --color-modal-content: #{colors.$white-0};
-  --color-modal-title: #{colors.$black-800};
+  --color-modal-title: #{colors.$black-900};
   --color-modal-description: #{colors.$black-700};
 }
 
 .kui-theme--dark {
   --color-modal-bg: #{colors.$slate-900};
   --color-modal-content: #{colors.$slate-0};
-  --color-modal-title: #{colors.$white-600};
+  --color-modal-title: #{colors.$white-0};
   --color-modal-description: #{colors.$black-0};
 }
 
@@ -85,6 +85,7 @@ $duration-visibility: 0.4s;
   width: 100%;
   color: var(--color-modal-title);
   margin-bottom: $size-spacing;
+  font-weight: 500;
 }
 
 .modal__description {
diff --git a/src/components/ui/toggle/toggle.scss b/src/components/ui/toggle/toggle.scss
index c7c900600a..45d2c86e66 100644
--- a/src/components/ui/toggle/toggle.scss
+++ b/src/components/ui/toggle/toggle.scss
@@ -2,16 +2,20 @@
 
 .kui-theme--light {
   --color-toggle-on: #{colors.$blue-600};
-  --color-toggle-on-bar: #{colors.$ocean-0};
-  --color-toggle-off: #{colors.$slate-0};
-  --color-toggle-off-bar: #{colors.$grey-400};
+  --color-toggle-on-bar: #{colors.$blue-600};
+  --color-toggle-off: #{colors.$black-900};
+  --color-toggle-off-bar: #{colors.$black-900};
+  --color-toggle-on-label: #{colors.$blue-600};
+  --color-toggle-off-label: #{colors.$black-800};
 }
 
 .kui-theme--dark {
   --color-toggle-on: #{colors.$blue-0};
   --color-toggle-on-bar: #{colors.$blue-0};
   --color-toggle-off: #{colors.$white-0};
-  --color-toggle-off-bar: #{colors.$black-400};
+  --color-toggle-off-bar: #{colors.$white-0};
+  --color-toggle-on-label: #{colors.$blue-0};
+  --color-toggle-off-label: #{colors.$white-600};
 }
 
 .pipeline-toggle {
@@ -40,6 +44,11 @@
   padding: 0 0 0 2.8em;
   cursor: pointer;
   user-select: none;
+  color: var(--color-toggle-off-label);
+}
+
+.pipeline-toggle-input:checked + .pipeline-toggle-label {
+  color: var(--color-toggle-on-label);
 }
 
 .pipeline-toggle-label::before,
@@ -57,6 +66,7 @@
   width: 1.7em;
   height: 0.8em;
   background-color: var(--color-toggle-off-bar);
+  opacity: 0.3;
   border-radius: 0.5em;
   transition: opacity 0.15s ease;
 }
@@ -67,6 +77,7 @@
   background-color: var(--color-toggle-off);
   border-radius: 50%;
   transition: opacity 0.15s ease, transform 0.15s ease;
+  color: var(--color-toggle-on-label);
 }
 
 [data-whatinput='keyboard'] input:focus + .pipeline-toggle-label::before {