From db697d4b5e297e6536ffd13db65a32d7106acbfb Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Mon, 20 Apr 2026 03:26:10 +0300
Subject: [PATCH] =?UTF-8?q?Switch=20TransferBar=20+=20FullRouteTimeline=20?=
 =?UTF-8?q?to=20design=20tokens;=20correct=20transfer=20icon=20size=20(20.?=
 =?UTF-8?q?5=C3=976.5)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FullRouteTimeline/FullRouteTimeline.scss  | 56 +++++++++++--------
 .../components/TransferBar/TransferBar.scss   | 34 ++++++-----
 2 files changed, 54 insertions(+), 36 deletions(-)

diff --git a/src/features/online-board/components/FullRouteTimeline/FullRouteTimeline.scss b/src/features/online-board/components/FullRouteTimeline/FullRouteTimeline.scss
index d026d757..945ffae7 100644
--- a/src/features/online-board/components/FullRouteTimeline/FullRouteTimeline.scss
+++ b/src/features/online-board/components/FullRouteTimeline/FullRouteTimeline.scss
@@ -1,10 +1,13 @@
-.full-route-timeline {
-  background: #fff;
-  border-radius: 8px;
-  padding: 16px 24px;
-  margin-bottom: 16px;
+@use "../../../../styles/colors" as colors;
+@use "../../../../styles/variables" as vars;
 
-  @media (max-width: 768px) {
+.full-route-timeline {
+  background: colors.$white;
+  border-radius: 8px;
+  padding: vars.$space-l vars.$space-xl;
+  margin-bottom: vars.$space-l;
+
+  @media (max-width: 640px) {
     display: none;
   }
 }
@@ -12,16 +15,16 @@
 .timeline {
   display: flex;
   align-items: center;
-  gap: 16px;
+  gap: vars.$space-l;
 
   &__arrow {
     background: transparent;
-    border: 1px solid #d0dae5;
+    border: 1px solid colors.$border;
     border-radius: 50%;
     width: 32px;
     height: 32px;
     cursor: pointer;
-    color: #2060c0;
+    color: colors.$blue;
     font-size: 16px;
 
     &:disabled { opacity: 0.3; cursor: not-allowed; }
@@ -39,8 +42,15 @@
     align-items: center;
     gap: 8px;
 
-    &--times { font-size: 18px; font-weight: 500; color: #1a3a5c; }
-    &--stations { font-size: 14px; color: #666; }
+    &--times {
+      font-size: 18px;
+      font-weight: 500;
+      color: colors.$blue-dark;
+    }
+    &--stations {
+      font-size: 14px;
+      color: colors.$light-gray;
+    }
   }
 }
 
@@ -54,14 +64,14 @@
   &__separator {
     flex: 1;
     height: 1px;
-    background: #d0dae5;
+    background: colors.$border;
   }
 
   &__number {
     position: absolute;
     top: -20px;
-    background: #e3f0ff;
-    color: #2060c0;
+    background: colors.$blue-icon;
+    color: colors.$blue;
     border-radius: 10px;
     padding: 2px 8px;
     font-size: 12px;
@@ -70,11 +80,11 @@
 
   &__duration {
     font-size: 12px;
-    color: #666;
+    color: colors.$light-gray;
     padding: 0 8px;
-    background: #fff;
+    background: colors.$white;
 
-    &--specifying { color: #ff9000; }
+    &--specifying { color: colors.$orange; }
   }
 }
 
@@ -86,9 +96,9 @@
   &--right { align-items: flex-end; text-align: right; }
   &--center { align-items: center; text-align: center; }
 
-  &__city { font-size: 14px; font-weight: 500; color: #1a3a5c; }
-  &__code { font-size: 12px; color: #666; }
-  &__terminal { font-size: 11px; color: #999; }
+  &__city { font-size: 14px; font-weight: 500; color: colors.$blue-dark; }
+  &__code { font-size: 12px; color: colors.$light-gray; }
+  &__terminal { font-size: 11px; color: colors.$light-gray; }
 
   &--large { .station__city { font-size: 22px; } }
   &--small { .station__city { font-size: 12px; } }
@@ -99,7 +109,7 @@
   align-items: center;
   gap: 8px;
 
-  &__arrow { color: #2060c0; }
-  &__city { font-size: 12px; color: #666; }
-  &__code { font-size: 14px; font-weight: 500; color: #1a3a5c; }
+  &__arrow { color: colors.$blue; }
+  &__city { font-size: 12px; color: colors.$light-gray; }
+  &__code { font-size: 14px; font-weight: 500; color: colors.$blue-dark; }
 }
diff --git a/src/features/online-board/components/TransferBar/TransferBar.scss b/src/features/online-board/components/TransferBar/TransferBar.scss
index 2e26b8d6..0d5dc29c 100644
--- a/src/features/online-board/components/TransferBar/TransferBar.scss
+++ b/src/features/online-board/components/TransferBar/TransferBar.scss
@@ -1,45 +1,53 @@
+@use "../../../../styles/colors" as colors;
+@use "../../../../styles/variables" as vars;
+
+// Mirrors Angular's `transfer.component` host:
+//   background: $blue-extra-light (#f3f9ff), border: 1px $blue-light2,
+//   padding: $space-m $space-l (10px 15px), font-size: $font-size-s (12px).
+//   Icon SVG is a narrow horizontal arrow (~20.5×6.5px), not a 20×20 square.
 .transfer-bar {
   display: flex;
   align-items: center;
-  gap: 16px;
-  background: #e3f0ff;
-  border: 1px solid #b8d4f0;
-  padding: 12px 16px;
+  gap: vars.$space-l;
+  background: colors.$blue-extra-light;
+  border: 1px solid colors.$blue-light2;
+  padding: vars.$space-m vars.$space-l;
   min-height: 50px;
-  font-size: 13px;
+  font-size: 12px;
 
   &--separated {
-    margin: 12px 0;
+    margin: vars.$space-m 0;
     border-radius: 3px;
   }
 
   &__icon svg {
-    fill: #ff9000;
-    width: 20px;
-    height: 20px;
+    fill: colors.$orange;
+    width: 20.5px;
+    height: 6.5px;
   }
 
   &__content {
     flex: 1;
     display: flex;
-    gap: 16px;
+    gap: vars.$space-m;
     align-items: center;
     flex-wrap: wrap;
   }
 
   &__type { font-weight: 500; }
 
-  &__times { color: #1a3a5c; }
+  &__times { color: colors.$blue-dark; }
 
-  @media (max-width: 768px) {
+  @media (max-width: 640px) {
     &__content {
       flex-direction: column;
       align-items: flex-start;
+      gap: vars.$space-s;
     }
   }
 }
 
 .transfer-time {
   font-weight: 500;
-  color: #ff9000;
+  color: colors.$orange;
 }