From 3c7dad5fd7c26125d83e20dcc76ada9f574e4625 Mon Sep 17 00:00:00 2001 From: gnezim Date: Sun, 19 Apr 2026 03:14:36 +0300 Subject: [PATCH] =?UTF-8?q?Scale=20accordion=20row=20icons=20up=20to=20mat?= =?UTF-8?q?ch=20Angular's=20~47=C3=9747=20sprite=20size?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Angular's sprite icons (#service, #board, #deboard, #company, #food, #additional_service) render at ~47×47 in the row caption column — significantly larger than a typical inline affordance, creating a clear visual anchor for each row. React's inline SVGs were sized at 28×28 (a quarter of the area), which made the icon column feel like an afterthought next to the large red 'Закончена' status. Bump .details-row__icon to 44×44 and set the svg width/height attrs to match. Keep the grey stroke color (#657282). --- .../details-panels/FlightDetailsAccordion.scss | 16 +++++++++++----- .../details-panels/FlightDetailsAccordion.tsx | 12 ++++++------ 2 files changed, 17 insertions(+), 11 deletions(-) diff --git a/src/features/online-board/components/details-panels/FlightDetailsAccordion.scss b/src/features/online-board/components/details-panels/FlightDetailsAccordion.scss index 6bf2bf02..a58a4abc 100644 --- a/src/features/online-board/components/details-panels/FlightDetailsAccordion.scss +++ b/src/features/online-board/components/details-panels/FlightDetailsAccordion.scss @@ -66,17 +66,23 @@ gap: 16px; } + // Angular's sprite icons (#service, #board, #deboard, #company, #food, + // #additional_service) render at ~47×47 — significantly larger than a + // typical row affordance. Scale the React placeholders accordingly so + // the icon column has comparable weight. Keep the stroke neutral grey. &__icon { display: inline-flex; align-items: center; justify-content: center; - width: 28px; - height: 28px; - // Angular renders the transition/aircraft icons in a neutral grey - // (sprite stroke = #657282). Match it so the row doesn't overpower - // the red 'Закончена' status next to it. + width: 44px; + height: 44px; color: #657282; flex-shrink: 0; + + svg { + width: 100%; + height: 100%; + } } &__title-block { diff --git a/src/features/online-board/components/details-panels/FlightDetailsAccordion.tsx b/src/features/online-board/components/details-panels/FlightDetailsAccordion.tsx index 636eeacd..2b780308 100644 --- a/src/features/online-board/components/details-panels/FlightDetailsAccordion.tsx +++ b/src/features/online-board/components/details-panels/FlightDetailsAccordion.tsx @@ -42,7 +42,7 @@ interface RowDef { // Registration — person with a badge/ID on the chest, mirroring Angular's // sprite #service icon (check-in agent silhouette). const ICON_REGISTRATION: JSX.Element = ( -