mirror of
https://github.com/we-promise/sure.git
synced 2026-07-20 08:45:22 +00:00
fix(ds): dark-parity for bespoke green status badges (#2142)
* fix(ds): dark-parity for bespoke green status badges (#2134) The status/type badges in recurring transactions, admin SSO providers, and the categorize group title used solid light-green tints (bg-green-50/100 + text-green-700/800) with no dark variant, so they rendered as pale "stickers" on dark. Add theme-dark variants mirroring DS::Pill's soft recipe (bg-green-tint-10 + text-green-200); dark text contrast 9.5-14.2:1. Their neutral siblings were already token-based. Audit-named _status_pill / _maturity_badge already render via DS::Pill; remaining solid-tint spots are alpha icon-containers (bg-*-500/5,/10) that composite fine on dark. Full DS::Pill consolidation tracked separately. * fix(ds): dark-parity for bespoke amber/blue notices + SSO badge (#2134) Continues the bespoke-badge tail: the raw-amber warning notices (securities SSO warning, admin SSO legacy-providers notice) + the env-configured badge, and the AI tool-call info box, were solid light tints (bg-amber-50/100 / bg-blue-50) with no dark variant -> pale "stickers" on dark. Add theme-dark variants mirroring the soft recipe: alpha-tint bg (amber/blue-500/10-15), lightened border, light text/icon (amber-200/400). Verified legible on dark. Pre-auth (sessions/new) + infra (redis error) amber notices render light-only, left as-is. Broader: these warning boxes want a shared DS notice/callout component (#2137).
This commit is contained in:
committed by
GitHub
parent
d845e44ff8
commit
4e0da0c237
@@ -26,7 +26,7 @@
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<% if provider.enabled? %>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800 theme-dark:bg-green-tint-10 theme-dark:text-green-200">
|
||||
<%= t(".enabled") %>
|
||||
</span>
|
||||
<% else %>
|
||||
@@ -64,10 +64,10 @@
|
||||
|
||||
<% if @legacy_providers.any? %>
|
||||
<%= settings_section title: t("admin.sso_providers.index.legacy_providers_title"), collapsible: true, open: true do %>
|
||||
<div class="bg-amber-50 border border-amber-200 rounded-lg p-3 mb-4">
|
||||
<div class="bg-amber-50 border border-amber-200 rounded-lg p-3 mb-4 theme-dark:bg-amber-500/10 theme-dark:border-amber-500/30">
|
||||
<div class="flex gap-2">
|
||||
<%= icon "alert-triangle", class: "w-5 h-5 text-amber-600 shrink-0" %>
|
||||
<p class="text-sm text-amber-800">
|
||||
<%= icon "alert-triangle", class: "w-5 h-5 text-amber-600 shrink-0 theme-dark:text-amber-400" %>
|
||||
<p class="text-sm text-amber-800 theme-dark:text-amber-200">
|
||||
<%= t("admin.sso_providers.index.legacy_providers_notice") %>
|
||||
</p>
|
||||
</div>
|
||||
@@ -90,7 +90,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-800">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-800 theme-dark:bg-amber-500/15 theme-dark:text-amber-200">
|
||||
<%= t("admin.sso_providers.index.env_configured") %>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
<div class="mt-2">
|
||||
<% message.tool_calls.each do |tool_call| %>
|
||||
<div class="bg-blue-50 border-blue-200 px-3 py-2 rounded-lg border mb-2">
|
||||
<div class="bg-blue-50 border-blue-200 px-3 py-2 rounded-lg border mb-2 theme-dark:bg-blue-500/10 theme-dark:border-blue-500/30">
|
||||
<p class="text-secondary text-xs"><%= t(".function") %></p>
|
||||
<p class="text-primary text-sm font-mono"><%= tool_call.function_name %></p>
|
||||
<p class="text-secondary text-xs mt-2"><%= t(".arguments") %></p>
|
||||
|
||||
@@ -155,7 +155,7 @@
|
||||
</td>
|
||||
<td class="py-3 px-2 text-sm">
|
||||
<% if recurring_transaction.active? %>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-50 text-success">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-50 text-success theme-dark:bg-green-tint-10">
|
||||
<%= t("recurring_transactions.status.active") %>
|
||||
</span>
|
||||
<% else %>
|
||||
|
||||
@@ -160,10 +160,10 @@
|
||||
<% end %>
|
||||
</div>
|
||||
<% if @oidc_identities.count == 1 && Current.user.password_digest.blank? %>
|
||||
<div class="mt-4 p-3 bg-amber-50 border border-amber-200 rounded-lg">
|
||||
<div class="mt-4 p-3 bg-amber-50 border border-amber-200 rounded-lg theme-dark:bg-amber-500/10 theme-dark:border-amber-500/30">
|
||||
<div class="flex items-start gap-2">
|
||||
<%= icon "alert-triangle", class: "w-5 h-5 text-amber-600 shrink-0 mt-0.5" %>
|
||||
<p class="text-sm text-amber-800"><%= t(".sso_warning_message") %></p>
|
||||
<%= icon "alert-triangle", class: "w-5 h-5 text-amber-600 shrink-0 mt-0.5 theme-dark:text-amber-400" %>
|
||||
<p class="text-sm text-amber-800 theme-dark:text-amber-200"><%= t(".sso_warning_message") %></p>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="flex items-center gap-2">
|
||||
<h2 class="text-lg font-semibold text-primary"><%= display_name %></h2>
|
||||
<% if transaction_type == "income" %>
|
||||
<span class="text-xs font-medium px-1.5 py-0.5 rounded-full bg-green-100 text-green-700"><%= t("transactions.categorizes.show.type_income") %></span>
|
||||
<span class="text-xs font-medium px-1.5 py-0.5 rounded-full bg-green-100 text-green-700 theme-dark:bg-green-tint-10 theme-dark:text-green-200"><%= t("transactions.categorizes.show.type_income") %></span>
|
||||
<% elsif transaction_type == "expense" %>
|
||||
<span class="text-xs font-medium px-1.5 py-0.5 rounded-full bg-surface text-secondary border border-primary"><%= t("transactions.categorizes.show.type_expense") %></span>
|
||||
<% end %>
|
||||
|
||||
Reference in New Issue
Block a user