diff --git a/src/features/online-board/components/OnlineBoardDetailsPage.scss b/src/features/online-board/components/OnlineBoardDetailsPage.scss index 9d47dee9..29bf0254 100644 --- a/src/features/online-board/components/OnlineBoardDetailsPage.scss +++ b/src/features/online-board/components/OnlineBoardDetailsPage.scss @@ -169,6 +169,13 @@ } .flight-details { + &__estimated-note { + padding: 0 vars.$space-xl vars.$space-xl; + color: #8a8a8a; + font-size: 12px; + line-height: 1.5; + } + &--error, &--not-found { padding: vars.$space-xl; diff --git a/src/features/online-board/components/OnlineBoardDetailsPage.tsx b/src/features/online-board/components/OnlineBoardDetailsPage.tsx index b9ecf514..f454728b 100644 --- a/src/features/online-board/components/OnlineBoardDetailsPage.tsx +++ b/src/features/online-board/components/OnlineBoardDetailsPage.tsx @@ -264,6 +264,10 @@ function FlightLegs({ +
+ * {t("BOARD.ESTIMATED-TIME-NOTE")} +
+ {leg.equipment.name && (
{t("SHARED.PLANE")}: {leg.equipment.name} @@ -479,7 +483,6 @@ export const OnlineBoardDetailsPage: FC = ({
-

* {t("BOARD.ESTIMATED-TIME-NOTE")}

* {t("BOARD.LOCAL-TIME-NOTE")}

diff --git a/src/features/online-board/components/details-panels/FlightDetailsAccordion.scss b/src/features/online-board/components/details-panels/FlightDetailsAccordion.scss index 083c9663..22a90b48 100644 --- a/src/features/online-board/components/details-panels/FlightDetailsAccordion.scss +++ b/src/features/online-board/components/details-panels/FlightDetailsAccordion.scss @@ -20,6 +20,22 @@ &:hover { background: #eef1f4; } + + &__title { + display: inline-flex; + align-items: center; + gap: 10px; + } + + &__icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + color: #2457ff; + flex-shrink: 0; + } } .p-accordion-content { diff --git a/src/features/online-board/components/details-panels/FlightDetailsAccordion.tsx b/src/features/online-board/components/details-panels/FlightDetailsAccordion.tsx index 3a58bf5c..219d90e7 100644 --- a/src/features/online-board/components/details-panels/FlightDetailsAccordion.tsx +++ b/src/features/online-board/components/details-panels/FlightDetailsAccordion.tsx @@ -19,8 +19,52 @@ interface PanelDef { id: string; header: string; content: JSX.Element; + /** Small inline SVG icon shown on the left of the header, Angular parity. */ + icon?: JSX.Element; } +// Inline SVG icons mirror Angular's sprite refs. Plain strokes + blue +// fill to match the details sidebar's visual language. +const ICON_REGISTRATION: JSX.Element = ( + +); +const ICON_BOARDING: JSX.Element = ( + +); +const ICON_DEBOARDING: JSX.Element = ( + +); +const ICON_AIRCRAFT: JSX.Element = ( + +); +const ICON_MEAL: JSX.Element = ( + +); +const ICON_SERVICES: JSX.Element = ( + +); + export const FlightDetailsAccordion: FC = ({ leg, viewType }) => { const { t } = useTranslation(); @@ -30,6 +74,7 @@ export const FlightDetailsAccordion: FC = ({ leg, v panels.push({ id: "registration", header: t("DETAILS.REGISTRATION"), + icon: ICON_REGISTRATION, content: , }); } @@ -37,6 +82,7 @@ export const FlightDetailsAccordion: FC = ({ leg, v panels.push({ id: "boarding", header: t("DETAILS.BOARDING"), + icon: ICON_BOARDING, content: , }); } @@ -44,6 +90,7 @@ export const FlightDetailsAccordion: FC = ({ leg, v panels.push({ id: "deboarding", header: t("DETAILS.DEBOARDING"), + icon: ICON_DEBOARDING, content: , }); } @@ -51,6 +98,7 @@ export const FlightDetailsAccordion: FC = ({ leg, v panels.push({ id: "aircraft", header: t("DETAILS.AIRCRAFT"), + icon: ICON_AIRCRAFT, content: , }); } @@ -58,6 +106,7 @@ export const FlightDetailsAccordion: FC = ({ leg, v panels.push({ id: "meal", header: t("DETAILS.MEAL"), + icon: ICON_MEAL, content: , }); } @@ -65,6 +114,7 @@ export const FlightDetailsAccordion: FC = ({ leg, v panels.push({ id: "services", header: t("DETAILS.ON_BOARD_SERVICES"), + icon: ICON_SERVICES, content: , }); } @@ -114,7 +164,14 @@ export const FlightDetailsAccordion: FC = ({ leg, v } }} > - {panel.header} + + {panel.icon && ( + + )} + {panel.header} + {isOpen &&
{panel.content}
}