feat(styele): add fonts

client/src/style/App.scss

@@ -33,6 +33,8 @@
 // Views
 @import 'views/filter-dropdown';
 
+// fonts
+@import 'pages/fonts';
 
 .App {
   min-width: 960px;
@@ -40,11 +42,11 @@
 
 // =======
 
-body.hide-scrollbar .Pane2{
+body.hide-scrollbar .Pane2 {
   overflow: hidden;
 }
 
-.bp3-fill{
+.bp3-fill {
   .bp3-popover-wrapper,
   .bp3-popover-target {
     display: block;
@@ -82,25 +84,22 @@ body.hide-scrollbar .Pane2{
   max-width: 300px;
 }
 
-.bp3-timezone-picker{
-
-  .bp3-button{
-
-    [icon="caret-down"] {
+.bp3-timezone-picker {
+  .bp3-button {
+    [icon='caret-down'] {
       display: none;
     }
   }
 }
 
-.bp3-progress-bar.bp3-intent-primary .bp3-progress-meter{
+.bp3-progress-bar.bp3-intent-primary .bp3-progress-meter {
   background-color: #0066ff;
 }
 
-.bp3-overlay-backdrop{
-  background-color: rgba(0,10,30, .7);
+.bp3-overlay-backdrop {
+  background-color: rgba(0, 10, 30, 0.7);
 }
 
-
 .ReactVirtualized__Collection {
 }
 
@@ -176,4 +175,4 @@ body.hide-scrollbar .Pane2{
 /* List default theme */
 
 .ReactVirtualized__List {
-}
+}

client/src/style/pages/fonts.scss

@@ -0,0 +1,80 @@
+// Regular 1
+@font-face {
+  font-family: Noto Sans;
+  src: url('../fonts/NotoSans-Regular.woff') format('woff');
+  font-style: normal;
+  display: swap;
+  font-weight: 400;
+}
+
+//Bold 2
+@font-face {
+  font-family: Noto Sans;
+  src: url('../fonts/NotoSans-Black.woff') format('woff');
+  font-style: normal;
+  display: swap;
+  font-weight: 700;
+}
+
+// Extra Bold 3
+@font-face {
+  font-family: Noto Sans;
+  src: url('../fonts/NotoSans-ExtraBold.woff') format('woff');
+  font-style: normal;
+  font-weight: 900;
+  display: swap;
+}
+
+// Medium 4
+@font-face {
+  font-family: Noto Sans;
+  src: url('../fonts/NotoSans-Medium.woff') format('woff');
+  font-style: normal;
+  display: swap;
+  font-weight: 500;
+}
+
+// Light 5
+@font-face {
+  font-family: Noto Sans;
+  src: url('../fonts/NotoSans-Light.woff') format('woff');
+  font-style: normal;
+  display: swap;
+  font-weight: 300;
+}
+
+// Thin 6
+@font-face {
+  font-family: Noto Sans;
+  src: url('../fonts/NotoSans-Thin.woff') format('woff');
+  font-style: normal;
+  display: swap;
+  font-weight: 100;
+}
+
+// Italic 7
+@font-face {
+  font-family: Noto Sans;
+  src: url('../fonts/NotoSans-Italic.woff') format('woff');
+  font-style: italic;
+  display: swap;
+  font-weight: 400;
+}
+
+// Extra Light 8
+@font-face {
+  font-family: Noto Sans;
+  src: url('../fonts/NotoSans-ExtraLight.woff') format('woff');
+  font-style: normal;
+  display: swap;
+  font-weight: 400;
+}
+
+// SemiBold 9
+@font-face {
+  font-family: Noto Sans;
+  src: url('../fonts/NotoSans-SemiBold.woff') format('woff');
+  font-style: normal;
+  display: swap;
+  font-weight: 400;
+}

client/src/style/variables.scss

@@ -3,7 +3,7 @@
 $ns: bp3;
 
 $pt-popover-box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.02),
-0 2px 4px rgba(16, 22, 26, 0.1), 0 8px 24px rgba(16, 22, 26, 0.1);
+  0 2px 4px rgba(16, 22, 26, 0.1), 0 8px 24px rgba(16, 22, 26, 0.1);
 
 $blue1: #0069ff;
 $blue2: #0052ff;
@@ -24,9 +24,9 @@ $button-box-shadow-active: 0 0 0 !default;
 $button-intent-box-shadow: 0 0 0 !default;
 $button-intent-box-shadow-active: 0 0 0 !default;
 
-$button-background-color-disabled: #E9ECEF !default;
-$button-background-color: #E6EFFB !default;
-$button-background-color-hover: #CFDCEE !default;
+$button-background-color-disabled: #e9ecef !default;
+$button-background-color: #e6effb !default;
+$button-background-color-hover: #cfdcee !default;
 
 $sidebar-background: #01115e;
 $sidebar-text-color: #fff;