update settings-modal design

Signed-off-by: Sajid Alam <[email protected]>
kedro-org · Apr 24, 2024 · 3bfabab · 3bfabab
1 parent 65acdf9
commit 3bfabab
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 26 deletions.
diff --git 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
@@ -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,32 +49,29 @@
 
 .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;
 }
 
 .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
@@ -10,15 +10,15 @@ $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};
 }
 
 .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
@@ -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
@@ -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 {