mirror of
https://github.com/we-promise/sure.git
synced 2026-07-12 04:45:19 +00:00
fix(ds): canonical separators and destructive tokens in usage/rules tables (#2332)
The LLM usage table (Settings → AI usage) and the rules recent-runs table used hardcoded color classes instead of design-system tokens: - `divide-gray-100` separators — a fixed light gray with no dark-theme variant, so the row dividers render wrong in dark mode. - Raw reds for failed rows (`bg-red-50`/`bg-red-950`, `text-red-500/600`). Swap to the canonical tokens used by every other table (settings/debugs, admin/users, …): - divide-gray-100 -> divide-alpha-black-200 theme-dark:divide-alpha-white-200 - bg-red-50 / bg-red-950/30 -> bg-red-tint-5 / bg-red-tint-10 - text-red-* -> text-destructive (via the icon helper's color: param) Token-only; no structural or behavior change. Co-authored-by: Guillem Arias <guillem.arias@col.vueling.com>
This commit is contained in:
committed by
GitHub
parent
89eb441145
commit
2d3d974466
@@ -133,9 +133,9 @@
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100">
|
||||
<tbody class="divide-y divide-alpha-black-200 theme-dark:divide-alpha-white-200">
|
||||
<% @recent_runs.each do |run| %>
|
||||
<tr class="<%= "bg-red-50 theme-dark:bg-red-950/30" if run.failed? %>">
|
||||
<tr class="<%= "bg-red-tint-5 theme-dark:bg-red-tint-10" if run.failed? %>">
|
||||
<td class="px-4 py-3 text-sm text-primary whitespace-nowrap">
|
||||
<%= run.executed_at.strftime("%b %d, %Y %I:%M %p") %>
|
||||
</td>
|
||||
@@ -155,7 +155,7 @@
|
||||
<% end %>
|
||||
<% if run.failed? && run.error_message.present? %>
|
||||
<div data-controller="tooltip" data-tooltip-content-value="<%= run.error_message %>">
|
||||
<%= icon("info", size: "sm", class: "text-red-500") %>
|
||||
<%= icon("info", size: "sm", color: "destructive") %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
@@ -115,9 +115,9 @@
|
||||
<th class="px-4 py-3 text-right text-xs font-medium text-secondary uppercase"><%= t(".col_cost") %></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100">
|
||||
<tbody class="divide-y divide-alpha-black-200 theme-dark:divide-alpha-white-200">
|
||||
<% @llm_usages.each do |usage| %>
|
||||
<tr class="<%= "bg-red-50 theme-dark:bg-red-950/30" if usage.failed? %>">
|
||||
<tr class="<%= "bg-red-tint-5 theme-dark:bg-red-tint-10" if usage.failed? %>">
|
||||
<td class="px-4 py-3 text-sm text-primary whitespace-nowrap">
|
||||
<%= usage.created_at.strftime("%b %d, %Y %I:%M %p") %>
|
||||
</td>
|
||||
@@ -131,8 +131,8 @@
|
||||
<% if usage.failed? %>
|
||||
<div data-controller="tooltip" class="inline-flex justify-end">
|
||||
<div class="inline-flex items-center gap-1 cursor-help">
|
||||
<%= icon "alert-circle", class: "w-4 h-4 text-red-600 theme-dark:text-red-400" %>
|
||||
<span class="text-red-600 theme-dark:text-red-400 font-medium"><%= t(".failed") %></span>
|
||||
<%= icon "alert-circle", size: "sm", color: "destructive" %>
|
||||
<span class="text-destructive font-medium"><%= t(".failed") %></span>
|
||||
</div>
|
||||
<div role="tooltip" data-tooltip-target="tooltip" class="tooltip bg-inverse text-sm p-2 rounded-md w-64 text-left break-words whitespace-normal hidden">
|
||||
<div class="text-inverse">
|
||||
|
||||
Reference in New Issue
Block a user