From 63c3705a0c815cffba8c80d7bb73e658a961371b Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Thu, 16 Apr 2026 11:52:27 +0300
Subject: [PATCH] Style PrimeReact dropdown/calendar buttons to match Angular
 subtle chevrons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Override PrimeReact AutoComplete dropdown button: transparent bg, no border,
gray color, smaller icon — matches Angular's custom city-autocomplete
search-button styling.

Override PrimeReact Calendar trigger button: transparent bg, smaller icon,
blue color — matches Angular's outline calendar icon.

Fix swap button: remove circular border, use Angular's flat white style
with rotate(90deg) on the arrows SVG.
---
 .../components/OnlineBoardFilter.scss         | 54 +++++++++++++++----
 1 file changed, 43 insertions(+), 11 deletions(-)

diff --git a/src/features/online-board/components/OnlineBoardFilter.scss b/src/features/online-board/components/OnlineBoardFilter.scss
index 66cb92fe..7ec628c4 100644
--- a/src/features/online-board/components/OnlineBoardFilter.scss
+++ b/src/features/online-board/components/OnlineBoardFilter.scss
@@ -151,29 +151,32 @@
 
   .change-container {
     display: flex;
+    align-items: center;
     justify-content: center;
-    padding: vars.$space-m 0;
+    width: 100%;
 
     .button-change {
+      margin-top: vars.$space-m;
+      margin-bottom: -(vars.$space-m);
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 32px;
-      height: 32px;
-      border: 1px solid colors.$border;
-      border-radius: 50%;
-      background: colors.$white;
+      height: vars.$medium-button-height;
+      width: 35px;
+      background-color: colors.$white;
+      border: none;
+      box-shadow: none;
       cursor: pointer;
-      transition: background-color 0.2s;
 
       &:hover {
-        background-color: colors.$blue-extra-light;
+        background-color: colors.$white;
       }
 
       .svg--change-city {
-        width: 16px;
-        height: 16px;
-        color: colors.$blue;
+        width: 25px;
+        height: 12px;
+        fill: colors.$blue;
+        transform: rotate(90deg);
       }
     }
   }
@@ -294,4 +297,33 @@
       transform: rotate(180deg);
     }
   }
+
+  // PrimeReact AutoComplete dropdown button — match Angular's subtle chevron
+  .p-autocomplete-dropdown {
+    background: transparent !important;
+    border: none !important;
+    color: colors.$gray !important;
+    width: 2rem !important;
+    padding: 0 !important;
+
+    .p-icon {
+      width: 0.75rem;
+      height: 0.75rem;
+    }
+  }
+
+  // PrimeReact Calendar button — match Angular's outline icon style
+  .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;
+    }
+  }
 }