Shrink route-strip typography to match Angular's compact layout

Measuring Angular's computed styles on the deployed test page showed:
  dep/arr time:  20px / 500 / #022040  (mine: 32px / 500 / #222)
  strike time:   12px / #F37B09        (mine: 14px)
  city:          14px / 400 / #333     (mine: 20px / 500)
  airport:       12px / #657282        (mine: 12px / #8A8A8A)
  time label:    12px / #657282        (mine: 12px / #8A8A8A)
  time value:    12px / 400 / #F37B09  (mine: 14px / 600 / #222)
  time date:     10px / #333           (mine: 12px / blue)

React was rendering each line roughly 1.5× bigger and bolder than the
Angular reference, which made the route strip dominate the card
instead of framing the 'Прибыл' status. Retune .leg-route__time /
__city / __airport / __detail-{label,value,offset,date} to the
measured Angular values.
This commit is contained in:
2026-04-19 02:14:28 +03:00
parent fd79fa0faf
commit 4b54837db1
@@ -23,16 +23,19 @@
line-height: 1;
}
// Route-strip times. Angular: 20px/500/#022040 bold navy; strike-through
// slot underneath renders at 12px in the brand orange.
&__time {
font-size: 32px;
font-size: 20px;
font-weight: 500;
color: #222;
color: #022040;
line-height: 1.1;
&-strike {
font-size: 14px;
font-size: 12px;
color: colors.$orange;
text-decoration: line-through;
margin-top: 4px;
margin-top: 2px;
}
}
@@ -47,16 +50,18 @@
min-width: 0;
}
// City name (Санкт-Петербург / Москва). Angular: 14px/regular/#333 —
// the large departure/arrival time is the visual anchor, not the city.
&__city {
font-size: 20px;
font-weight: 500;
color: #222;
font-size: 14px;
font-weight: 400;
color: #333;
}
&__airport {
font-size: 12px;
color: #8a8a8a;
margin-top: 4px;
color: #657282;
margin-top: 2px;
}
&__center {
@@ -178,31 +183,35 @@
}
}
// Time-details block under the route strip. Angular keeps the whole
// block compact: 12px labels in neutral grey, 12px regular values in
// brand orange, and a small 10px date line in #333 below.
&__detail {
display: flex;
flex-direction: column;
gap: 4px;
gap: 2px;
&-label {
font-size: 12px;
color: #8a8a8a;
color: #657282;
}
&-value {
font-weight: 600;
color: #222;
font-size: 12px;
font-weight: 400;
color: #022040;
}
&-offset {
font-weight: normal;
font-size: 11px;
color: #8a8a8a;
margin-left: 6px;
font-size: 10px;
color: #657282;
margin-left: 4px;
}
&-date {
font-size: 12px;
color: colors.$blue;
font-size: 10px;
color: #333;
}
}