From 4648d8e5931c42a77f7e0c65abd939e2afd5db3d Mon Sep 17 00:00:00 2001
From: James Hillyerd <james@hillyerd.com>
Date: Mon, 21 Sep 2020 16:16:00 -0700
Subject: [PATCH] ui: Use OpenSans font (#178)

---
 CHANGELOG.md         | 7 +++++++
 ui/package-lock.json | 5 +++++
 ui/package.json      | 4 +++-
 ui/src/index.js      | 1 +
 ui/src/main.css      | 5 +++--
 ui/src/navbar.css    | 1 +
 ui/webpack.config.js | 2 --
 7 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index acbc472..dc8859b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,13 @@ Change Log
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+
+### Changed
+- The UI now includes the Open Sans webfont instead of relying on browser/OS
+  fonts
+
+
 ## [v3.0.0-beta3]
 
 ### Added
diff --git a/ui/package-lock.json b/ui/package-lock.json
index a2884da..d8bf76d 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -5192,6 +5192,11 @@
         "wrappy": "1"
       }
     },
+    "opensans-npm-webfont": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/opensans-npm-webfont/-/opensans-npm-webfont-1.0.0.tgz",
+      "integrity": "sha512-2ehgrX+NpoxLOil30tYGr0cDsDXSJn9gon6PfM1Ki0CxZF6ui9Mi6Dm5DGglKyK2QiX0gMb6Ch7VmRHwfc4M6Q=="
+    },
     "opn": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz",
diff --git a/ui/package.json b/ui/package.json
index 9063068..b23127a 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -10,7 +10,9 @@
     "dev": "webpack-dev-server --mode development --port 3000 --hot --watch",
     "errors": "webpack --mode development --display-error-details"
   },
-  "dependencies": {},
+  "dependencies": {
+    "opensans-npm-webfont": "^1.0.0"
+  },
   "devDependencies": {
     "@babel/core": "^7.11.4",
     "@babel/preset-env": "^7.11.0",
diff --git a/ui/src/index.js b/ui/src/index.js
index 9d2adf5..be5eb29 100644
--- a/ui/src/index.js
+++ b/ui/src/index.js
@@ -3,6 +3,7 @@ import './mailbox.css'
 import './navbar.css'
 import '@fortawesome/fontawesome-free/css/all.css'
 import '@webcomponents/webcomponentsjs/webcomponents-bundle'
+import 'opensans-npm-webfont'
 import { Elm } from './Main.elm'
 import './monitorMessages'
 import './renderedHtml'
diff --git a/ui/src/main.css b/ui/src/main.css
index 3e2d826..57e8bd3 100644
--- a/ui/src/main.css
+++ b/ui/src/main.css
@@ -46,8 +46,9 @@ body {
 }
 
 body, button, input, table {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Open Sans", Helvetica, Arial, sans-serif;
   font-size: 14px;
+  font-weight: 400;
   line-height: 1.43;
   color: var(--primary-color);
 }
@@ -245,7 +246,7 @@ h3 {
   font-weight: 400;
   height: 30px;
   margin: 0;
-  padding: 5px 10px;
+  padding: 5px 10px 6px;
   text-align: center;
   text-decoration: none;
   text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
diff --git a/ui/src/navbar.css b/ui/src/navbar.css
index 6b0e118..00454d5 100644
--- a/ui/src/navbar.css
+++ b/ui/src/navbar.css
@@ -25,6 +25,7 @@
 
 .navbar-brand {
   font-size: 18px;
+  font-weight: 600;
 }
 
 .navbar-toggle {
diff --git a/ui/webpack.config.js b/ui/webpack.config.js
index 4e577e7..206778e 100644
--- a/ui/webpack.config.js
+++ b/ui/webpack.config.js
@@ -35,12 +35,10 @@ module.exports = (env, argv) => {
           ],
         },
         {
-          include: [/\/src/, /\/node_modules\/@fortawesome\/fontawesome-free\/css/],
           test: /\.css$/,
           loader: ['style-loader', 'css-loader'],
         },
         {
-          include: [/\/node_modules\/@fortawesome\/fontawesome-free\/webfonts/],
           test: /\.(eot|svg|ttf|woff|woff2)$/,
           loader: 'file-loader',
           options: {