refactor: move search result inline styles to CSS file

mapper/src/App.css

@@ -206,3 +206,26 @@ h2 {
 .submenu-group button {
 	flex-grow: 1;
 }
+
+.search-results-container {
+	max-height: 50vh;
+	overflow-y: auto;
+}
+
+.search-results-group-header {
+	color: white;
+	margin: 0.5em 0 0.25em;
+	font-size: 1em;
+	font-weight: normal;
+	text-align: center;
+}
+
+.search-results-empty {
+	color: white;
+	text-align: center;
+	padding: 1em 0;
+}
+
+.submenu button.active {
+	background-color: #4a4a4a;
+}

mapper/src/App.js

@@ -710,7 +710,7 @@ function Menu({data, duration, setDuration, end, setEnd, slider, setSlider, subm
 								)}
 							</div>
 							{searchResults ? (
-								<div ref={scrollContainerRef} style={{ maxHeight: '50vh', overflowY: 'auto' }}>
+								<div ref={scrollContainerRef} className="search-results-container">
 									{searchResults.length > 0 ? (
 										(() => {
 											const sortedResults = [...searchResults].sort((a, b) => b.start - a.start);
@@ -737,7 +737,7 @@ function Menu({data, duration, setDuration, end, setEnd, slider, setSlider, subm
 												.sort(([yearA], [yearB]) => yearB - yearA)
 												.map(([groupKey, results]) => (
 												<div key={groupKey}>
-													<h3 style={{ color: 'white', margin: '0.5em 0 0.25em', fontSize: '1em', fontWeight: 'normal', textAlign: 'center' }}>{groupKey}</h3>
+													<h3 className="search-results-group-header">{groupKey}</h3>
 													{results.map((result, index) => (
 														<button
 															key={index}
@@ -751,7 +751,7 @@ function Menu({data, duration, setDuration, end, setEnd, slider, setSlider, subm
 											));
 										})()
 									) : (
-										<p style={{color: 'white', textAlign: 'center', padding: '1em 0'}}>No results found.</p>
+										<p className="search-results-empty">No results found.</p>
 									)}
 								</div>
 							) : (