gnezim/flights_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Scale accordion row icons up to match Angular's ~47×47 sprite size

Browse Source 
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).
This commit is contained in:
Anton
2026-04-19 03:14:36 +03:00
parent cfa33d0586
commit 3c7dad5fd7
2 changed files with 17 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/online-board/components/details-panels/FlightDetailsAccordion.scss
+11 -5
View File
@@ -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 {
src/features/online-board/components/details-panels/FlightDetailsAccordion.tsx
+6 -6
View File
@@ -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 = (
<svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<circle cx="12" cy="6" r="2.5" />
<path d="M8.5 21v-6.5a3 3 0 0 1 3-3h1a3 3 0 0 1 3 3V21" />
<rect x="10" y="12.5" width="4" height="3" rx="0.5" />
@@ -52,7 +52,7 @@ const ICON_REGISTRATION: JSX.Element = (
// Boarding — ascending escalator/stairs with a person, matching Angular's
// #board sprite (passenger stepping up onto the plane).
const ICON_BOARDING: JSX.Element = (
<svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<circle cx="16" cy="5" r="1.5" />
<path d="M13.5 11 16 8.5l3 2.5v3" />
<path d="M3 20l3-3h3l3-3h3l3-3h3" />
@@ -61,7 +61,7 @@ const ICON_BOARDING: JSX.Element = (
);
// Deboarding — descending escalator/stairs with a person, mirror of #deboard.
const ICON_DEBOARDING: JSX.Element = (
<svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<circle cx="8" cy="5" r="1.5" />
<path d="M10.5 11 8 8.5 5 11v3" />
<path d="M21 20l-3-3h-3l-3-3h-3L9 11H6" />
@@ -69,12 +69,12 @@ const ICON_DEBOARDING: JSX.Element = (
</svg>
);
const ICON_AIRCRAFT: JSX.Element = (
<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<path d="M21 16v-2l-8-5V3.5a1.5 1.5 0 1 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5L21 16z" />
</svg>
);
const ICON_MEAL: JSX.Element = (
<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<path d="M4 11c0-2 2-4 4-4s4 2 4 4" />
<path d="M14 7c2-2 5-1 5 2v8" />
<path d="M4 11v8" />
@@ -82,7 +82,7 @@ const ICON_MEAL: JSX.Element = (
</svg>
);
const ICON_SERVICES: JSX.Element = (
<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<rect x="3" y="6" width="18" height="12" rx="2" />
<path d="M7 10v4M12 10v4M17 10v4" />
</svg>