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:
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user