From 4b54837db142ddb79278cc3e90fe6285e32583e0 Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Sun, 19 Apr 2026 02:14:28 +0300
Subject: [PATCH] Shrink route-strip typography to match Angular's compact
 layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../components/OnlineBoardDetailsPage.scss    | 45 +++++++++++--------
 1 file changed, 27 insertions(+), 18 deletions(-)

diff --git a/src/features/online-board/components/OnlineBoardDetailsPage.scss b/src/features/online-board/components/OnlineBoardDetailsPage.scss
index d2460f77..85291521 100644
--- a/src/features/online-board/components/OnlineBoardDetailsPage.scss
+++ b/src/features/online-board/components/OnlineBoardDetailsPage.scss
@@ -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;
     }
   }