Add option for coloured edges on progress page

src/SettingsContent.js

@@ -10,17 +10,27 @@ export default class SettingsContent extends Component {
 		return (
 			<>
 				<h1 className="settings-header">Settings</h1>
-				<label className="settings-sound-container">
-					<Checkbox
-						checked={this.props.soundInput}
-						onChange={this.props.handleSoundInputChange}
-						inputProps={{ 'aria-label': 'checkbox' }}
-					/>
-					<span>Sound</span>
-				</label>
+				<div className="settings-options-container">
+					<label>
+						<Checkbox
+							checked={this.props.soundInput}
+							onChange={this.props.handleSoundInputChange}
+							inputProps={{ 'aria-label': 'checkbox' }}
+						/>
+						<span>Sound</span>
+					</label>
+					<label>
+						<Checkbox
+							checked={this.props.coloredEdgesInput}
+							onChange={this.props.handleColoredEdgesInputChange}
+							inputProps={{ 'aria-label': 'checkbox' }}
+						/>
+						<span>Coloured edges</span>
+					</label>
+				</div>
 
 				<h2 className="settings-theme-header">Theme</h2>
-				<div className="settings-themes-container">
+				<div className="settings-options-container">
 					{
 						this.props.themes.map((theme) =>
 							<Button