From aad94636c7b409da5d9907c749f9b9f0a3bdfe77 Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Wed, 22 Apr 2026 12:01:21 +0300
Subject: [PATCH] Use Angular's outlined calendar SVG in the datepicker trigger
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PrimeReact ships a solid filled-calendar glyph; Angular's filter calendar
uses a thinner outlined glyph with six "row" tiles drawn in the brand
blue (#418fde). Replace the default icon by hiding PrimeReact's <svg> +
painting `/assets/img/calendar.svg` as a background on
.p-datepicker-trigger, scoped to the three filter-sidebar roots.

Consolidate the per-page .p-datepicker-trigger styling — the three
filter SCSS files each carried their own background/border/color
overrides that kept drifting. Now only the width override lives per
page, everything else is shared in styles/_prime-calendar.scss.
---
 .../components/FlightsMapStartPage.scss        | 18 ++----------------
 .../components/OnlineBoardFilter.scss          | 14 ++++----------
 .../schedule/components/ScheduleStartPage.scss | 12 ++----------
 src/styles/_prime-calendar.scss                | 16 ++++++++++++++++
 4 files changed, 24 insertions(+), 36 deletions(-)

diff --git a/src/features/flights-map/components/FlightsMapStartPage.scss b/src/features/flights-map/components/FlightsMapStartPage.scss
index 5c763bb2..dc0cf7f2 100644
--- a/src/features/flights-map/components/FlightsMapStartPage.scss
+++ b/src/features/flights-map/components/FlightsMapStartPage.scss
@@ -303,22 +303,8 @@
   }
 }
 
-// PrimeReact Calendar trigger inside the map filter: Angular renders
-// an outline calendar icon (no background); the PrimeReact default is
-// a filled-blue button. Strip the fill + tone the icon down to the
-// neutral gray so it reads as a glyph rather than a CTA.
-.flights-map-filter .p-calendar.p-calendar-w-btn .p-datepicker-trigger.p-button {
-  background: transparent !important;
-  border: 1px solid colors.$border-input !important;
-  border-left: none !important;
-  color: colors.$light-gray !important;
-  box-shadow: none !important;
-}
-.flights-map-filter .p-calendar.p-calendar-w-btn .p-datepicker-trigger.p-button:hover,
-.flights-map-filter .p-calendar.p-calendar-w-btn .p-datepicker-trigger.p-button:focus {
-  background: rgba(0, 0, 0, 0.04) !important;
-  color: colors.$blue-dark !important;
-}
+// PrimeReact Calendar trigger inside the map filter — styling (background
+// icon, no border, no seam) comes from shared `styles/_prime-calendar.scss`.
 
 // Leaflet city tooltips: text-only with white text-shadow halo, matching
 // Angular's _leaflet-popup.scss treatment.
diff --git a/src/features/online-board/components/OnlineBoardFilter.scss b/src/features/online-board/components/OnlineBoardFilter.scss
index 278c1b79..6f15de5f 100644
--- a/src/features/online-board/components/OnlineBoardFilter.scss
+++ b/src/features/online-board/components/OnlineBoardFilter.scss
@@ -351,18 +351,12 @@
     }
   }
 
-  // PrimeReact Calendar button — match Angular's outline icon style
+  // PrimeReact Calendar trigger button width override. Background-image,
+  // border removal, and p-icon hiding live in the shared rule in
+  // `styles/_prime-calendar.scss` so all three filter sidebars look
+  // identical.
   .p-datepicker-trigger {
-    background: transparent !important;
-    border: none !important;
-    color: colors.$gray !important;
     width: 2rem !important;
     padding: 0 !important;
-
-    .p-icon {
-      width: 1rem;
-      height: 1rem;
-      color: colors.$blue;
-    }
   }
 }
diff --git a/src/features/schedule/components/ScheduleStartPage.scss b/src/features/schedule/components/ScheduleStartPage.scss
index 2c534120..ad6afd1d 100644
--- a/src/features/schedule/components/ScheduleStartPage.scss
+++ b/src/features/schedule/components/ScheduleStartPage.scss
@@ -331,19 +331,11 @@
     }
   }
 
-  // PrimeReact Calendar button — match Angular's outline icon
+  // PrimeReact Calendar trigger — background/border/icon handled in
+  // shared `styles/_prime-calendar.scss`. Keep only the width override.
   .p-datepicker-trigger {
-    background: transparent !important;
-    border: none !important;
-    color: colors.$gray !important;
     width: 2rem !important;
     padding: 0 !important;
-
-    .p-icon {
-      width: 1rem;
-      height: 1rem;
-      color: colors.$blue;
-    }
   }
 
   // PrimeReact Calendar input — step the font down from the start-page's
diff --git a/src/styles/_prime-calendar.scss b/src/styles/_prime-calendar.scss
index 45603d46..fe5647a4 100644
--- a/src/styles/_prime-calendar.scss
+++ b/src/styles/_prime-calendar.scss
@@ -25,6 +25,22 @@
         padding: 0 $space-l;
     }
 
+    // Swap PrimeReact's default filled-calendar glyph for the outlined
+    // blue calendar used in Angular (`ClientApp/src/assets/img/calendar.svg`,
+    // fill #418fde). Hide the <svg class="p-icon"> PrimeReact injects,
+    // paint the sprite as a background-image on the trigger button.
+    .p-datepicker-trigger {
+        background: transparent url('/assets/img/calendar.svg') no-repeat center center;
+        background-size: 16px 16px;
+        border: none !important;
+        box-shadow: none !important;
+
+        .p-icon,
+        .p-button-icon {
+            display: none !important;
+        }
+    }
+
     &:focus-within {
         border-color: $blue-light;
         box-shadow: 0 0 0 0.2em $focus-shadow;