Aircraft Popup redesign WIP

apps/dispatch/app/dispatch/_components/map/AircraftMarker.tsx

@@ -4,7 +4,14 @@ import { DivIcon, Marker as LMarker, Popup as LPopup } from "leaflet";
 import { useMapStore } from "_store/mapStore";
 import { Fragment, useCallback, useEffect, useRef, useState } from "react";
 import { cn } from "helpers/cn";
-import { Cross, House, Minimize2, Route } from "lucide-react";
+import {
+	ChevronsRightLeft,
+	Cross,
+	House,
+	MessageSquareText,
+	Minimize2,
+	Route,
+} from "lucide-react";
 import { SmartPopup, useConflict, useSmartPopup } from "_components/SmartPopup";
 
 export const FMS_STATUS_COLORS: { [key: string]: string } = {
@@ -54,7 +61,7 @@ const AircraftPopupContent = ({ aircraft }: { aircraft: Aircraft }) => {
 
 			<div
 				className={cn(
-					"absolute w-[calc(100%+2px)] h-4 z-99",
+					"absolute w-full h-4 z-99", // Adjust width to full
 					anchor.includes("left") ? "-left-[2px]" : "-right-[2px]",
 					anchor.includes("top") ? "-top-[2px]" : "-bottom-[2px]",
 				)}
@@ -81,23 +88,23 @@ const AircraftPopupContent = ({ aircraft }: { aircraft: Aircraft }) => {
 					}}
 				>
 					<div
-						className="p-2 flex justify-center items-center"
+						className="p-2 px-3 flex justify-center items-center"
 						style={{
 							backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`,
 						}}
 					>
-						<House className="text-sm " />
+						<House className="text-sm" />
 					</div>
 					<div
-						className="p-2 flex justify-center items-center"
+						className="p-2 px-4 flex justify-center items-center"
 						style={{
 							backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`,
 						}}
 					>
-						<Route className="text-sm " />
+						<ChevronsRightLeft className="text-sm" />
 					</div>
 					<div
-						className="flex justify-center items-center text-2xl p-2"
+						className="flex justify-center items-center text-5xl font-bold p-2 px-6"
 						style={{
 							backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`,
 							color: `${FMS_STATUS_TEXT_COLORS[aircraft.fmsStatus]}`,
@@ -106,15 +113,40 @@ const AircraftPopupContent = ({ aircraft }: { aircraft: Aircraft }) => {
 						{aircraft.fmsStatus}
 					</div>
 					<div
-						className="p-2 flex-1 flex justify-center items-center"
+						className="p-2 w-100"
+						style={{
+							backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`,
+							whiteSpace: "nowrap",
+						}}
+					>
+						<span className="text-white text-base font-medium">
+							{/* {aircraft.bosName} */} Christophorus 1
+							<br />
+							RTH
+						</span>
+					</div>
+					<div
+						className="p-2 w-150"
+						style={{
+							backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`,
+							whiteSpace: "nowrap",
+						}}
+					>
+						<span className="text-white text-base font-medium">Einsatz</span>
+						<br />
+						<span className="text-white text-sm font-medium">__202504161</span>
+					</div>
+					<div
+						className="p-2 px-4 flex justify-center items-center"
 						style={{
 							backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`,
 						}}
 					>
-						<span className="text-sm text-white">Einsatz 250411</span>
+						<MessageSquareText className="text-sm" />
 					</div>
 				</div>
 			</div>
+			<div>test</div>
 		</>
 	);
 };
@@ -244,7 +276,7 @@ const AircraftMarker = ({ aircraft }: { aircraft: Aircraft }) => {
 					closeOnClick={false}
 					autoPan={false}
 					wrapperClassName="relative"
-					className="w-[200px] h-[150px]"
+					className="w-[502px] h-[220px]"
 				>
 					<AircraftPopupContent aircraft={aircraft} />
 				</SmartPopup>