From a1089e07ddb00c60c08ef9bbf19be3fd61d2edbb Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Wed, 22 Apr 2026 12:13:43 +0300
Subject: [PATCH] Port Angular time-range slider styling to the filter sidebars
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Angular's `page-time-selector.scss` paints the whole filter slider in
brand blues — pale $blue-light2 track, solid $blue-light range, and
solid $blue-light thumbs with a 2px white ring — and thickens the
horizontal track from PrimeReact's 4px default to 6px. React carried
the stock gray/white PrimeReact theme, which read as a dead, low-
contrast control next to the blue chevrons and calendar icon.

Add the same overrides scoped under `.wrapper--time-selector` so both
OnlineBoard and Schedule (the two sidebars that render the range
slider) pick them up.
---
 src/styles/_prime-styles.scss | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/src/styles/_prime-styles.scss b/src/styles/_prime-styles.scss
index a5fe4c9a..04468352 100644
--- a/src/styles/_prime-styles.scss
+++ b/src/styles/_prime-styles.scss
@@ -1658,6 +1658,39 @@ body .p-slider.p-slider-animate .p-slider-handle {
     transition: box-shadow 0.2s, left 0.2s;
 }
 
+// Filter time-range slider inside `.wrapper--time-selector` (OnlineBoard /
+// Schedule sidebars): Angular's `page-time-selector.scss` paints the
+// whole track in blue-light2 pale blue, the range in blue-light, and
+// draws solid blue-light thumbs with a 2px white ring. Default PrimeReact
+// leaves the track grey and the handles white with a dark-gray border.
+.wrapper--time-selector .p-slider {
+    background-color: $blue-light2;
+
+    &.p-slider-horizontal {
+        height: 6px;
+    }
+
+    .p-slider-range {
+        background-color: $blue-light;
+    }
+
+    .p-slider-handle {
+        background-color: $blue-light;
+        height: $slider-handle-size;
+        width: $slider-handle-size;
+        border: 2px solid $white;
+        margin-top: calc(-1 * $slider-handle-size / 2);
+        transition-duration: 0.2s;
+        cursor: pointer;
+
+        &:hover,
+        &:focus,
+        &:active {
+            background-color: $blue;
+        }
+    }
+}
+
 body .p-spinner .p-spinner-input {
     padding-right: 2.429em;
 }