diff --git a/src/features/online-board/components/FlightSchedule/FlightSchedule.scss b/src/features/online-board/components/FlightSchedule/FlightSchedule.scss index 3105f75b..f3485e18 100644 --- a/src/features/online-board/components/FlightSchedule/FlightSchedule.scss +++ b/src/features/online-board/components/FlightSchedule/FlightSchedule.scss @@ -1,5 +1,6 @@ @use "../../../../styles/colors" as colors; @use "../../../../styles/variables" as vars; +@use "../../../../styles/fonts" as fonts; .flight-schedule { background: colors.$white; @@ -105,27 +106,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. +// Mirrors Angular `flight-schedule.component.scss .days .day`: filled +// $day-color (#e6f1fb) pill with a 5px/10px padding and no border. The +// inactive day uses $day-color-inactive (#f6f6f6) and a transparentized +// gray label — no outlined-box treatment, which is what the previous +// React port had. .days-of-week-strip { display: flex; - gap: 16px; + gap: vars.$space-m; flex-wrap: wrap; .day { - padding: 6px 10px; - border: 1px solid colors.$border-blue; - border-radius: 3px; - background: transparent; - font-size: 12px; - font-weight: 400; + padding: vars.$space-s vars.$space-m; + border-radius: vars.$border-radius; + background-color: colors.$day-color; + font-size: fonts.$font-size-s; + font-weight: fonts.$font-regular; color: colors.$text-color; &--inactive { - border-color: colors.$border; - color: colors.$light-gray; + background-color: colors.$day-color-inactive; + color: rgba(colors.$gray, 0.5); } } }