QT/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure.git synced 2026-04-16 18:44:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update styles for LLM usage filter form (#285)

Browse Source 
* 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.
This commit is contained in:
Mark Hendriksen
2025-11-04 19:08:43 +01:00
committed by GitHub
parent 6ace7d9e97
commit fe5e60d898
3 changed files with 17 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/assets/tailwind/application.css
View File

@@ -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;
}
}

12
app/assets/tailwind/date-picker-dark-mode.css Normal file
View File

@@ -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;
}

6
app/views/settings/llm_usages/show.html.erb
View File

@@ -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>