Add depend: highcarts. Pages: power, analytical motherboard, memory, fans, event logs, Fix styles, add global components.

6 files changed, 217 insertions, 45 deletions

diff --git a/src/assets/styles/bmc/custom/_base.scss b/src/assets/styles/bmc/custom/_base.scss
index 8281ff52..6009774c 100644
--- a/src/assets/styles/bmc/custom/_base.scss
+++ b/src/assets/styles/bmc/custom/_base.scss
@@ -13,7 +13,7 @@ body {
   &::-webkit-scrollbar-thumb {
     margin-top: $header-height;
     border: 4px solid transparent;
-    background: rgba(14, 32, 48, 0.384);
+    background: $faint-secondary-primary-20;
     border-radius: 16px;
     background-clip: content-box;
   }
@@ -48,7 +48,7 @@ h6,
 }
 
 .regular-12px {
-  font-family: Inter;
+  font-family: 'Inter', sans-serif;
   font-size: 12px;
   font-style: normal;
   font-weight: 400;
@@ -62,10 +62,13 @@ h6,
     &.tretiatry {
       color: $text-tretiatry;
     }
+    &.quaternary {
+      color: $text-quaternary;
+    }
 }
 
 .light-12px {
-  font-family: Inter;
+  font-family: 'Inter', sans-serif;
   font-size: 12px;
   font-style: normal;
   font-weight: 300;
@@ -75,8 +78,20 @@ h6,
   color: $text-secondary;
 }
 
+.caption-12px {
+  font-family: 'Inter', sans-serif;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: 0em;
+  text-align: left;
+  color: $text-tretiatry;
+}
+
+
 .semi-bold-12px {
-  font-family: Inter;
+  font-family: 'Inter', sans-serif;
   font-size: 12px;
   font-style: normal;
   font-weight: 600;
@@ -86,7 +101,7 @@ h6,
 }
 
 .semi-bold-12px__caps {
-  font-family: Inter;
+  font-family: 'Inter', sans-serif;
     font-size: 12px;
     font-style: normal;
     font-weight: 600;
@@ -94,14 +109,17 @@ h6,
     letter-spacing: 0em;
     text-align: left;
     text-transform: uppercase;
-    color: $text-primary !important;
+    color: $text-primary;
     &:hover {
-      color: $text-primary !important;
+      color: $text-primary;
+    }
+    &.tretiatry {
+      color: $text-tretiatry !important;
     }
 }
 
 .bold-12px__caps {
-  font-family: Inter;
+  font-family: 'Inter', sans-serif;
   font-size: 12px;
   font-style: normal;
   font-weight: 700;
@@ -113,7 +131,7 @@ h6,
 }
 
 .medium-12px {
-  font-family: Inter;
+  font-family: 'Inter', sans-serif;
   font-size: 12px;
   font-style: normal;
   font-weight: 500;
@@ -123,8 +141,31 @@ h6,
   color: $text-primary;
 }
 
+.regular-14px {
+  font-family: 'Inter', sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+  letter-spacing: 0em;
+  text-align: left;
+  color: $text-secondary;
+}
+
+
+.regular-16px {
+  font-family: 'Inter', sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: 0em;
+  text-align: left;
+}
+
+
 .semi-bold-16px {
-  font-family: Inter;
+  font-family: 'Inter', sans-serif;
   font-size: 16px;
   font-style: normal;
   font-weight: 600;
@@ -132,8 +173,29 @@ h6,
   color: $text-primary;
 }
 
+.medium-16px {
+  font-family: 'Inter', sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+  letter-spacing: 0em;
+  text-align: left;
+  color: $text-primary;
+}
+
+.bold-16px {
+  font-family: 'Inter', sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+  letter-spacing: 0em;
+  text-align: left;
+}
+
 .bold-16px__caps {
-  font-family: Inter;
+  font-family: 'Inter', sans-serif;
   font-size: 16px;
   font-style: normal;
   font-weight: 700;
@@ -144,9 +206,18 @@ h6,
   color: $text-secondary;
 }
 
