Allow setting system UI font as font over monospace

Some find monospace a bit difficult to read, especially when it comes
to large blocks of text.

components/app.js

@@ -383,6 +383,10 @@ export default class App extends Component {
 			}
 		}
 
+		if (this.state.settings.systemUIFont) {
+			document.body.style = "font-family: system-ui";
+		}
+
 		this.setState({ loading: false, connectParams: connectParams });
 
 		if (connectParams.autoconnect) {

components/settings-form.js

@@ -8,6 +8,7 @@ export default class SettingsForm extends Component {
 
 		this.state.secondsInTimestamps = props.settings.secondsInTimestamps;
 		this.state.bufferEvents = props.settings.bufferEvents;
+		this.state.systemUIFont = props.settings.systemUIFont;
 
 		this.handleInput = this.handleInput.bind(this);
 		this.handleSubmit = this.handleSubmit.bind(this);
@@ -97,6 +98,15 @@ export default class SettingsForm extends Component {
 					Hide chat events
 				</label>
 				<br/><br/>
+				<label>
+					<input
+						type="checkbox"
+						name="systemUIFont"
+						checked=${this.state.systemUIFont}
+					/>
+					Use system UI font rather than monospace
+				</label>
+				<br/><br/>
 
 				${protocolHandler}
 

state.js

@@ -213,6 +213,7 @@ export const State = {
 			settings: {
 				secondsInTimestamps: true,
 				bufferEvents: BufferEventsDisplayMode.FOLD,
+				systemUIFont: false,
 			},
 		};
 	},