update carpool map location

src/components/Carpool/Carpool.tsx

@@ -203,11 +203,11 @@ export default function Carpool({ id }: { id: number }) {
 				<CarpoolTopButtons />
 				<CarpoolDetails />
 				<Members>
-					<CarpoolRouteEstimator />
+					<h2 style={{ marginBlockEnd: 0 }}>Map</h2>
-					<MemberList />
-					<h2>Map</h2>
 					<CarpoolMapLegend />
 					<CarpoolMap />
+					<CarpoolRouteEstimator />
+					<MemberList />
 				</Members>
 			</UISecondaryBox>
 		</CarpoolContext.Provider>

src/components/Carpool/CarpoolMapLegend.tsx

@@ -1,26 +1,9 @@
 export default function CarpoolMapLegend() {
 	return (
-		<div
+		<div style={{ display: 'flex', alignItems: 'center', margin: '1rem' }}>
-			style={{
+			<img src="/markers/red.png" alt="Red marker"></img> Me
-				display: 'flex',
+			<img src="/markers/blue.png" alt="Blue marker"></img> Other
-				flexDirection: 'column',
+			<img src="/markers/green.png" alt="Green marker"></img> Event
-				margin: '0.5rem',
-				backgroundColor: '#fcfcfc',
-				borderRadius: '0.5rem',
-				padding: '0.5rem',
-			}}
-		>
-			<b style={{ textAlign: 'center' }}>Legend</b>
-			<div style={{ display: 'flex', alignItems: 'center' }}>
-				<img src="/markers/red.png" alt="Red marker"></img> My location
-			</div>
-			<div style={{ display: 'flex', alignItems: 'center' }}>
-				<img src="/markers/blue.png" alt="Blue marker"></img> Other member
-				location
-			</div>
-			<div style={{ display: 'flex', alignItems: 'center' }}>
-				<img src="/markers/green.png" alt="Green marker"></img> Event location
-			</div>
 		</div>
 	);
 }