From 110ad9a6e9ed39bd5591ae65c2d0005ba47ca758 Mon Sep 17 00:00:00 2001
From: Mihajlo Medjedovic <mihajlo.medjedovic@outlook.com>
Date: Thu, 30 May 2024 12:03:09 +0200
Subject: [PATCH] fix: added colors.scss file, start of a refactor

---
 client/src/app/app.component.scss             | 18 +++++++------
 client/src/app/group/group.component.scss     | 11 ++++----
 client/src/app/lineage/lineage.component.scss |  6 +++--
 .../approve-details.component.scss            | 14 ++++++-----
 .../app/review/approve/approve.component.scss |  8 +++---
 .../review/submitter/submitter.component.scss |  8 +++---
 client/src/app/role/role.component.scss       | 10 +++++---
 .../src/app/shared/login/login.component.scss |  4 ++-
 client/src/app/user/user.component.scss       | 10 +++++---
 client/src/app/viewer/viewer.component.scss   |  6 +++--
 client/src/colors.scss                        |  4 +++
 client/src/styles.scss                        | 25 +++----------------
 12 files changed, 65 insertions(+), 59 deletions(-)
 create mode 100644 client/src/colors.scss

diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index c1abf77..294a9d5 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -1,3 +1,5 @@
+@import '../colors.scss';
+
 // Copyright (c) 2016 VMware, Inc. All Rights Reserved.
 // This software is released under MIT license.
 // The full license information can be found in LICENSE in the root directory of this project.
@@ -6,7 +8,7 @@ app-requests-modal {
 }
 
 header.app-header {
-  background: #314351 !important;
+  background: $headerBackground !important;
   color: #fff;
 }
 
