From 5238ee416218b171ea5cf6ef13995a31bc9ddf15 Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Sun, 19 Apr 2026 01:57:37 +0300
Subject: [PATCH] Match Angular H1 size, accordion icon grey, and full month on
 active tab
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three visible gaps after the SEO/title pass:

1. The page H1 ('Информация о рейсе: …') rendered at 22px/regular —
   a fourth of the size Angular shows. Angular inherits the global
   h1 rule (font-size-xxxl = 42px) and clamps to 36px on tablet /
   22px on mobile. The .flight-details__flight-number override was
   pinning it at font-size-xl2. Restore 42px with the same tablet/
   mobile clamps.

2. Accordion row icons (Регистрация / Посадка / Высадка / Борт /
   Питание / Услуги) used the brand blue. Angular's sprite stroke
   is #657282 (neutral grey), which lets the red 'Закончена' status
   next to it read as the dominant color. Switch details-row__icon
   to #657282.

3. DayTabs abbreviated every tab's month to 'апр.'; Angular spells
   the selected tab out in full ('18 апреля') and keeps siblings
   short. DayTabButton now picks `month: 'long'` when isActive.
---
 .../components/DayTabs/DayTabButton.tsx            |  6 +++++-
 .../components/OnlineBoardDetailsPage.scss         | 14 +++++++++++++-
 .../details-panels/FlightDetailsAccordion.scss     |  5 ++++-
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/features/online-board/components/DayTabs/DayTabButton.tsx b/src/features/online-board/components/DayTabs/DayTabButton.tsx
index f219b775..b04010a6 100644
--- a/src/features/online-board/components/DayTabs/DayTabButton.tsx
+++ b/src/features/online-board/components/DayTabs/DayTabButton.tsx
@@ -20,7 +20,11 @@ export const DayTabButton: FC<DayTabButtonProps> = ({
   const d = parseYyyymmdd(date);
   const weekday = new Intl.DateTimeFormat(locale, { weekday: "short" }).format(d);
   const day = new Intl.DateTimeFormat(locale, { day: "numeric" }).format(d);
-  const month = new Intl.DateTimeFormat(locale, { month: "short" }).format(d);
+  // Angular shows the selected tab with the full month name ('18 апреля'),
+  // siblings with the abbreviated form ('19 апр.'). Mirror that.
+  const month = new Intl.DateTimeFormat(locale, {
+    month: isActive ? "long" : "short",
+  }).format(d);
 
   const classes = [
     "day-tab",
diff --git a/src/features/online-board/components/OnlineBoardDetailsPage.scss b/src/features/online-board/components/OnlineBoardDetailsPage.scss
index 53b351be..d2460f77 100644
--- a/src/features/online-board/components/OnlineBoardDetailsPage.scss
+++ b/src/features/online-board/components/OnlineBoardDetailsPage.scss
@@ -244,9 +244,21 @@
     padding: vars.$space-xl;
   }
 
+  // Page H1. Angular applies the global h1 rule (42px regular) — match it
+  // here and clamp down on narrower viewports like Angular does.
   &__flight-number {
-    font-size: fonts.$font-size-xl2;
+    font-size: fonts.$font-size-xxxl;
+    font-weight: fonts.$font-regular;
+    color: colors.$white;
     margin: 0;
+    line-height: 1.2;
+
+    @include screen.smTablet {
+      font-size: fonts.$font-size-xxxl--tablet;
+    }
+    @include screen.mobile {
+      font-size: fonts.$font-size-xxxl--mobile;
+    }
   }
 
   &__overall-status {
diff --git a/src/features/online-board/components/details-panels/FlightDetailsAccordion.scss b/src/features/online-board/components/details-panels/FlightDetailsAccordion.scss
index b3b5fdb8..29e515e0 100644
--- a/src/features/online-board/components/details-panels/FlightDetailsAccordion.scss
+++ b/src/features/online-board/components/details-panels/FlightDetailsAccordion.scss
@@ -70,7 +70,10 @@
     justify-content: center;
     width: 28px;
     height: 28px;
-    color: #2457ff;
+    // 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.
+    color: #657282;
     flex-shrink: 0;
   }