From d2192e12edef4992a98db421d90434b3002332ed Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 25 Oct 2026 10:29:15 -0700
Subject: [PATCH] Change the toggle visual here

---
 .../custom-fields-query-dropdown.component.html        |  2 +-
 .../custom-fields-query-dropdown.component.scss        | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html
index 14ee9696a..e7dd8352c 100644
--- a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html
+++ b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html
@@ -35,7 +35,7 @@
   @if (getCustomFieldByID(atom.field)?.data_type === CustomFieldDataType.Date) {
     @let relativeDate = getRelativeDate(atom);
     <div class="d-flex gap-2 w-100 ms-0 mt-1">
-      <div class="btn-group btn-group-sm" role="group" aria-label="Date mode" i18n-aria-label>
+      <div class="btn-group btn-group-sm date-mode" role="group" aria-label="Date mode" i18n-aria-label>
         <input type="radio" class="btn-check" [id]="atom.id + '_fixed'" [name]="atom.id + '_dateMode'" [checked]="!relativeDate" (change)="toggleRelativeDate(atom)" [disabled]="disabled" aria-label="Fixed date" i18n-aria-label>
         <label class="btn btn-outline-secondary text-nowrap" [for]="atom.id + '_fixed'" title="Fixed date" i18n-title>
           <i-bs name="calendar"></i-bs><span class="d-none d-md-inline ms-2" i18n>Fixed</span>
diff --git a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.scss b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.scss
index 406523494..8ecac32e3 100644
--- a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.scss
+++ b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.scss
@@ -44,3 +44,13 @@
     min-width: 140px;
   }
 }
+
+.date-mode .btn {
+  --bs-btn-color: var(--bs-secondary-color);
+  --bs-btn-hover-bg: transparent;
+  --bs-btn-hover-color: var(--bs-body-color);
+  --bs-btn-hover-border-color: var(--bs-border-color);
+  --bs-btn-active-bg: transparent;
+  --bs-btn-active-color: var(--bs-primary);
+  --bs-btn-active-border-color: var(--bs-border-color);
+}