From 98491163fac986940331827b6893682835c35e13 Mon Sep 17 00:00:00 2001
From: Matthew Grove <me@mgrove.uk>
Date: Sun, 30 Jan 2022 16:56:37 +0000
Subject: [PATCH] [FIX] test options styling

---
 src/ClassicTestStart.js   | 36 +++++++++++++++++++-----------------
 src/LivesTestStart.js     | 36 +++++++++++++++++++-----------------
 src/LoggedInHome.js       |  1 -
 src/css/SliderOverlay.css |  9 +++++++++
 4 files changed, 47 insertions(+), 35 deletions(-)

diff --git a/src/ClassicTestStart.js b/src/ClassicTestStart.js
index 70d2abc..f67b3df 100644
--- a/src/ClassicTestStart.js
+++ b/src/ClassicTestStart.js
@@ -5,6 +5,7 @@ import Checkbox from '@material-ui/core/Checkbox';
 
 import Slider from "rc-slider";
 import "rc-slider/assets/index.css";
+import "./css/SliderOverlay.css";
 
 export default function ClassicTestStart(props) {
 	return (
@@ -52,23 +53,24 @@ export default function ClassicTestStart(props) {
 					/>
 				</div>
 
-				<label>
-					<Checkbox
-						checked={props.switchLanguage}
-						onChange={props.handleSwitchLanguageChange}
-						inputProps={{ 'aria-label': 'checkbox' }}
-					/>
-					<span>Switch language</span>
-				</label>
-
-				<label>
-					<Checkbox
-						checked={props.ignoreCaps}
-						onChange={props.handleIgnoreCapsChange}
-						inputProps={{ 'aria-label': 'checkbox' }}
-					/>
-					<span>Ignore capitals</span>
-				</label>
+				<div className="test-options-container">
+					<label>
+						<Checkbox
+							checked={props.switchLanguage}
+							onChange={props.handleSwitchLanguageChange}
+							inputProps={{ 'aria-label': 'checkbox' }}
+						/>
+						<span>Switch language</span>
+					</label>
+					<label>
+						<Checkbox
+							checked={props.ignoreCaps}
+							onChange={props.handleIgnoreCapsChange}
+							inputProps={{ 'aria-label': 'checkbox' }}
+						/>
+						<span>Ignore capitals</span>
+					</label>
+				</div>
 
 				<Button
 					onClick={() => props.startTest("questions")}
diff --git a/src/LivesTestStart.js b/src/LivesTestStart.js
index 0fb9188..f83d933 100644
--- a/src/LivesTestStart.js
+++ b/src/LivesTestStart.js
@@ -5,6 +5,7 @@ import Checkbox from '@material-ui/core/Checkbox';
 
 import Slider from "rc-slider";
 import "rc-slider/assets/index.css";
+import "./css/SliderOverlay.css";
 
 export default function LivesTestStart(props) {
 	return (
@@ -52,23 +53,24 @@ export default function LivesTestStart(props) {
 					/>
 				</div>
 
-				<label>
-					<Checkbox
-						checked={props.switchLanguage}
-						onChange={props.handleSwitchLanguageChange}
-						inputProps={{ 'aria-label': 'checkbox' }}
-					/>
-					<span>Switch language</span>
-				</label>
-
-				<label>
-					<Checkbox
-						checked={props.ignoreCaps}
-						onChange={props.handleIgnoreCapsChange}
-						inputProps={{ 'aria-label': 'checkbox' }}
-					/>
-					<span>Ignore capitals</span>
-				</label>
+				<div className="test-options-container">
+					<label>
+						<Checkbox
+							checked={props.switchLanguage}
+							onChange={props.handleSwitchLanguageChange}
+							inputProps={{ 'aria-label': 'checkbox' }}
+						/>
+						<span>Switch language</span>
+					</label>
+					<label>
+						<Checkbox
+							checked={props.ignoreCaps}
+							onChange={props.handleIgnoreCapsChange}
+							inputProps={{ 'aria-label': 'checkbox' }}
+						/>
+						<span>Ignore capitals</span>
+					</label>
+				</div>
 
 				<Button
 					onClick={() => props.startTest("lives")}
diff --git a/src/LoggedInHome.js b/src/LoggedInHome.js
index 4274f8e..3799358 100644
--- a/src/LoggedInHome.js
+++ b/src/LoggedInHome.js
@@ -21,7 +21,6 @@ import "./css/History.css";
 import "./css/LoggedInHome.css";
 import "./css/PopUp.css";
 import "./css/OptionsListOverlay.css";
-import "./css/SliderOverlay.css";
 
 import { withRouter } from "react-router-dom";
 
diff --git a/src/css/SliderOverlay.css b/src/css/SliderOverlay.css
index df556ef..a4ea1b2 100644
--- a/src/css/SliderOverlay.css
+++ b/src/css/SliderOverlay.css
@@ -29,6 +29,15 @@
 	width: 26px;
 }
 
+.test-options-container {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	column-gap: 32px;
+	flex-wrap: wrap;
+}
+
 
 @media screen and (max-width: 500px) {
 	.slider-overlay-content {