From c4ba540e1cd7ebbdd340bbdf44c5f8f8b0ed0544 Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Mon, 20 Apr 2026 02:57:41 +0300
Subject: [PATCH] Normalize caption/time-note greys to $light-gray (#657282)
 across FlightCard, CityAutocomplete, details accordion, board header, and
 filter

---
 .../BoardDetailsHeader/BoardDetailsHeader.scss         |  4 +++-
 .../online-board/components/OnlineBoardFilter.scss     |  2 +-
 .../details-panels/FlightDetailsAccordion.scss         |  4 +++-
 src/ui/city-autocomplete/CityAutocomplete.scss         | 10 ++++++----
 src/ui/flights/FlightCard.scss                         |  6 +++---
 5 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/features/online-board/components/BoardDetailsHeader/BoardDetailsHeader.scss b/src/features/online-board/components/BoardDetailsHeader/BoardDetailsHeader.scss
index ce211d29..d5983d4a 100644
--- a/src/features/online-board/components/BoardDetailsHeader/BoardDetailsHeader.scss
+++ b/src/features/online-board/components/BoardDetailsHeader/BoardDetailsHeader.scss
@@ -1,3 +1,5 @@
+@use "../../../../styles/colors" as colors;
+
 .board-details-header {
   // Mirrors Angular's board-details-header host styling:
   //   padding: $space-l $space-xl (15px 20px), align-items: start,
@@ -70,7 +72,7 @@
 
   &__airline-caption {
     font-size: 12px;
-    color: #8a8a8a;
+    color: colors.$light-gray;
     text-transform: lowercase;
   }
 }
diff --git a/src/features/online-board/components/OnlineBoardFilter.scss b/src/features/online-board/components/OnlineBoardFilter.scss
index 696c1f5f..83fc97cc 100644
--- a/src/features/online-board/components/OnlineBoardFilter.scss
+++ b/src/features/online-board/components/OnlineBoardFilter.scss
@@ -220,7 +220,7 @@
       }
 
       .time-selector__value {
-        color: #8a8a8a;
+        color: colors.$light-gray;
         font-size: 12px;
         margin-top: 0;
         text-align: left;
diff --git a/src/features/online-board/components/details-panels/FlightDetailsAccordion.scss b/src/features/online-board/components/details-panels/FlightDetailsAccordion.scss
index 96a77870..92770d9c 100644
--- a/src/features/online-board/components/details-panels/FlightDetailsAccordion.scss
+++ b/src/features/online-board/components/details-panels/FlightDetailsAccordion.scss
@@ -35,6 +35,8 @@
 // dotted separator between rows.
 // ---------------------------------------------------------------------------
 
+@use "../../../../styles/colors" as colors;
+
 .details-rows {
   display: flex;
   flex-direction: column;
@@ -42,7 +44,7 @@
   &__time-note {
     padding: 0 0 8px;
     margin-left: calc(29% + 24px);
-    color: #8a8a8a;
+    color: colors.$light-gray;
     font-size: 12px;
     line-height: 1.5;
   }
diff --git a/src/ui/city-autocomplete/CityAutocomplete.scss b/src/ui/city-autocomplete/CityAutocomplete.scss
index 8ec1e0aa..c887a5fd 100644
--- a/src/ui/city-autocomplete/CityAutocomplete.scss
+++ b/src/ui/city-autocomplete/CityAutocomplete.scss
@@ -1,3 +1,5 @@
+@use "../../styles/colors" as colors;
+
 .city-autocomplete {
   display: flex;
   flex-direction: column;
@@ -12,7 +14,7 @@
   }
 
   &__label {
-    color: #8a8a8a;
+    color: colors.$light-gray;
     font-size: 12px;
     white-space: nowrap;
     overflow: hidden;
@@ -40,7 +42,7 @@
       background: transparent;
       cursor: pointer;
       font-size: 18px;
-      color: #8a8a8a;
+      color: colors.$light-gray;
 
       &::before {
         content: "×";
@@ -109,12 +111,12 @@
 
   .country {
     white-space: nowrap;
-    color: #8a8a8a;
+    color: colors.$light-gray;
   }
 
   .airport {
     white-space: nowrap;
-    color: #8a8a8a;
+    color: colors.$light-gray;
   }
 
   &--airport {
diff --git a/src/ui/flights/FlightCard.scss b/src/ui/flights/FlightCard.scss
index 9455ef98..249f9163 100644
--- a/src/ui/flights/FlightCard.scss
+++ b/src/ui/flights/FlightCard.scss
@@ -62,7 +62,7 @@
 
   &__aircraft {
     font-size: 11px;
-    color: #8a8a8a;
+    color: colors.$light-gray;
     font-weight: normal;
     margin-top: 4px;
   }
@@ -160,7 +160,7 @@
   }
 
   &__detail-label {
-    color: #8a8a8a;
+    color: colors.$light-gray;
     font-size: 14px;
   }
 
@@ -178,7 +178,7 @@
 
   &__detail-caption {
     font-size: 12px;
-    color: #8a8a8a;
+    color: colors.$light-gray;
   }
 
   &__detail-value {