+.semi-bold-20px {
+  font-family: 'Inter', sans-serif;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 24px;
+  letter-spacing: 0em;
+  text-align: center;
+}
 
 .bold-24px {
-  font-family: Inter;
+  font-family: 'Inter', sans-serif;
   font-style: normal;
   font-weight: bold;
   font-weight: 700;
@@ -156,18 +227,8 @@ h6,
   margin: 0;
 }
 
-.text-login {
-  font-family: Inter;
-  font-style: normal;
-  font-weight: 500;
-  font-size: 12px;
-  line-height: 16px;
-  color: $login-page-description-color;
-  margin: 0 0 0 15px;
-}
-
 .auth-description {
-  font-family: Inter;
+  font-family: 'Inter', sans-serif;
   font-style: normal;
   font-weight: normal;
   font-size: 12px;
diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss
index 1afcac0b..e128a6db 100644
--- a/src/assets/styles/bmc/custom/_buttons.scss
+++ b/src/assets/styles/bmc/custom/_buttons.scss
@@ -24,7 +24,7 @@
   background-color: $red-brand-primary;
   border-radius: 8px;
   border: none;
-  font-family: Inter;
+  font-family: 'Inter', sans-serif;
   font-style: normal;
   font-weight: 600;
   font-size: 16px;
@@ -51,11 +51,31 @@
 }
 
 .btn-secondary {
-  fill: currentColor;
-  &:focus,
-  &:not(:disabled):not(.disabled):active:focus {
-    border-color: $white;
-    box-shadow: inset 0 0 0 2px theme-color('secondary');
+  background-color: $faint-secondary-primary-5;
+  color: $red-brand-primary;
+  border-radius: 8px;
+  border: none;
+  font-family: 'Inter', sans-serif;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 20px;
+  &:hover {
+    background-color: $faint-secondary-primary-5-hover;
+    color: $red-brand-primary;
+  }
+  &:focus {
+    border: none;
+    box-shadow: 0px 0px 0px 4px rgba(225, 23, 23, 0.5);
+    color: $red-brand-primary;
+    background-color: $faint-secondary-primary-5;
+  }
+  &:not(:disabled):not(.disabled):active:focus,
+  &:focus-visible {
+    border: none;
+    box-shadow: none;
+    color: $red-brand-primary;
+    background-color: $faint-secondary-primary-20;
   }
 }
 
@@ -106,4 +126,22 @@
 .input-action-btn {
   padding: 7px;
   margin: 1px;
+}
+
+.collapse-button {
+  height: 56px;
+  width: 100%;
+  padding: 0 0 0 2rem;
+  margin: 0;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  gap: 8px;
+  &:active,
+  &:focus {
+    box-shadow: none;
+  }
+  &:hover {
+    color: $text-primary;
+  }
 }
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss
index 9e30359c..7c0a0bd6 100644
--- a/src/assets/styles/bmc/custom/_forms.scss
+++ b/src/assets/styles/bmc/custom/_forms.scss
@@ -41,13 +41,25 @@
   }
 }
 
+.form-control::-webkit-outer-spin-button,
+.form-control::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.form-control[type='number'] {
+  -moz-appearance: textfield;
+}
+
 // .custom-select,
 // .custom-control-label,
-// .form-control {
-  // color: theme-color("dark") !important;
-  // font-size: 1rem;
-  // border-radius: 8px;
-// }
+.form-control {
+  border-radius: 8px;
+  border: none;
+  background-color: $faint-secondary-primary-5;
+  &:hover {
+    background-color: $faint-secondary-primary-5-hover;
+  }
+}
 
 // Inverted form colors
 .form-background {
@@ -79,6 +91,13 @@
   line-height: $form-line-height;
 }
 
