fix(ds): convert_to_trade price warning — fix dead dark:, use warning token (#2249)

The price-mismatch warning used bare `dark:` variants, but the app's dark
mode is the `theme-dark` custom variant — so those styles never applied and
the box stayed light-yellow on dark surfaces. Replace the literal yellow
palette + dead `dark:` classes with the theme-aware `--color-warning` token
(`bg-warning/10`, `border-warning/20`), the warning-colored alert-triangle,
and neutral primary/secondary text (matching the DS::Alert recipe). One class
now adapts to both themes; the JS targets (priceWarning / priceWarningMessage)
are unchanged.

Closes #2248. Part of #2198.
This commit is contained in:
Guillem Arias Fauste
2026-06-11 15:27:11 +02:00
committed by GitHub
parent 211e407456
commit ab3e7e98c3

View File

@@ -132,12 +132,12 @@
</div>
<!-- Price mismatch warning -->
<div class="hidden p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg" data-convert-to-trade-target="priceWarning">
<div class="hidden p-3 bg-warning/10 border border-warning/20 rounded-lg" data-convert-to-trade-target="priceWarning">
<div class="flex items-start gap-2">
<%= icon "alert-triangle", size: "sm", class: "text-yellow-600 dark:text-yellow-500 mt-0.5 shrink-0" %>
<%= icon "alert-triangle", size: "sm", color: "warning", class: "mt-0.5 shrink-0" %>
<div class="text-sm">
<p class="font-medium text-yellow-800 dark:text-yellow-200"><%= t(".price_mismatch_title") %></p>
<p class="text-yellow-700 dark:text-yellow-300" data-convert-to-trade-target="priceWarningMessage"></p>
<p class="font-medium text-primary"><%= t(".price_mismatch_title") %></p>
<p class="text-secondary" data-convert-to-trade-target="priceWarningMessage"></p>
</div>
</div>
</div>