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:
Guillem Arias Fauste
2026-06-15 20:11:36 +02:00
committed by GitHub
parent 89eb441145
commit 2d3d974466
2 changed files with 7 additions and 7 deletions

View File

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

View File

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