Close settings modal on theme change or fullscreen

webclient/src/App.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useState, useLayoutEffect, useEffect, useRef, useCallback } from 'react';
 import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
 import localForage from 'localforage';
 import './Style-light.css';
@@ -132,7 +132,7 @@ function App() {
 		return () => document.removeEventListener('fullscreenchange', onFullScreenChange);
 	}, []);
 
-	useEffect(() => {
+	useLayoutEffect(() => {
 		if (theme === 'dark') {
 			document.body.style.backgroundColor = '#1a1a1a';
 		} else if (theme === 'black') {
@@ -187,16 +187,16 @@ function App() {
 
 						<div className="setting-group">
 							<h4>Theme</h4>
-							<button className={theme === '' ? 'active' : ''} onClick={() => { light() }}>Light</button>
-							<button className={theme === 'dark' ? 'active' : ''} onClick={() => { dark() }}>Dark</button>
-							<button className={theme === 'black' ? 'active' : ''} onClick={() => { black() }}>Black</button>
-							<button className={theme === 'red' ? 'active' : ''} onClick={() => { red() }}>Red</button>
+							<button className={theme === '' ? 'active' : ''} onClick={() => { light(); setSettingsOpen(false); }}>Light</button>
+							<button className={theme === 'dark' ? 'active' : ''} onClick={() => { dark(); setSettingsOpen(false); }}>Dark</button>
+							<button className={theme === 'black' ? 'active' : ''} onClick={() => { black(); setSettingsOpen(false); }}>Black</button>
+							<button className={theme === 'red' ? 'active' : ''} onClick={() => { red(); setSettingsOpen(false); }}>Red</button>
 							{fullScreenAvailable &&
 								<div style={{ marginTop: '0.5rem' }}>
 									{!isFullScreen ?
-										<button onClick={() => goFullScreen()}>Enter Fullscreen</button>
+										<button onClick={() => { goFullScreen(); setSettingsOpen(false); }}>Enter Fullscreen</button>
 										:
-										<button onClick={() => exitFullScreen()}>Exit Fullscreen</button>
+										<button onClick={() => { exitFullScreen(); setSettingsOpen(false); }}>Exit Fullscreen</button>
 									}
 								</div>
 							}