Add alternate font toggle to WebUI

data/web/src/js/Monitor/Redux/actions/setSimpleFont.js

@@ -0,0 +1,8 @@
+const SET_SIMPLE_FONT = 'SET_SIMPLE_FONT';
+
+const setSimpleFont = (simpleFont) => ({
+  type: SET_SIMPLE_FONT,
+  simpleFont,
+});
+
+export default setSimpleFont;

data/web/src/js/Monitor/Redux/reducers/monitorReducer.js

@@ -2,6 +2,7 @@ import _assign from 'lodash-es/assign';
 
 const initialState = {
   fontSize: 18,
+  simpleFont: false,
   showRelevantOnly: false,
   messageLog: [],
 };
@@ -19,6 +20,11 @@ const monitorReducer = (state = initialState, action) => {
         fontSize: action.fontSize,
       });
 
+    case 'SET_SIMPLE_FONT':
+      return _assign({}, state, {
+        simpleFont: action.simpleFont,
+      });
+
     case 'SET_SHOW_RELEVANT':
       return _assign({}, state, {
         showRelevantOnly: action.showRelevant,

data/web/src/js/Monitor/containers/MonitorControls.js

@@ -7,6 +7,7 @@ import '../../../styles/Monitor/containers/MonitorControls.scss';
 // Redux actions
 import setMonitorFontSize from '../Redux/actions/setMonitorFontSize';
 import setShowRelevant from '../Redux/actions/setShowRelevant';
+import setSimpleFont from '../Redux/actions/setSimpleFont';
 
 const mapReduxStateToProps = (reduxState) => ({
   fontSize: reduxState.monitor.fontSize,
@@ -16,6 +17,7 @@ const mapReduxStateToProps = (reduxState) => ({
   snesConnected: reduxState.gameState.connections.snesConnected,
   serverAddress: reduxState.gameState.connections.serverAddress,
   serverConnected: reduxState.gameState.connections.serverConnected,
+  simpleFont: reduxState.monitor.simpleFont,
 });
 
 const mapDispatchToProps = (dispatch) => ({
@@ -25,6 +27,9 @@ const mapDispatchToProps = (dispatch) => ({
   doToggleRelevance: (showRelevantOnly) => {
     dispatch(setShowRelevant(showRelevantOnly));
   },
+  doSetSimpleFont: (simpleFont) => {
+    dispatch(setSimpleFont(simpleFont));
+  },
 });
 
 class MonitorControls extends Component {
@@ -129,6 +134,8 @@ class MonitorControls extends Component {
     this.props.doToggleRelevance(event.target.checked);
   };
 
+  setSimpleFont = (event) => this.props.doSetSimpleFont(event.target.checked);
+
   render() {
     return (
       <div id="monitor-controls">
@@ -194,6 +201,14 @@ class MonitorControls extends Component {
           <div>
             Only show my items <input type="checkbox" onChange={ this.toggleRelevance } />
           </div>
+          <div>
+            Use alternate font
+            <input
+              type="checkbox"
+              onChange={ this.setSimpleFont }
+              defaultChecked={ this.props.simpleFont }
+            />
+          </div>
         </div>
       </div>
     );

data/web/src/js/WebUI/containers/WebUI.js

@@ -14,6 +14,7 @@ import appendMessage from '../../Monitor/Redux/actions/appendMessage';
 
 const mapReduxStateToProps = (reduxState) => ({
   connections: reduxState.gameState.connections,
+  simpleFont: reduxState.monitor.simpleFont,
 });
 
 const mapDispatchToProps = (dispatch) => ({
@@ -94,7 +95,7 @@ class WebUI extends Component {
 
   render() {
     return (
-      <div id="web-ui" ref={ this.webUiRef }>
+      <div id="web-ui" ref={ this.webUiRef } className={ this.props.simpleFont ? 'simple-font' : null }>
         <HeaderBar />
         <div id="content-middle">
           <Monitor />

data/web/src/styles/Monitor/containers/MonitorControls.scss

@@ -2,7 +2,6 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  height: 48px;
   margin-top: 0.5em;
   padding-bottom: 0.5em;
 
@@ -35,11 +34,10 @@
   #accessibility{
     display: flex;
     flex-direction: column;
-    height: 48px;
 
     button{
       border-radius: 4px;
       margin: 0.5em;
     }
   }
-}
+}

data/web/src/styles/WebUI/containers/WebUI.scss

@@ -1,9 +1,19 @@
+@font-face{
+    font-family: HyliaSerif;
+    src: local('HyliaSerif'), url('../../../assets/HyliaSerif.otf')
+}
+
 #web-ui{
   width: calc(100% - 1.5em);
   padding: 0.75em;
+  font-family: HyliaSerif, sans-serif;
+
+  &.simple-font{
+    font-family: sans-serif;
+  }
 
   #content-middle{
     display: flex;
     flex-direction: row;
   }
-}
+}

data/web/src/styles/index.scss

@@ -1,12 +1,6 @@
-@font-face{
-    font-family: HyliaSerif;
-    src: local('HyliaSerif'), url('../assets/HyliaSerif.otf')
-}
-
 body {
     background-color: #131313;
     color: #eae703;
-    font-family: HyliaSerif, serif;
     letter-spacing: 2px;
     margin: 0;
 }