From fe5e60d898f588ea1fbb611cd7b260aaace98ac7 Mon Sep 17 00:00:00 2001
From: Mark Hendriksen <hendriksen-mark@hotmail.com>
Date: Tue, 4 Nov 2025 19:08:43 +0100
Subject: [PATCH] Update styles for LLM usage filter form (#285)

* Update styles for LLM usage filter form

Enhanced the appearance of the start and end date fields and the filter button by applying new background and text color classes for better UI consistency.

* Replace filter submit button with DS::Button component

Updated the filter form's submit button to use the DS::Button component with secondary variant and medium size for improved consistency with design system.

* Improve calendar picker icon visibility in dark mode

Added CSS to invert the calendar picker icon for date inputs when in dark mode, ensuring better visibility and consistent user experience.

* Add newline at end of application.css

Appends a newline to the end of application.css to follow POSIX standards and improve compatibility with some tools.

* Move date picker dark mode fix to separate CSS file

Extracted the dark mode calendar picker icon fix from application.css into a new date-picker-dark-mode.css file for better organization and maintainability. Updated application.css to import the new file.
---
 app/assets/tailwind/application.css           |  3 ++-
 app/assets/tailwind/date-picker-dark-mode.css | 12 ++++++++++++
 app/views/settings/llm_usages/show.html.erb   |  6 +++---
 3 files changed, 17 insertions(+), 4 deletions(-)
 create mode 100644 app/assets/tailwind/date-picker-dark-mode.css

diff --git a/app/assets/tailwind/application.css b/app/assets/tailwind/application.css
index e2df294c3..2d4298a36 100644
--- a/app/assets/tailwind/application.css
+++ b/app/assets/tailwind/application.css
@@ -11,6 +11,7 @@
 @import "./simonweb_pickr.css";
 
 @import "./google-sign-in.css";
+@import "./date-picker-dark-mode.css";
 
 @layer components {
   .pcr-app{
@@ -186,4 +187,4 @@
   opacity: 0;
   pointer-events: none;
   position: absolute;
-}
\ No newline at end of file
+}
diff --git a/app/assets/tailwind/date-picker-dark-mode.css b/app/assets/tailwind/date-picker-dark-mode.css
new file mode 100644
index 000000000..2cf082882
--- /dev/null
+++ b/app/assets/tailwind/date-picker-dark-mode.css
@@ -0,0 +1,12 @@
+/* 
+  Fix for date input calendar picker icon visibility in dark mode.
+  
+  The native browser calendar picker icon is typically dark, making it 
+  invisible on dark backgrounds. This rule inverts the icon color in 
+  dark mode to ensure proper visibility.
+*/
+
+[data-theme=dark] input[type="date"]::-webkit-calendar-picker-indicator {
+  filter: invert(1);
+  cursor: pointer;
+}
diff --git a/app/views/settings/llm_usages/show.html.erb b/app/views/settings/llm_usages/show.html.erb
index 91e565cd3..556284c8a 100644
--- a/app/views/settings/llm_usages/show.html.erb
+++ b/app/views/settings/llm_usages/show.html.erb
@@ -9,13 +9,13 @@
     <%= form_with url: settings_llm_usage_path, method: :get, class: "flex gap-4 items-end" do |f| %>
       <div>
         <%= f.label :start_date, "Start Date", class: "block text-sm font-medium text-primary mb-1" %>
-        <%= f.date_field :start_date, value: @start_date, class: "rounded-lg border border-primary px-3 py-2 text-sm" %>
+        <%= f.date_field :start_date, value: @start_date, class: "rounded-lg border border-primary px-3 py-2 text-sm bg-container-inset text-primary" %>
       </div>
       <div>
         <%= f.label :end_date, "End Date", class: "block text-sm font-medium text-primary mb-1" %>
-        <%= f.date_field :end_date, value: @end_date, class: "rounded-lg border border-primary px-3 py-2 text-sm" %>
+        <%= f.date_field :end_date, value: @end_date, class: "rounded-lg border border-primary px-3 py-2 text-sm bg-container-inset text-primary" %>
       </div>
-      <%= f.submit "Filter", class: "rounded-lg bg-gray-900 px-4 py-2 text-sm font-medium text-white hover:bg-gray-800" %>
+      <%= render DS::Button.new(variant: :secondary, size: :md, type: "submit", text: "Filter") %>
     <% end %>
   </div>