From 69cb543a744d97fefb777b57975367e95a931fc4 Mon Sep 17 00:00:00 2001
From: shuhaib s <95394061+shuhaib-aot@users.noreply.github.com>
Date: Tue, 16 Jan 2024 22:14:37 -0800
Subject: [PATCH] Revert "Removed Colors and added color variables in
 styles.scss file" (#1851)

---
 forms-flow-web/src/styles.scss | 217 +++++++++++++++++++++------------
 1 file changed, 137 insertions(+), 80 deletions(-)

diff --git a/forms-flow-web/src/styles.scss b/forms-flow-web/src/styles.scss
index fec44e627e..a1dd9565cc 100644
--- a/forms-flow-web/src/styles.scss
+++ b/forms-flow-web/src/styles.scss
@@ -2,6 +2,42 @@
 
 @charset "UTF-8";
 
+$white: #fff;
+$grey: #6c757d;
+$gray-100: #f8f9fa;
+$gray-200: #e9ecef;
+$gray-300: #dee2e6;
+$gray-400: #ced4da;
+$gray-500: #adb5bd;
+$gray-600: #868e96;
+$gray-700: #495057;
+$gray-800: #373a3c;
+$gray-900: #212529;
+$black: #000;
+
+$blue: #4D61FC;
+$indigo: #6610f2;
+$purple: #613d7c;
+$pink: #e83e8c;
+$red: #ff0039;
+$orange: #f2661f;
+$yellow: #fcba19;
+$green: #3fb618;
+$teal: #20c997;
+$cyan: #9954bb;
+$lightblue: #4d61fc;
+
+$primary: $blue;
+$secondary: $grey;
+$success: $green;
+$info: $lightblue;
+$warning: $yellow;
+$danger: $red;
+$light: $gray-100;
+$dark: $gray-800;
+
+ 
+
 .overflow-x-auto {
   overflow-x: auto;
   overflow-y: hidden;
@@ -13,22 +49,22 @@
 }
 
 .text-primary {
-  color: var(--color-info);
+  color: $primary;
 }
 
  
 
 .btn-primary {
-  background-color: var(--color-info);
+  background-color: $primary;
 }
 
 .btn-outline-primary:not(:disabled) {
-  border-color: var(--color-primary);
-  color: var(--color-primary);
+  border-color: #0071EB;
+  color: #0071EB;
 
   &:hover {
-    color: var(--color-white);
-    background-color: var(--color-info);
+    color: #ffffff;
+    background-color: $primary;
   }
 }
 
