diff --git a/src/ui/flights/FlightCard.scss b/src/ui/flights/FlightCard.scss index 057061ae..e43b275b 100644 --- a/src/ui/flights/FlightCard.scss +++ b/src/ui/flights/FlightCard.scss @@ -59,9 +59,7 @@ } &__time { - font-size: 20px; - line-height: 1.1; - color: #222; + // TimeGroup owns its own 30px/300 typography; just align it. text-align: left; &--arrival { diff --git a/src/ui/flights/FlightCard.tsx b/src/ui/flights/FlightCard.tsx index b04fb8ee..9bcc4316 100644 --- a/src/ui/flights/FlightCard.tsx +++ b/src/ui/flights/FlightCard.tsx @@ -102,13 +102,20 @@ export const FlightCard: FC = ({ }; const depScheduled = timeWithOffset(depTimes.scheduledDeparture.local); - const depActual = depTimes.actualBlockOff?.local - ? timeWithOffset(depTimes.actualBlockOff.local) - : null; + // Angular shows the latest available dep time as actual>estimated. + // The caption changes with it: 'Фактическое' for actual, 'Ожидаемое' + // for estimated-only. + const depLatestTimes = depTimes.actualBlockOff ?? depTimes.estimatedBlockOff; + const depLatest = depLatestTimes ? timeWithOffset(depLatestTimes.local) : null; + const depLatestCaptionKey = depTimes.actualBlockOff + ? "SHARED.ACTUAL" + : "SHARED.EXPECTED"; const arrScheduled = timeWithOffset(arrTimes.scheduledArrival.local); - const arrActual = arrTimes.actualBlockOn?.local - ? timeWithOffset(arrTimes.actualBlockOn.local) - : null; + const arrLatestTimes = arrTimes.actualBlockOn ?? arrTimes.estimatedBlockOn; + const arrLatest = arrLatestTimes ? timeWithOffset(arrLatestTimes.local) : null; + const arrLatestCaptionKey = arrTimes.actualBlockOn + ? "SHARED.ACTUAL" + : "SHARED.EXPECTED"; const boarding = departureLeg.transition?.boarding; const BOARDING_STATUS_KEY: Record = { @@ -218,12 +225,12 @@ export const FlightCard: FC = ({ {depScheduled} - {depActual && ( + {depLatest && (
- {t("SHARED.ACTUAL")} + {t(depLatestCaptionKey)} - {depActual} + {depLatest}
)} @@ -234,12 +241,12 @@ export const FlightCard: FC = ({ {arrScheduled} - {arrActual && ( + {arrLatest && (
- {t("SHARED.ACTUAL")} + {t(arrLatestCaptionKey)} - {arrActual} + {arrLatest}
)} diff --git a/src/ui/flights/TimeGroup.scss b/src/ui/flights/TimeGroup.scss index 4231ffc2..62f4956c 100644 --- a/src/ui/flights/TimeGroup.scss +++ b/src/ui/flights/TimeGroup.scss @@ -12,6 +12,18 @@ align-items: flex-start; } + // Angular's time-group renders the 'big' time at size 30 / weight 300 + // (light) and keeps the old scheduled time small + orange + strikethrough + // (`text size=12 color=orange`). Apply those dimensions directly on the + // spans so callers don't need to override font-size. + &__actual, + &__scheduled { + font-size: 30px; + font-weight: 300; + color: #333; + line-height: 1.15; + } + &__actual { display: flex; align-items: flex-start; @@ -29,6 +41,10 @@ &__old-time, &__scheduled--delayed { + font-size: 12px; + font-weight: 400; + color: #f37b09; + line-height: 1.3; text-decoration: line-through; } diff --git a/src/ui/flights/TimeGroup.tsx b/src/ui/flights/TimeGroup.tsx index 57147470..5f12a852 100644 --- a/src/ui/flights/TimeGroup.tsx +++ b/src/ui/flights/TimeGroup.tsx @@ -39,10 +39,10 @@ export const TimeGroup: FC = ({
{hasDelay ? ( <> + {actualTime} {scheduledTime} - {actualTime} ) : ( {scheduledTime}