restyled navigation pannel

6 files changed, 30 insertions, 26 deletions

diff --git a/src/assets/styles/bmc/custom/_base.scss b/src/assets/styles/bmc/custom/_base.scss
index 4e33e8ce..dcf563d6 100644
--- a/src/assets/styles/bmc/custom/_base.scss
+++ b/src/assets/styles/bmc/custom/_base.scss
@@ -57,7 +57,7 @@ h6,
   font-weight: bold;
   font-size: 24px;
   line-height: 28px;
-  color: $text-h1-color;
+  color: $text-primary;
   margin: 0;
 }
 
diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss
index 5b0d1e31..c80c62a6 100644
--- a/src/assets/styles/bmc/custom/_buttons.scss
+++ b/src/assets/styles/bmc/custom/_buttons.scss
@@ -21,7 +21,7 @@
 }
 
 .btn-primary {
-  background-color: $button-color;
+  background-color: $red-brand-primary;
   border-radius: 8px;
   border: none;
   font-family: Inter;
@@ -30,23 +30,23 @@
   font-size: 16px;
   line-height: 20px;
   &:hover {
-    background-color: $button-color-hover;
+    background-color: $red-brand-primary-hover;
   }
   &:not(:disabled):not(.disabled):active:focus,
   &:focus-visible {
     border: none;
     box-shadow: none;
-    background-color: $button-color-click;
+    background-color: $red-brand-primary-click;
   }
   &:focus {
     border: none;
     box-shadow: 0px 0px 0px 4px rgba(225, 23, 23, 0.5);
-    background-color: $button-color;
+    background-color: $red-brand-primary;
   }
   &:active {
     border: none;
     box-shadow: none;
-    background-color: $button-color;
+    background-color: $red-brand-primary;
   }
 }
 
@@ -62,7 +62,7 @@
 // Global style for all button link
 .btn-link {
   font-weight: $headings-font-weight;
-  fill: theme-color("primary");
+  color: $text-primary;
   text-decoration: none !important;
   &:hover {
     background-color: gray("200");
diff --git a/src/assets/styles/bmc/custom/_dropdown.scss b/src/assets/styles/bmc/custom/_dropdown.scss
index 969c4c68..010b9b3f 100644
--- a/src/assets/styles/bmc/custom/_dropdown.scss
+++ b/src/assets/styles/bmc/custom/_dropdown.scss
@@ -7,12 +7,12 @@
   padding-left: $spacer/4;
   margin-top: -1 * $spacer/4;
 }
-.b-dropdown-form {
-  padding: $spacer/2;
-  .form-group {
-    margin-bottom: $spacer/2;
-  }
-}
+// .b-dropdown-form {
+//   padding: $spacer/2;
+//   .form-group {
+//     margin-bottom: $spacer/2;
+//   }
+// }
 // Table filter dropdown clear button style
 .table-filter {
   .dropdown-item {
diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss
index 8524f2ff..693b5e0b 100644
--- a/src/assets/styles/bmc/custom/_forms.scss
+++ b/src/assets/styles/bmc/custom/_forms.scss
@@ -14,10 +14,6 @@
   line-height: $form-line-height;
 }
 
-.form-group {
-  margin-bottom: $spacer * 2;
-}
-
 .custom-select,
 .form-control,
 .input-group-text {
@@ -28,7 +24,7 @@
 .custom-select,
 .form-control {
   &:active {
-    border: 1px solid $primary!important;
+    // border: 1px solid $primary!important;
   }
   &:focus {
     // color: theme-color("dark");
@@ -50,6 +46,7 @@
 .form-control {
   color: theme-color("dark") !important;
   font-size: 1rem;
+  border-radius: 8px;
 }
 
 // Inverted form colors
@@ -59,10 +56,10 @@
   .form-control {
     border-radius: 8px;
     border: none;
-    background-color: $input-background;
+    background-color: $faint-secondary-primary-5;
     &:hover {
       // opacity: 0.1;
-      background-color: $input-background-hover;
+      background-color: $faint-secondary-primary-5-hover;
     }
     &:focus {
       border: 1px solid gray("400");
diff --git a/src/assets/styles/bmc/helpers/_colors.scss b/src/assets/styles/bmc/helpers/_colors.scss
index d6412140..32e93260 100644
--- a/src/assets/styles/bmc/helpers/_colors.scss
+++ b/src/assets/styles/bmc/helpers/_colors.scss
@@ -40,10 +40,19 @@ $loading-color: $primary;
 $navbar-color: $primary;
 
 $login-page-description-color: rgba(12, 28, 41, 0.6);
-$text-h1-color: #0C1C29;
 
-$input-background:  rgba(26, 62, 91, 0.05);
-$input-background-hover:  rgba(20, 39, 53, 0.103);
+$text-primary: #0C1C29;
+
+$faint-secondary-primary-5: rgba(26, 62, 91, 0.05);
+$faint-secondary-primary-5-hover:  rgba(20, 39, 53, 0.103);
+$faint-brand-primary-40:rgba(225, 23, 23, 0.4);
+
+$red-brand-primary: #E11717;
+$red-brand-primary-hover: #FC2A2A;
+$red-brand-primary-active: #df2323;
+$red-brand-primary-disabled: #E17171;
+$red-brand-primary-click:  #C71414;
+$red-brand-primary-5: rgba(225, 23, 23, 0.05);
 
 $button-color: #E11717;
 $button-color-hover: #FC2A2A;
@@ -51,5 +60,3 @@ $button-color-active: #df2323;
 $button-color-disabled: #E17171;
 $button-color-click:  #C71414;
 
-$nav-link-bg: rgba(225, 23, 23, 0.4);
-
diff --git a/src/assets/styles/bmc/helpers/_variables.scss b/src/assets/styles/bmc/helpers/_variables.scss
index 0c8763b0..babb0b89 100644
--- a/src/assets/styles/bmc/helpers/_variables.scss
+++ b/src/assets/styles/bmc/helpers/_variables.scss
@@ -9,7 +9,7 @@ $transition-collapse:         height $duration--slow-01 $standard-easing--expres
 $responsive-layout-bp: lg;
 $top-header-height: 56px;
 $header-height: 95px;
-$navigation-width: 300px;
+$navigation-width: 320px;
 $form-label-font-size: .875rem;
 $form-line-height: 1.25rem;
 $box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3);