Match Angular mini-list header/time sizing + soften accordion headers

Measured computed styles on the deployed Angular reference:
  mini-list flight-number: 16px / 400 / #000  (mine: 12px / grey)
  mini-list time:          20px / 500 / #022040 (mine: 17px / 600 / #222)
  'Детали рейса' header:   16px / 400 / #333  (mine: 18px / 500 / #222)
  'Расписание рейса' hdr:  16px / 400 / #333  (mine: 18px / 500 / #222)

React's mini-list was reading the carrier+number as secondary metadata
and the time as a loud bold chunk; Angular reverses the hierarchy —
the carrier+number is the tile's identifier, the time is a darker navy
number-group. Retune both. Also drop the collapse-header weight on
both details+schedule accordions so they read as section separators
rather than section titles; the row content below is the focus.
This commit is contained in:
2026-04-19 02:43:46 +03:00
parent 83d110d3c6
commit 3383015bb0
3 changed files with 20 additions and 11 deletions
@@ -7,12 +7,14 @@
border-top: 1px solid #e0e6f0;
}
// 'Расписание рейса' header — 16px / 400 / #333 to match the sibling
// 'Детали рейса' collapse row above.
&__header {
padding: 16px 0;
cursor: pointer;
font-weight: 500;
font-size: 18px;
color: #222;
font-weight: 400;
font-size: 16px;
color: #333;
display: flex;
justify-content: space-between;
align-items: center;
@@ -29,9 +29,12 @@
}
}
// Angular renders the mini-list header ('SU 6272') darker and larger
// than the surrounding meta: 16px / 400 / #000.
&__flight-number {
font-size: 12px;
color: #8a8a8a;
font-size: 16px;
font-weight: 400;
color: #000;
margin-bottom: 6px;
display: flex;
align-items: center;
@@ -65,10 +68,12 @@
text-align: right;
}
// Depart/arrive times inside the mini-list item: 20px / 500 / #022040
// (dark navy) to match Angular's big time-group.
&__time {
font-size: 17px;
font-weight: 600;
color: #222;
font-size: 20px;
font-weight: 500;
color: #022040;
line-height: 1;
}
@@ -6,12 +6,14 @@
overflow: hidden;
}
// 'Детали рейса' accordion header. Angular keeps this at 16px / 400 /
// #333 — it's a section divider, not a page heading, so it stays quiet.
.p-accordion-header {
padding: 16px 0;
cursor: pointer;
font-weight: 500;
font-size: 18px;
color: #222;
font-weight: 400;
font-size: 16px;
color: #333;
display: flex;
justify-content: space-between;
align-items: center;