Match Angular day-chip + schedule value + week-note styling

Measured against the Angular deploy:
  day chip:       12px / #333 / transparent w/ 1px #D6DDE6 border
  '15:30' value:  12px / 400 / #F37B09  (dep/arr time = number-group)
  '1ч. 30мин.':   16px / 500 / #333     (duration = magnitude)
  week note:      12px / #657282
  'Дни выполнения рейса' label: sentence case (no uppercase)

React was rendering the day-of-week strip as filled blue pills at
14px/500, the schedule 'Время в пути' value at 14px/600/#222, and the
schedule label with an uppercase text-transform. Swap day chips to a
minimal bordered-but-transparent style, split the flight-schedule value
into a --duration modifier so dep/arr render orange and duration
renders dark+larger, and drop the text-transform on the label.
This commit is contained in:
2026-04-19 02:55:48 +03:00
parent 3383015bb0
commit 845f84ba01
2 changed files with 37 additions and 20 deletions
@@ -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;
}
}
}
@@ -96,7 +96,7 @@ export const FlightSchedule: FC<FlightScheduleProps> = ({ flight }) => {
</div>
<div className="flight-schedule__col">
<div className="flight-schedule__label">{t("SHARED.PATH-TIME")}</div>
<div className="flight-schedule__value">
<div className="flight-schedule__value flight-schedule__value--duration">
{formatDuration(
scheduledDurationMinutes(depLocal, arrLocal),
"ru",