From 32463d64355353ab8fd36c59847888909662f0df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Wed, 19 Jun 2019 23:09:13 +0100 Subject: [PATCH] chore(ui): switch from Lato to Open Sans fonts --- ui/package-lock.json | 10 ++--- ui/package.json | 4 +- ui/src/App.scss | 2 +- ui/src/Components/Grid/AlertGrid/index.js | 18 ++++----- .../Labels/FilterInputLabel/index.scss | 4 +- ui/src/Fonts.scss | 37 ++++--------------- 6 files changed, 25 insertions(+), 50 deletions(-) diff --git a/ui/package-lock.json b/ui/package-lock.json index c6a08d3cd..17eb4e633 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -9049,11 +9049,6 @@ "webpack-sources": "^1.1.0" } }, - "lato-font": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/lato-font/-/lato-font-3.0.0.tgz", - "integrity": "sha1-kbg34jdLZo+3Mx1EyJTTei2fjhE=" - }, "lazy-cache": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz", @@ -14563,6 +14558,11 @@ "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" }, + "typeface-open-sans": { + "version": "0.0.54", + "resolved": "https://registry.npmjs.org/typeface-open-sans/-/typeface-open-sans-0.0.54.tgz", + "integrity": "sha512-w6wOd6EicZdZKf0jSU/K3EzEi3zFgvWQSN7NOpRIQI5KeMWmC5Pg/lqtBVJHB0pRChYRmLdhf4h8ROur0A3JZQ==" + }, "ua-parser-js": { "version": "0.7.19", "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.19.tgz", diff --git a/ui/package.json b/ui/package.json index 4ad48fe94..d06b14f8d 100644 --- a/ui/package.json +++ b/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", diff --git a/ui/src/App.scss b/ui/src/App.scss index 0766396b3..3700c58d5 100644 --- a/ui/src/App.scss +++ b/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 diff --git a/ui/src/Components/Grid/AlertGrid/index.js b/ui/src/Components/Grid/AlertGrid/index.js index abcd7cf57..54f6cafe5 100644 --- a/ui/src/Components/Grid/AlertGrid/index.js +++ b/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() { diff --git a/ui/src/Components/Labels/FilterInputLabel/index.scss b/ui/src/Components/Labels/FilterInputLabel/index.scss index dc5b0c311..07220dbfb 100644 --- a/ui/src/Components/Labels/FilterInputLabel/index.scss +++ b/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%; diff --git a/ui/src/Fonts.scss b/ui/src/Fonts.scss index 28d9a8f2f..d4a4bd889 100644 --- a/ui/src/Fonts.scss +++ b/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";