@@ -42,7 +44,7 @@ header.app-header {
     align-items: center;
     padding: 30px;
     z-index: 110;
-    background: #314351;
+    background: $headerBackground;
 
     .expired-notice {
       color: #e0e0e0;
@@ -153,8 +155,8 @@ header {
 
   body[cds-theme="light"] {
     .btn-primary .btn, .btn.btn-primary {
-      border-color: #314351;
-      background-color: #314351;
+      border-color: $headerBackground;
+      background-color: $headerBackground;
       color: #fff;
     }
   }
@@ -194,7 +196,7 @@ header {
   }
 
   .btn.btn-outline:hover {
-    border-color: #314351;
+    border-color: $headerBackground;
     background-color: #495A67;
     color: #fff;
   }
@@ -208,13 +210,13 @@ header {
 
   body[cds-theme="light"] {
     .btn.btn-icon.btn-dimmed {
-      color: #314351;
+      color: $headerBackground;
     }
 
     .btn.btn-outline {
-      border-color: #314351;
+      border-color: $headerBackground;
       background-color: transparent;
-      color: #314351;
+      color: $headerBackground;
     }
   }
 
diff --git a/client/src/app/group/group.component.scss b/client/src/app/group/group.component.scss
index 3b2c1de..70e7761 100644
--- a/client/src/app/group/group.component.scss
+++ b/client/src/app/group/group.component.scss
@@ -1,12 +1,14 @@
+@import '../../colors.scss';
+
 ::ng-deep body[cds-theme="dark"] {
   .group-info {
-      background-color: #314351;
-      border-color: #314351;
+      background-color: $headerBackground;
+      border-color: $headerBackground;
   }
 
   .group-data {
-      background-color: #314351;
-      border-color: #314351;
+      background-color: $headerBackground;
+      border-color: $headerBackground;
   }
 
   .member-table tbody{
@@ -63,7 +65,6 @@
 }
 
 .member-table{
-  // background-color: #f9f9f9;
   width: 100%;
 }
 
diff --git a/client/src/app/lineage/lineage.component.scss b/client/src/app/lineage/lineage.component.scss
index cbbddaa..911dcfa 100644
--- a/client/src/app/lineage/lineage.component.scss
+++ b/client/src/app/lineage/lineage.component.scss
@@ -1,6 +1,8 @@
+@import '../../colors.scss';
+
 .toggle-switch input[type=checkbox]:checked+label:before {
-    border-color: #314351;
-    background-color: #314351!important;
+    border-color: $headerBackground;
+    background-color: $headerBackground !important;
     transition: .15s ease-in;
     transition-property: border-color,background-color;
 }
diff --git a/client/src/app/review/approve-details/approve-details.component.scss b/client/src/app/review/approve-details/approve-details.component.scss
index e8e4bf9..c73536d 100644
--- a/client/src/app/review/approve-details/approve-details.component.scss
+++ b/client/src/app/review/approve-details/approve-details.component.scss
@@ -1,3 +1,5 @@
+@import '../../../colors.scss';
+
 .loader {
   display:flex;
   justify-content: center;
@@ -74,7 +76,7 @@ background: rgba(252, 135, 120, 0.4);
     font-size: .54167rem;
     font-weight: 400;
     letter-spacing: normal;
-    background: #314351;
+    background: $headerBackground;
     border-radius: .125rem;
     color: #f0f1ec;;
     line-height: .75rem;
@@ -97,8 +99,8 @@ background: rgba(252, 135, 120, 0.4);
     top: auto;
     right: auto;
     content: "";
-    border-left: .25rem solid #314351;
-    border-top: .20833rem solid #314351;
+    border-left: .25rem solid $headerBackground;
+    border-top: .20833rem solid $headerBackground;
     border-right: .25rem solid transparent;
     border-bottom: .20833rem solid transparent;
 }
@@ -108,8 +110,8 @@ border: 0px solid;
 }
 
 .toggle-switch input[type=checkbox]:checked+label:before {
-    border-color: #314351;
-    background-color: #314351!important;
+    border-color: $headerBackground;
+    background-color: $headerBackground !important;
     transition: .15s ease-in;
     transition-property: border-color,background-color;
 }
@@ -169,7 +171,7 @@ border: 0px solid;
 .tooll {
     position: absolute;
     background: #e6b3b3;
-    color: #314351;
+    color: $headerBackground;
     top: 0px;
     height: 36px;
     width: 100%;
diff --git a/client/src/app/review/approve/approve.component.scss b/client/src/app/review/approve/approve.component.scss
index 8aa016c..51782b8 100644
--- a/client/src/app/review/approve/approve.component.scss
+++ b/client/src/app/review/approve/approve.component.scss
@@ -1,3 +1,5 @@
+@import '../../../colors.scss';
+
 .column-center {
     display: flex;
     flex-direction: column;
@@ -13,11 +15,11 @@
 }
 
 .tooltip.tooltip-bottom-left>.tooltip-content, .tooltip .tooltip-content.tooltip-bottom-left {
-    background: #314351!important;
+    background: $headerBackground !important;
 }
 .tooltip.tooltip-bottom-left>.tooltip-content:before, .tooltip .tooltip-content.tooltip-bottom-left:before {
-    border-right: .25rem solid #314351;
-    border-bottom: .20833rem solid #314351;
+    border-right: .25rem solid $headerBackground;
+    border-bottom: .20833rem solid $headerBackground;
 }
 
 .noBorder {
diff --git a/client/src/app/review/submitter/submitter.component.scss b/client/src/app/review/submitter/submitter.component.scss
index 452434c..7be2339 100644
--- a/client/src/app/review/submitter/submitter.component.scss
+++ b/client/src/app/review/submitter/submitter.component.scss
@@ -1,13 +1,15 @@
+@import '../../../colors.scss';
+
 .noBorder {
   border-bottom: 1px solid transparent!important;
 }
 
 .tooltip.tooltip-bottom-left>.tooltip-content, .tooltip .tooltip-content.tooltip-bottom-left {
-  background: #314351!important;
+  background: $headerBackground !important;
 }
 .tooltip.tooltip-bottom-left>.tooltip-content:before, .tooltip .tooltip-content.tooltip-bottom-left:before {
-  border-right: .25rem solid #314351;
-  border-bottom: .20833rem solid #314351;
+  border-right: .25rem solid $headerBackground;
+  border-bottom: .20833rem solid $headerBackground;
 }
 
 .no-submitted-tables {
diff --git a/client/src/app/role/role.component.scss b/client/src/app/role/role.component.scss
index e543f50..065095a 100644
--- a/client/src/app/role/role.component.scss
+++ b/client/src/app/role/role.component.scss
@@ -1,12 +1,14 @@
+@import '../../colors.scss';
+
 ::ng-deep body[cds-theme="dark"] {
   .role {
-      background-color: #314351;
-      border-color: #314351;
+      background-color: $headerBackground;
+      border-color: $headerBackground;
   }
 
   .role-data {
-      background-color: #314351;
-      border-color: #314351;
+      background-color: $headerBackground;
+      border-color: $headerBackground;
   }
 
   .member-table tbody{
diff --git a/client/src/app/shared/login/login.component.scss b/client/src/app/shared/login/login.component.scss
index 3f0daf1..7f81e84 100644
--- a/client/src/app/shared/login/login.component.scss
+++ b/client/src/app/shared/login/login.component.scss
@@ -1,5 +1,7 @@
+@import '../../../colors.scss';
+
 .sideBarProps {
-  background: #314351!important;
+  background: $headerBackground !important;
   color: #e0e0e0;
 }
 
diff --git a/client/src/app/user/user.component.scss b/client/src/app/user/user.component.scss
index 20130c4..924d287 100644
--- a/client/src/app/user/user.component.scss
+++ b/client/src/app/user/user.component.scss
@@ -1,3 +1,5 @@
+@import '../../colors.scss';
+
 .sidebar-height{
     height: 100%;
 }
@@ -8,13 +10,13 @@
 
 ::ng-deep body[cds-theme="dark"] {
     .user-info {
-        background-color: #314351;
-        border-color: #314351;
+        background-color: $headerBackground;
+        border-color: $headerBackground;
     }
 
     .user-data {
-        background-color: #314351;
-        border-color: #314351;
+        background-color: $headerBackground;
+        border-color: $headerBackground;
     }
 
     .user-table tbody{
diff --git a/client/src/app/viewer/viewer.component.scss b/client/src/app/viewer/viewer.component.scss
index 93b1d8e..53007e1 100644
--- a/client/src/app/viewer/viewer.component.scss
+++ b/client/src/app/viewer/viewer.component.scss
@@ -1,3 +1,5 @@
+@import '../../colors.scss';
+
 .card {
   margin-top: 0;
 
@@ -11,8 +13,8 @@ clr-tree-node button {
 }
 
 .toggle-switch input[type=checkbox]:checked+label:before {
-    border-color: #314351;
-    background-color: #314351!important;
+    border-color: $headerBackground;
+    background-color: $headerBackground !important;
     transition: .15s ease-in;
     transition-property: border-color,background-color;
 }
diff --git a/client/src/colors.scss b/client/src/colors.scss
new file mode 100644
index 0000000..f4fef2c
--- /dev/null
+++ b/client/src/colors.scss
@@ -0,0 +1,4 @@
+$headerBackground: #314351;
+
+$trackColor: #3b5268;
+$thumbColor: #273849;
\ No newline at end of file
diff --git a/client/src/styles.scss b/client/src/styles.scss
index 22a4f1f..c5752dd 100644
--- a/client/src/styles.scss
+++ b/client/src/styles.scss
@@ -7,14 +7,13 @@
 @import '@cds/core/styles/theme.dark.min.css';
 @import '@clr/ui/clr-ui.min.css';
 
+@import './colors.scss';
+
 @font-face {
   font-family: text-security-disc;
   src: url('https://raw.githubusercontent.com/noppa/text-security/master/dist/text-security-disc.woff');
 }
 
-$trackColor: #3b5268;
-$thumbColor: #273849;
-
 body[cds-theme="dark"] {
   scrollbar-width: thin;
   scrollbar-color: $trackColor $thumbColor;
@@ -39,22 +38,6 @@ body[cds-theme="dark"] {
   }
 }
 
-// body::-webkit-scrollbar {
-//   width: 11px;
-// }
-// body {
-//   scrollbar-width: thin;
-//   scrollbar-color: red blue;
-// }
-// body::-webkit-scrollbar-track {
-//   background: blue;
-// }
-// body::-webkit-scrollbar-thumb {
-//   background-color: red;
-//   border-radius: 6px;
-//   border: 3px solid blue;
-// }
-
 body,
 html {
   font-weight: 400 !important;
@@ -163,7 +146,7 @@ body[cds-theme="light"] {
   justify-content: center;
   align-items: center;
   height: 100vh;
-  background: #314351;
+  background: $headerBackground;
   flex-direction: column;
   z-index: 2000;
   position: fixed;
@@ -419,7 +402,7 @@ body[cds-theme="light"] {
   }
 
   .color-darker-gray {
-    color: #314351;
+    color: $headerBackground;
   }
 }