diff --git a/src/features/schedule/components/ScheduleSearchPage.scss b/src/features/schedule/components/ScheduleSearchPage.scss index d8bca885..a0b3b64c 100644 --- a/src/features/schedule/components/ScheduleSearchPage.scss +++ b/src/features/schedule/components/ScheduleSearchPage.scss @@ -1,6 +1,7 @@ @use "../../../styles/variables" as vars; @use "../../../styles/colors" as colors; @use "../../../styles/screen" as screen; +@use "../../../styles/fonts" as fonts; .schedule-search { &__calendar { @@ -86,3 +87,37 @@ } } } + +// Footer note: mirrors Angular's `page-footer-notes` component, rendered +// at the bottom of the schedule results frame. +.schedule-search-page, +.schedule-search { + .page-footer-note { + padding: vars.$space-xl; + background-color: colors.$blue-extra-light; + border-top: 1px solid colors.$border; + box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1); + border-radius: 0 0 vars.$border-radius vars.$border-radius; + } + + .page-footer-note--container { + max-width: 700px; + @include fonts.font-small(); + line-height: 16px; + + .line:not(:last-child) { + margin-bottom: vars.$space-m; + } + + .line1 { + display: flex; + align-items: flex-start; + + .sort-note { + font-size: 10px; + margin-right: 3px; + margin-top: -1px; + } + } + } +} diff --git a/src/features/schedule/components/ScheduleSearchPage.tsx b/src/features/schedule/components/ScheduleSearchPage.tsx index ececbc61..44240171 100644 --- a/src/features/schedule/components/ScheduleSearchPage.tsx +++ b/src/features/schedule/components/ScheduleSearchPage.tsx @@ -383,6 +383,20 @@ export const ScheduleSearchPage: FC = ({ params }) => { /> )} + + {/* Footer note mirrors Angular `page-footer-notes` — a + blue-extra-light bar attached to the flight-list frame + with the `*` sort-note + localized system-time note. */} + {!outboundError && !outboundLoading && ( +
+
+
+
*
+
{t("SCHEDULE.NOTE-LINE1")}
+
+
+
+ )}