diff --git a/src/features/online-board/components/FlightSchedule/FlightSchedule.scss b/src/features/online-board/components/FlightSchedule/FlightSchedule.scss index 36257f87..c3f21bd9 100644 --- a/src/features/online-board/components/FlightSchedule/FlightSchedule.scss +++ b/src/features/online-board/components/FlightSchedule/FlightSchedule.scss @@ -48,38 +48,50 @@ &__label { font-size: 12px; - color: #8a8a8a; + color: #657282; } + // Angular shows each value ('15:30' / '17:00') at 12px / 400 in the + // brand orange (so dep/arr times read as number-groups), but uses + // 16px / 500 / #333 for the duration ('1ч. 30мин.') because it's a + // magnitude rather than a clock time. Use --duration modifier to + // distinguish them at the render layer. &__value { - font-size: 14px; - font-weight: 600; - color: #222; + font-size: 12px; + font-weight: 400; + color: #f37b09; + + &--duration { + font-size: 16px; + font-weight: 500; + color: #333; + } } &__offset { margin-left: 6px; font-size: 11px; - font-weight: 500; - color: #8a8a8a; + font-weight: 400; + color: #657282; } &__days-section { margin-top: 20px; } + // 'Дни выполнения рейса' label — Angular shows it in sentence case at + // 12px / #333. Keep the color soft but drop the caps transform. &__section-title { font-size: 12px; - color: #8a8a8a; - text-transform: uppercase; + color: #333; margin-bottom: 8px; } &__note { margin-top: 12px; font-size: 12px; - color: #8a8a8a; - font-style: italic; + color: #657282; + font-style: normal; } @media (max-width: 768px) { @@ -90,22 +102,27 @@ } } +// Angular shows 'Дни выполнения рейса' as a row of plain text labels +// with a subtle hairline border between active days — no pill/chip +// background. Match that: transparent background, 12px #333 for active +// days, a faded grey for inactive ones. .days-of-week-strip { display: flex; - gap: 8px; + gap: 16px; flex-wrap: wrap; .day { - padding: 8px 12px; - border-radius: 6px; - background: #e6f1fb; - font-size: 14px; - font-weight: 500; - color: #1a3a5c; + padding: 6px 10px; + border: 1px solid #d6dde6; + border-radius: 3px; + background: transparent; + font-size: 12px; + font-weight: 400; + color: #333; &--inactive { - background: #f6f6f6; - color: rgba(102, 102, 102, 0.5); + border-color: #e8edf3; + color: #657282; } } } diff --git a/src/features/online-board/components/FlightSchedule/FlightSchedule.tsx b/src/features/online-board/components/FlightSchedule/FlightSchedule.tsx index d5622415..118fac3c 100644 --- a/src/features/online-board/components/FlightSchedule/FlightSchedule.tsx +++ b/src/features/online-board/components/FlightSchedule/FlightSchedule.tsx @@ -96,7 +96,7 @@ export const FlightSchedule: FC = ({ flight }) => {
{t("SHARED.PATH-TIME")}
-
+
{formatDuration( scheduledDurationMinutes(depLocal, arrLocal), "ru",