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.icon}
+
+ )}
+ {panel.header}
+
{isOpen ? "\u25B2" : "\u25BC"}
{isOpen && {panel.content}
}