chore(ui): switch from Lato to Open Sans fonts

ui/package.json

@@ -18,7 +18,6 @@
     "fast-deep-equal": "2.0.1",
     "favico.js": "0.3.10",
     "fontfaceobserver": "2.1.0",
-    "lato-font": "3.0.0",
     "lodash.debounce": "4.0.8",
     "lodash.throttle": "4.1.1",
     "lodash.uniqueid": "4.0.1",
@@ -51,7 +50,8 @@
     "react-tippy": "1.2.3",
     "react-transition-group": "4.1.1",
     "react-truncate": "2.4.0",
-    "semver": "6.1.1"
+    "semver": "6.1.1",
+    "typeface-open-sans": "0.0.54"
   },
   "scripts": {
     "start": "NODE_ENV=dev REACT_APP_BACKEND_URI=http://localhost:8080 react-scripts start",

ui/src/App.scss

@@ -1,4 +1,4 @@
-// bundled Lato font, so we don't need to talk to Google Fonts API
+// bundled font assets, so we don't need to talk to Google Fonts API
 @import "./Fonts.scss";
 
 // custom "dark" color, little less dark than flatly

ui/src/Components/Grid/AlertGrid/index.js

@@ -220,17 +220,13 @@ const AlertGrid = observer(
       // render to a different size and the swap can result in component resize.
       // For our grid this resize might leave gaps since everything uses fixed
       // position, so we use font observer and trigger repack when fonts are loaded
-
-      const font400 = new FontFaceObserver("Lato", {
-        weight: 400
-      });
-      // wait up to 30s, run no-op function on timeout
-      font400.load(null, 30000).then(this.masonryRepack, () => {});
-
-      const font700 = new FontFaceObserver("Lato", {
-        weight: 700
-      });
-      font700.load(null, 30000).then(this.masonryRepack, () => {});
+      for (const fontWeight of [300, 400, 600]) {
+        const font = new FontFaceObserver("Open Sans", {
+          weight: fontWeight
+        });
+        // wait up to 30s, run no-op function on timeout
+        font.load(null, 30000).then(this.masonryRepack, () => {});
+      }
     }
 
     render() {

ui/src/Components/Labels/FilterInputLabel/index.scss

@@ -13,8 +13,8 @@
   }
 }
 
-.components-filteredinputlabel > .badge,
-.components-filteredinputlabel > svg {
+.btn.components-filteredinputlabel > .badge,
+.btn.components-filteredinputlabel > svg {
   /* match outer badge font size */
   font-size: 100%;
 

ui/src/Fonts.scss

@@ -3,34 +3,13 @@
 // https://github.com/thomaspark/bootswatch/issues/55
 $web-font-path: "./empty.css";
 
-@font-face {
-  font-display: swap;
-  font-family: "Lato";
-  font-weight: 400;
-  font-style: normal;
-  text-rendering: optimizeLegibility;
-  src: url("~lato-font/fonts/lato-normal/lato-normal.woff2") format("woff2"),
-    url("~lato-font/fonts/lato-normal/lato-normal.woff") format("woff");
-}
+// Default for Bootstrap is 700 and it's a bit too thick for Open Sans
+$font-weight-bold: 600;
 
-@font-face {
-  font-display: swap;
-  font-family: "Lato";
-  font-weight: 400;
-  font-style: italic;
-  text-rendering: optimizeLegibility;
-  src: url("~lato-font/fonts/lato-normal-italic/lato-normal-italic.woff2")
-      format("woff2"),
-    url("~lato-font/fonts/lato-normal-italic/lato-normal-italic.woff")
-      format("woff");
-}
+// this is vaniall flatly but Lato was replaced by Open Sans
+// the rest was kept for fallback used by "font-display: swap;"
+$font-family-sans-serif: "Open Sans", -apple-system, BlinkMacSystemFont,
+  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
+  "Segoe UI Emoji", "Segoe UI Symbol" !default;
 
-@font-face {
-  font-display: swap;
-  font-family: "Lato";
-  font-weight: 700;
-  font-style: normal;
-  text-rendering: optimizeLegibility;
-  src: url("~lato-font/fonts/lato-semibold/lato-semibold.woff2") format("woff2"),
-    url("~lato-font/fonts/lato-semibold/lato-semibold.woff") format("woff");
-}
+@import "~typeface-open-sans/index.css";