feat: add jump to midnight button and rearrange submenu actions

mapper/src/App.css

@@ -109,3 +109,24 @@ h2 {
 	background-color: #999!important;
 }
 
+.submenu-actions {
+	padding-top: 0.5rem;
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
+.submenu-group {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.submenu-group span {
+	color: white;
+	flex-shrink: 0;
+}
+
+.submenu-group button {
+	flex-grow: 1;
+}

mapper/src/App.js

@@ -228,12 +228,20 @@ function Menu({duration, setDuration, end, setEnd, slider, setSlider, submenu, s
 		setEnd(moment());
 	};
 
+	const chooseMidnight = () => {
+		setSubmenu(false);
+		setSlider([0, duration.num]);
+		setEnd(moment().startOf('day'));
+	};
+
 	const rangeStart = (x) => {
+		setSubmenu(false);
 		setEnd(moment(range[0]).add(...duration.delta));
 		setSlider([0, duration.num]);
 	};
 
 	const rangeEnd = (x) => {
+		setSubmenu(false);
 		setEnd(moment(range[1]));
 		setSlider([0, duration.num]);
 	};
@@ -328,9 +336,18 @@ function Menu({duration, setDuration, end, setEnd, slider, setSlider, submenu, s
 								/>
 							</div>
 
-							<button onClick={chooseNow}>Jump to Now</button>
-							<button onClick={rangeStart}>Shift to Range Start</button>
-							<button onClick={rangeEnd}>Shift to Range End</button>
+							<div className='submenu-actions'>
+								<div className='submenu-group'>
+									<span>Jump to:</span>
+									<button onClick={chooseNow}>Now</button>
+									<button onClick={chooseMidnight}>Midnight</button>
+								</div>
+								<div className='submenu-group'>
+									<span>Shift to:</span>
+									<button onClick={rangeStart}>Range Start</button>
+									<button onClick={rangeEnd}>Range End</button>
+								</div>
+							</div>
 						</>
 					}