+.custom-checkbox ::before {
+  box-shadow: none !important;
+  border: 2px solid $on-surface-secondary;
+  background-color: #fff;
+  border-radius: 3px;
+}
+
 .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after,
 .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before,
 .custom-control-input:checked ~ .custom-control-label::before  {
diff --git a/src/assets/styles/bmc/custom/_popover.scss b/src/assets/styles/bmc/custom/_popover.scss
index 681547d1..f539ef54 100644
--- a/src/assets/styles/bmc/custom/_popover.scss
+++ b/src/assets/styles/bmc/custom/_popover.scss
@@ -15,7 +15,7 @@
   background-color: transparent;
   border: none;
   padding: 24px 0px 0px 24px;
-  width: 389px;
+  width: 400px;
 }
 
 .arrow {
diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss
index 48d49b2b..bc3be1b2 100644
--- a/src/assets/styles/bmc/custom/_tables.scss
+++ b/src/assets/styles/bmc/custom/_tables.scss
@@ -60,8 +60,7 @@
   .b-table-details {
     background-color: theme-color("light");
     td {
-      padding-left: calc(50px + (#{$table-cell-padding} * 2));
-      padding-right: calc(50px + (#{$table-cell-padding} * 2));
+      padding: 0px 16px 16px 16px;
     }
     dl {
       margin: 0;
@@ -208,8 +207,16 @@
   -moz-border-radius: 0 0 0 0;
 }
 
+.bootstrap-rounded-table__without-border {
+  border-top: none !important;
+  border-radius: 0 0 0 0;
+  -webkit-border-radius: 0 0 0 0;
+  -moz-border-radius: 0 0 0 0;
+}
+
 .bootstrap-rounded-table__head_bg {
   background-color: $faint-secondary-primary-10 !important;
+  color: $text-primary !important;
 }
 
 .bootstrap-rounded-table__td {
@@ -225,10 +232,53 @@
   }
 }
 
-
 .bootstrap-table {
   border-top: none !important;
   border: 1px solid rgba(26, 62, 91, 0.1);
   background-color: $faint-secondary-primary-5;
 }
 
+.bootstrap-analytical-table {
+  border: 1px solid rgba(26, 62, 91, 0.3);
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px; 
+  border-radius: 4px; 
+}
+
+.bootstrap-analytical-table__head_bg {
+  background-color: transparent !important;
+  color: $text-primary !important;
+}
+
+.bootstrap-analytical-table__column-first {
+  border-top: none !important;
+  border-radius: 10px 0 0 0;
+  -webkit-border-radius: 10px 0 0 0;
+  -moz-border-radius: 10px 0 0 0;
+}
+
+.bootstrap-analytical-table__column-last {
+  border-top: none !important;
+  border-radius: 0 10px 0 0;
+  -webkit-border-radius: 0 10px 0 0;
+  -moz-border-radius: 0 10px 0 0;
+}
+
+.bootstrap-analytical-table__column-center {
+  border-top: none !important;
+  border-radius: 0 0 0 0;
+  -webkit-border-radius: 0 0 0 0;
+  -moz-border-radius: 0 0 0 0;
+}
+
+.bootstrap-analytical-table__td {
+  border-radius: 0;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  -ms-border-radius: 0;
+  -o-border-radius: 0;
+  -khtml-border-radius: 0;
+  &:hover {
+    background-color: $faint-secondary-primary-5;
+  }
+}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/helpers/_colors.scss b/src/assets/styles/bmc/helpers/_colors.scss
index 584a7785..e15aef87 100644
--- a/src/assets/styles/bmc/helpers/_colors.scss
+++ b/src/assets/styles/bmc/helpers/_colors.scss
@@ -44,9 +44,20 @@ $login-page-description-color: rgba(12, 28, 41, 0.6);
 $text-primary: #0C1C29;
 $text-secondary: #0C1C29E5;
 $text-tretiatry: rgba(12, 28, 41, 0.6);
+$text-quaternary: rgba(12, 28, 41, 0.3);
+
+$indicators-errors: #FF4141;
+$indicators-succes: #4EBF19;
+$indicators-warning: #F0AC0C;
+$indicators-complementary:rgba(26, 62, 91, 0.6);;
+
+$on-surface-primary: #040A0F;
 
 $surface-secondary: #F3F4F5;
+$on-surface-secondary: rgba(4, 10, 15, 0.6);
+$on-surface-tretiatry: #040A0F4D;
 
+$faint-secondary-primary-2:  rgba(26, 62, 91, 0.02);
 $faint-secondary-primary-5: rgba(26, 62, 91, 0.05);
 $faint-secondary-primary-5-hover:  rgba(20, 39, 53, 0.103);
 $faint-secondary-primary-10: rgba(26, 62, 91, 0.1);
@@ -59,10 +70,3 @@ $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;
-$button-color-active: #df2323;
-$button-color-disabled: #E17171;
-$button-color-click:  #C71414;
-