From 845f84ba014cad5995c835e2dda6f9cd909ae01a Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Sun, 19 Apr 2026 02:55:48 +0300
Subject: [PATCH] Match Angular day-chip + schedule value + week-note styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Measured against the Angular deploy:
  day chip:       12px / #333 / transparent w/ 1px #D6DDE6 border
  '15:30' value:  12px / 400 / #F37B09  (dep/arr time = number-group)
  '1ч. 30мин.':   16px / 500 / #333     (duration = magnitude)
  week note:      12px / #657282
  'Дни выполнения рейса' label: sentence case (no uppercase)

React was rendering the day-of-week strip as filled blue pills at
14px/500, the schedule 'Время в пути' value at 14px/600/#222, and the
schedule label with an uppercase text-transform. Swap day chips to a
minimal bordered-but-transparent style, split the flight-schedule value
into a --duration modifier so dep/arr render orange and duration
renders dark+larger, and drop the text-transform on the label.
---
 .../FlightSchedule/FlightSchedule.scss        | 55 ++++++++++++-------
 .../FlightSchedule/FlightSchedule.tsx         |  2 +-
 2 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/src/features/online-board/components/FlightSchedule/FlightSchedule.scss b/src/features/online-board/components/FlightSchedule/FlightSchedule.scss
index 36257f87..c3f21bd9 100644
--- a/src/features/online-board/components/FlightSchedule/FlightSchedule.scss
+++ b/src/features/online-board/components/FlightSchedule/FlightSchedule.scss
@@ -48,38 +48,50 @@
 
   &__label {
     font-size: 12px;
-    color: #8a8a8a;
+    color: #657282;
   }
 
+  // Angular shows each value ('15:30' / '17:00') at 12px / 400 in the
+  // brand orange (so dep/arr times read as number-groups), but uses
+  // 16px / 500 / #333 for the duration ('1ч. 30мин.') because it's a
+  // magnitude rather than a clock time. Use --duration modifier to
+  // distinguish them at the render layer.
   &__value {
-    font-size: 14px;
-    font-weight: 600;
-    color: #222;
+    font-size: 12px;
+    font-weight: 400;
+    color: #f37b09;
+
+    &--duration {
+      font-size: 16px;
+      font-weight: 500;
+      color: #333;
+    }
   }
 
   &__offset {
     margin-left: 6px;
     font-size: 11px;
-    font-weight: 500;
-    color: #8a8a8a;
+    font-weight: 400;
+    color: #657282;
   }
 
   &__days-section {
     margin-top: 20px;
   }
 
+  // 'Дни выполнения рейса' label — Angular shows it in sentence case at
+  // 12px / #333. Keep the color soft but drop the caps transform.
   &__section-title {
     font-size: 12px;
-    color: #8a8a8a;
-    text-transform: uppercase;
+    color: #333;
     margin-bottom: 8px;
   }
 
   &__note {
     margin-top: 12px;
     font-size: 12px;
-    color: #8a8a8a;
-    font-style: italic;
+    color: #657282;
+    font-style: normal;
   }
 
   @media (max-width: 768px) {
@@ -90,22 +102,27 @@
   }
 }
 
+// Angular shows 'Дни выполнения рейса' as a row of plain text labels
+// with a subtle hairline border between active days — no pill/chip
+// background. Match that: transparent background, 12px #333 for active
+// days, a faded grey for inactive ones.
 .days-of-week-strip {
   display: flex;
-  gap: 8px;
+  gap: 16px;
   flex-wrap: wrap;
 
   .day {
-    padding: 8px 12px;
-    border-radius: 6px;
-    background: #e6f1fb;
-    font-size: 14px;
-    font-weight: 500;
-    color: #1a3a5c;
+    padding: 6px 10px;
+    border: 1px solid #d6dde6;
+    border-radius: 3px;
+    background: transparent;
+    font-size: 12px;
+    font-weight: 400;
+    color: #333;
 
     &--inactive {
-      background: #f6f6f6;
-      color: rgba(102, 102, 102, 0.5);
+      border-color: #e8edf3;
+      color: #657282;
     }
   }
 }
diff --git a/src/features/online-board/components/FlightSchedule/FlightSchedule.tsx b/src/features/online-board/components/FlightSchedule/FlightSchedule.tsx
index d5622415..118fac3c 100644
--- a/src/features/online-board/components/FlightSchedule/FlightSchedule.tsx
+++ b/src/features/online-board/components/FlightSchedule/FlightSchedule.tsx
@@ -96,7 +96,7 @@ export const FlightSchedule: FC<FlightScheduleProps> = ({ flight }) => {
               </div>
               <div className="flight-schedule__col">
                 <div className="flight-schedule__label">{t("SHARED.PATH-TIME")}</div>
-                <div className="flight-schedule__value">
+                <div className="flight-schedule__value flight-schedule__value--duration">
                   {formatDuration(
                     scheduledDurationMinutes(depLocal, arrLocal),
                     "ru",