@@ -84,16 +120,16 @@ body {
 }
 
 .well {
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid #eeeeee;
   padding: 1rem;
-  background-color: var(--color-gray-100);
+  background-color: #f8f8f8bf;
 }
 
 .formio-component-panel {
-  border: 1px solid var(--color-gray-200);
+  border: 1px solid #eeeeee;
 
   .panel-heading {
-    background-color: var(--color-gray-200);
+    background-color: #eeeeee;
     padding: 10px 0 10px 10px;
 
     .panel-title i {
@@ -107,8 +143,8 @@ body {
 }
 
 .page-item.active .page-link {
-  background-color:  var(--color-background-blue) !important;
-  border-color: var(--color-secondary) !important;
+  background-color:  #4183c4 !important;
+  border-color: #56595d !important;
 }
 
 h5,
@@ -117,23 +153,23 @@ h5,
 }
 
 .bg-default {
-  background-color: var(--color-background-blue);
-  border: var(--color-background-blue);
-  color: var(--color-white) !important;
+  background-color: #38598a;
+  border: #38598a;
+  color: white !important;
 }
 
 .text-muted {
-  color: var(--color-gray-600) !important;
+  color: #868e96 !important;
 }
 
 i.fa.fa-question-circle.text-muted {
-  color: var(--color-question-circle) !important;
+  color: #2e96ff !important;
 }
 
 .panel-heading {
-  background-color: var(--color-background-blue);
-  border: var(--color-background-blue);
-  color: var(--color-white) !important;
+  background-color: #38598a;
+  border: #38598a;
+  color: white !important;
   padding: 0.75rem 1.25rem;
   margin-bottom: 8px;
 }
@@ -149,21 +185,21 @@ i.fa.fa-question-circle.text-muted {
 
 .formio-error-wrapper,
 .has-error {
-  color: var(--color-red);
-  background-color: var(--color-white);
-  border-color: var(--color-red);
+  color: red;
+  background-color: #fff;
+  border-color: red;
 
   label {
-    color: var(--color-red);
+    color: red;
   }
 }
 
 .formio-errors .error {
-  color: var(--color-red);
+  color: red;
 }
 
 .is-invalid {
-  background-color: var(--color-invalid);
+  background-color: #ffd1d1;
 }
 
 .nav-dropdown {
@@ -174,11 +210,11 @@ i.fa.fa-question-circle.text-muted {
     right: 0;
     top: 2rem;
     left: auto;
-    box-shadow: 0 8px 16px 0 var(--color-black);
+    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
   }
 
   .dropdown-toggle {
-    color: var(--color-white) !important;
+    color: white !important;
 
     a {
       text-decoration: none;
@@ -189,7 +225,7 @@ i.fa.fa-question-circle.text-muted {
     padding: 0 0 0 0;
     font-size: 2rem;
     float: right;
-    color: var(--color-background-blue);;
+    color: #1264b6e0;
   }
 }
 
@@ -203,12 +239,12 @@ i.fa.fa-question-circle.text-muted {
 
 .main-nav {
   text-decoration: none !important;
-  color: var(--color-black) !important;
+  color: $black  !important;
   font-size: 20px !important;
 }
 
 .nav-user-role {
-  color: var(--color-blue-dkst);
+  color: #003366;
   font-size: 15px;
   font-weight: bold;
   padding: 0 0;
@@ -217,7 +253,7 @@ i.fa.fa-question-circle.text-muted {
 .nav-user-email {
   font-size: 14px;
   padding: 0 0;
-  color: var(--color-dark);
+  color: #373a3c;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -227,7 +263,7 @@ i.fa.fa-question-circle.text-muted {
   font-size: 20px;
   padding: 0 0;
   font-weight: 600;
-  color: var(--color-dark:);
+  color: #373a3c;
 }
 
 .nav-logout {
@@ -237,31 +273,31 @@ i.fa.fa-question-circle.text-muted {
 }
 
 .nav-tabs .nav-link.active {
-  color: var(--color-gray-800);
-  background-color: var(--color-white);
-  border-color: var(--color-gray-200) !important;
+  color: #4d4d4d;
+  background-color: #f5f5f5;
+  border-color: #f5f5f5 !important;
 }
 
 .nav-link {
   a {
-    color: var(--color-black);
+    color: black;
   }
 }
 
 .active {
-  background-color: var(--color-white);
+  background-color: $white;
 }
 
 .active-tab {
-  //color: var(--color-info) !important;
-  //border-bottom: 1px solid var(--color-red);
+  //color: $lightblue !important;
+  //border-bottom: 1px solid red;
   background-color: transparent;
   filter: invert(36%) sepia(38%) saturate(7152%) hue-rotate(227deg) brightness(101%) contrast(98%);
 }
 
 .active-tab-dropdown>#dashboard-dropdown {
-  //color: var(--color-info) !important;
-  //border-bottom: 1px solid var(--color-red);
+  //color: $lightblue !important;
+  //border-bottom: 1px solid red;
   background-color: transparent;
   filter: invert(36%) sepia(38%) saturate(7152%) hue-rotate(227deg) brightness(101%) contrast(98%);
 }
@@ -269,18 +305,18 @@ i.fa.fa-question-circle.text-muted {
  
 .dropdown-item:hover {
   filter: none;
-  background-color: var(--color-gray-200);
+  background-color: #e9ecef;
 }
 
 .selected-tag {
-  color: var(--color-info)  !important;
-  border-bottom: 1px solid var(--color-info);
+  color: $lightblue  !important;
+  border-bottom: 1px solid $lightblue;
   background-color: transparent;
 }
 
 .lbl-logout {
   font-size: 16px;
-  color: var(--color-dark);
+  color: #373a3c;
   margin-left: 10px;
   cursor: pointer;
 }
@@ -295,9 +331,9 @@ i.fa.fa-question-circle.text-muted {
   right: 9px;
   display: inline-block;
   border-right: 7px solid transparent;
-  border-bottom: 7px solid var(--color-gray-400);
+  border-bottom: 7px solid #ccc;
   border-left: 7px solid transparent;
-  border-bottom-color: var(--color-black);
+  border-bottom-color: rgba(0, 0, 0, 0.2);
   content: "";
 }
 
@@ -307,7 +343,7 @@ i.fa.fa-question-circle.text-muted {
   right: 10px;
   display: inline-block;
   border-right: 6px solid transparent;
-  border-bottom: 6px solid var(--color-white);
+  border-bottom: 6px solid #ffffff;
   border-left: 6px solid transparent;
   content: "";
 }
@@ -361,12 +397,17 @@ i.fa.fa-question-circle.text-muted {
 
 .lbl-app-nanme {
   font-size: 20px;
-  color: var(--color-white);
+  color: #ffff;
   margin-bottom: 0;
   font-weight: bold;
   margin-left: 20px;
 }
 
+.app-name {
+  color: $yellow;
+  margin: 0;
+}
+
 .nav-icons {
   vertical-align: text-top;
   margin-right: 3px;
@@ -377,7 +418,7 @@ i.fa.fa-question-circle.text-muted {
 }
 
 .navbar-dark.navbar-toggler {
-  border-color: var(--color-white);
+  border-color: white;
 }
 
 .back-icon {
@@ -445,8 +486,8 @@ i.fa.fa-question-circle.text-muted {
 }
 
 .tooltip-inner {
-  color: var(--color-black) !important;
-  background-color: var(--color-white) !important;
+  color: black !important;
+  background-color: white !important;
   border: 0.5px solid !important;
   text-align: left;
 }
@@ -462,7 +503,7 @@ i.fa.fa-question-circle.text-muted {
 }
 
 select option:hover {
-  box-shadow: 0 0 10px 100px var(--color-black) inset;
+  box-shadow: 0 0 10px 100px #000 inset;
 }
 
 .modal-dialog {
@@ -472,32 +513,40 @@ select option:hover {
  
 
 #sidebar {
-  background: var(--color-white);
+  background: #fff;
 }
 
 .content {
-  background-color: var(--color-light);
+  background-color: #f8f8f8;
 }
 
 #sidebar ul li.active>a,
 #sidebar a[aria-expanded="true"] {
-  background: var(--color-white);
+  background: #fff;
 }
 
 header nav {
-  border-bottom: var(--color-white);
+  border-bottom: #fff;
+}
+
+.topheading-border-bottom {
+  z-index: 2000;
+  border-bottom: 2px solid #4d61fc !important;
+  padding: 0 0.5rem !important;
+  box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.2),
+    0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
 }
 
 .rounded-circle {
   border-radius: 50% !important;
-  border: 2px solid var(--light-gray);
+  border: 2px solid lightgrey;
   height: 40px;
   width: 40px;
 }
 
 .sort-span {
   cursor: pointer;
-  border: 1px solid var(--color-primary);
+  border: 1px solid #0071EB;
   border-radius: 0.25rem;
   padding: 4px;
   padding-left: 6px;
@@ -508,10 +557,10 @@ header nav {
 
 .sort-span:hover {
 
-  background-color: var(--color-primary);
+  background-color: #0071EB;
 
   .fa-lg-hover {
-    color: var(--color-white);
+    color: white;
   }
 }
 
@@ -519,7 +568,7 @@ header nav {
   font-size: 30px;
   font-weight: 600;
   /*margin-left: -15px!important;*/
-  color: var(--color-black);
+  color: black;
 }
 
 div[disabled] {
@@ -536,6 +585,10 @@ div[disabled] {
   }
 }
 
+.css-79elbk {
+  // position: none;
+}
+
 .classApplicationId {
   width: 15%;
 }
@@ -557,7 +610,7 @@ div[disabled] {
 }
 
 .navbar-light .navbar-nav .nav-link {
-  color: var(--color-black)
+  color: rgba(0, 0, 0, .9);
 }
 
 // overwriting default styles
@@ -576,12 +629,16 @@ div[disabled] {
 
 .delete_button {
   font-size: 25px;
-  color: var(--color-red);
+  color: red;
   cursor: pointer;
 }
 
+.custom_primary_color {
+  color: #0000FF;
+}
+
 .tooltiptext {
-  color: var(--color-gray-600);
+  color: #757575;
 }
 
 .select_download {
@@ -603,11 +660,11 @@ div[disabled] {
 }
 
 a {
-  color: var(--color-primary);
+  color: #0000FF;
 }
 
 .info-background {
-  background-color: var(--color-info-background);
+  background-color: #FFDBDB;
 }
 
 .formio-wizard-nav-container {
@@ -623,8 +680,8 @@ a {
 }
 
 div.upload {
-  background-color: var(--color-gray-200);
-  border: 1px solid var(--color-gray-300);
+  background-color: rgb(239, 239, 239);
+  border: 1px solid #ddd;
   border-radius: 5px;
   display: inline-block;
   height: 30px;
@@ -650,10 +707,10 @@ div.upload input[type="file"] {
 }
 
 .uploadButton {
-  background-color: var(--color-primary);
+  background-color: #425F9C;
   border: none;
   border-radius: 3px;
-  color: var(--color-white);
+  color: #FFF;
   cursor: pointer;
   display: inline-block;
   height: 30px;
@@ -673,19 +730,19 @@ div.upload input[type="file"] {
 }
 
 .searchInvalid {
-  border-color: var(--color-failure)!important;
-  background-color: var(--color-white);
+  border-color: #ff2727 !important;
+  background-color: rgb(255, 255, 255);
 }
 
 .validation-err {
-  color: var(--color-red);
+  color: red;
   margin-left: 52px;
   font-size: 13px;
 }
 
 .chip-element{
   border-radius: 100rem;
-  box-shadow: 0 0 0 2px var(--color-main-bg);
+box-shadow: 0 0 0 2px rgb(217, 217, 217);
 
   .chip-label{
       padding: 3px 6px 3px 10px;
@@ -696,10 +753,10 @@ div.upload input[type="file"] {
   .chip-close{
       margin-left: 5px;
       border-radius: 50%;
-      background-color: var(--color-main-bg);
+      background-color: #d4d4d4;
       width: 20px;
       height: 20px;
-      color: var(--color-gray-800);
+      color: #393939;
       font-weight: 100;
       cursor: pointer;
       display: inline-flex;
@@ -708,8 +765,8 @@ div.upload input[type="file"] {
       justify-content: center;
 
       &:hover{
-          background-color: var(--color-failure);
-          color: var(--color-white);
+          background-color: #fc4f4f;
+          color: #fff;
       }
   }
 }