style: Restyle 'Show direction' checkbox to match menu buttons

mapper/src/App.css

@@ -97,6 +97,60 @@ h2 {
 	background-color: #666;
 }
 
+.submenu-checkbox-label {
+	/* Make it look like a button */
+	background-color: #666;
+	height: 2.5rem;
+	font-size: 1.5rem;
+	color: white;
+	cursor: pointer;
+
+	/* Center content */
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5rem;
+}
+
+.submenu-checkbox-label:hover {
+	background-color: #999;
+}
+
+.submenu-checkbox-label input[type="checkbox"] {
+	/* Reset default styles */
+	appearance: none;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	background-color: transparent;
+	margin: 0;
+
+	/* Custom checkbox style */
+	font: inherit;
+	color: currentColor;
+	width: 1.15em;
+	height: 1.15em;
+	border: 0.1em solid currentColor;
+	border-radius: 0;
+	transform: translateY(-0.075em);
+
+	/* For the checkmark */
+	display: grid;
+	place-content: center;
+}
+
+.submenu-checkbox-label input[type="checkbox"]::before {
+	content: "";
+	width: 0.75em;
+	height: 0.75em;
+	transform: scale(0);
+	transition: 120ms transform ease-in-out;
+	background-color: white;
+}
+
+.submenu-checkbox-label input[type="checkbox"]:checked::before {
+	transform: scale(1);
+}
+
 .datepicker .rdtPicker {
 	background: none;
 	border: none;

mapper/src/App.js

@@ -431,16 +431,14 @@ function Menu({duration, setDuration, end, setEnd, slider, setSlider, submenu, s
 								<h2>Misc</h2>
 								<button onClick={() => setSubmenu(false)}>×</button>
 							</div>
-							<div style={{ padding: '0.5rem 1rem' }}>
+							<label className="submenu-checkbox-label">
-								<label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+								<input
-									<input
+									type="checkbox"
-										type="checkbox"
+									checked={showDirection}
-										checked={showDirection}
+									onChange={e => setShowDirection(e.target.checked)}
-										onChange={e => setShowDirection(e.target.checked)}
+								/>
-									/>
+								Show direction
-									Show direction
+							</label>
-								</label>
-							</div>
 							<button onClick={resetToDefaults}>Reset to defaults</button>
 						</>
 					}