From ea25f5c01758a797d421aabc4d94e9737e8e6739 Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Mon, 20 Apr 2026 15:50:30 +0300
Subject: [PATCH] Replace 4 rgba(46,87,255,0.04/0.06/0.08) hover tints with
 $blue-extra-light / $blue-icon (brand palette)

---
 .../schedule/components/ScheduleFilter.scss         |  2 +-
 src/ui/flights/FlightCard.scss                      | 13 ++++++++++---
 src/ui/layout/SearchHistory.scss                    |  4 +++-
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/features/schedule/components/ScheduleFilter.scss b/src/features/schedule/components/ScheduleFilter.scss
index cace433e..aee74dc4 100644
--- a/src/features/schedule/components/ScheduleFilter.scss
+++ b/src/features/schedule/components/ScheduleFilter.scss
@@ -55,7 +55,7 @@
     color: colors.$blue;
     border-radius: vars.$border-radius;
 
-    &:hover { background: rgba(46, 87, 255, 0.06); }
+    &:hover { background: colors.$blue-extra-light; }
 
     .svg--change-city {
       width: 24px;
diff --git a/src/ui/flights/FlightCard.scss b/src/ui/flights/FlightCard.scss
index a45a4230..3ae07e4c 100644
--- a/src/ui/flights/FlightCard.scss
+++ b/src/ui/flights/FlightCard.scss
@@ -18,11 +18,15 @@
     border-left: 3px solid colors.$blue;
   }
 
+  // Angular highlights clickable flight rows with $blue-extra-light
+  // (#f3f9ff) on hover — the same tint used for the `frame` background
+  // of the left-column accordion. Use the brand token here rather than
+  // a one-off translucent blue.
   &--clickable .flight-card__row {
     cursor: pointer;
 
     &:hover {
-      background-color: rgba(46, 87, 255, 0.04);
+      background-color: colors.$blue-extra-light;
     }
 
     &:focus-visible {
@@ -226,6 +230,9 @@
     padding-top: vars.$space-s;
   }
 
+  // Mirrors Angular `share-button.component.scss`: transparent bg,
+  // hover fills with $blue-icon (#e3f0fd), matching the share action
+  // buttons across the Angular site.
   &__share-btn {
     display: inline-flex;
     align-items: center;
@@ -245,7 +252,7 @@
     }
 
     &:hover {
-      background-color: rgba(46, 87, 255, 0.08);
+      background-color: colors.$blue-icon;
     }
   }
 
@@ -261,7 +268,7 @@
     text-decoration: none;
     transition: background-color 150ms ease;
 
-    &:hover { background: rgba(46, 87, 255, 0.06); }
+    &:hover { background: colors.$blue-extra-light; }
   }
 
   &__buy-btn {
diff --git a/src/ui/layout/SearchHistory.scss b/src/ui/layout/SearchHistory.scss
index 528fb73a..128af6a9 100644
--- a/src/ui/layout/SearchHistory.scss
+++ b/src/ui/layout/SearchHistory.scss
@@ -80,8 +80,10 @@
   border-top: 1px solid colors.$border;
   transition: background-color 150ms ease;
 
+  // Angular highlights search-history rows with $blue-extra-light
+  // (#f3f9ff) on hover — same tint as the frame background.
   &:hover {
-    background-color: rgba(46, 87, 255, 0.04);
+    background-color: colors.$blue-extra-light;
   }
 
   &:hover .search-history-item__icon {