restyled navigation pannel

10 files changed, 42 insertions, 26 deletions

diff --git a/src/assets/images/arrow-down.svg b/src/assets/images/arrow-down.svg
new file mode 100644
index 00000000..d20227fc
--- /dev/null
+++ b/src/assets/images/arrow-down.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.76668 5.2584L5.00002 2.02506L8.23335 5.2584C8.55835 5.5834 9.08335 5.5834 9.40835 5.2584C9.73335 4.9334 9.73335 4.4084 9.40835 4.0834L5.58335 0.258398C5.25835 -0.0666016 4.73335 -0.0666016 4.40835 0.258398L0.58335 4.0834C0.25835 4.4084 0.25835 4.9334 0.58335 5.2584C0.90835 5.57507 1.44168 5.5834 1.76668 5.2584Z" fill="#0C1C29" fill-opacity="0.9"/>
+</svg>
diff --git a/src/assets/images/arrow-up.svg b/src/assets/images/arrow-up.svg
new file mode 100644
index 00000000..dc9971f7
--- /dev/null
+++ b/src/assets/images/arrow-up.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.76668 0.741797L5.00002 3.97513L8.23335 0.741797C8.55835 0.416797 9.08335 0.416797 9.40835 0.741797C9.73335 1.0668 9.73335 1.5918 9.40835 1.9168L5.58335 5.7418C5.25835 6.0668 4.73335 6.0668 4.40835 5.7418L0.58335 1.9168C0.25835 1.5918 0.25835 1.0668 0.58335 0.741797C0.90835 0.42513 1.44168 0.416797 1.76668 0.741797Z" fill="#0C1C29" fill-opacity="0.9"/>
+</svg>
diff --git a/src/assets/images/search-icon.svg b/src/assets/images/search-icon.svg
new file mode 100644
index 00000000..b1565187
--- /dev/null
+++ b/src/assets/images/search-icon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.4999 14.0001H14.7099L14.4299 13.7301C15.6299 12.3301 16.2499 10.4201 15.9099 8.39014C15.4399 5.61014 13.1199 3.39014 10.3199 3.05014C6.08989 2.53014 2.52989 6.09014 3.04989 10.3201C3.38989 13.1201 5.60989 15.4401 8.38989 15.9101C10.4199 16.2501 12.3299 15.6301 13.7299 14.4301L13.9999 14.7101V15.5001L18.2499 19.7501C18.6599 20.1601 19.3299 20.1601 19.7399 19.7501C20.1499 19.3401 20.1499 18.6701 19.7399 18.2601L15.4999 14.0001ZM9.49989 14.0001C7.00989 14.0001 4.99989 11.9901 4.99989 9.50014C4.99989 7.01014 7.00989 5.00014 9.49989 5.00014C11.9899 5.00014 13.9999 7.01014 13.9999 9.50014C13.9999 11.9901 11.9899 14.0001 9.49989 14.0001Z" fill="#0C1C29" fill-opacity="0.9"/>
+</svg>
diff --git a/src/assets/images/sila-server-navbar-icon.svg b/src/assets/images/sila-server-navbar-icon.svg
new file mode 100644
index 00000000..8bcd2712
--- /dev/null
+++ b/src/assets/images/sila-server-navbar-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 0H0V4.06154H1.68421V4.8H0V9.2H1.68421V10H0V14.4H1.68421V15.2V16H14.3158V15.2V14.4H16V10H14.3158V9.2H16V4.8H14.3158V4.06154H16V0ZM13.4737 4.8V4.06154H2.52632V4.8H13.4737ZM0.842105 3.32308V0.738462H15.1579V3.32308H0.842105ZM2.10526 1.10769H1.26316V2.95385H2.10526V1.10769ZM2.94737 1.10769H3.78947V2.95385H2.94737V1.10769ZM5.05263 1.10769H4.21053V2.95385H5.05263V1.10769ZM5.89474 1.10769H6.73684V2.95385H5.89474V1.10769ZM13.8947 1.47692H11.3684V2.58462H13.8947V1.47692ZM13.4737 15.2H2.52632V14.4H13.4737V15.2ZM13.4737 10V9.2H2.52632V10H13.4737ZM0.842105 8.4V5.6H15.1579V8.4H0.842105ZM2.10526 8V6H1.26316V8H2.10526ZM2.94737 6H3.78947V8H2.94737V6ZM5.05263 6H4.21053V8H5.05263V6ZM5.89474 6H6.73684V8H5.89474V6ZM13.8947 6.4H11.3684V7.6H13.8947V6.4ZM0.842105 13.6V10.8H15.1579V13.6H0.842105ZM2.10526 13.2V11.2H1.26316V13.2H2.10526ZM2.94737 11.2H3.78947V13.2H2.94737V11.2ZM5.05263 11.2H4.21053V13.2H5.05263V11.2ZM5.89474 11.2H6.73684V13.2H5.89474V11.2ZM13.8947 11.6H11.3684V12.8H13.8947V11.6Z" fill="#0C1C29" fill-opacity="0.9"/>
+</svg>
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);