mirror of
https://github.com/we-promise/sure.git
synced 2026-05-25 13:34:58 +00:00
f50c151e21
* fix(design-system): align DS::Alert icon with title The icon was rendered at size 'sm' (w-4 h-4) and started at the very top of the flex row (items-start without an offset), which optically sat above the title's cap when the title was present and slightly above the message baseline when it wasn't. The hand-rolled alerts this PR replaced used 'w-5 h-5 mt-0.5' for exactly this reason — restore the same combination in the component: - size: sm -> md (w-4/h-4 -> w-5/h-5). - class adds mt-0.5 so the icon's vertical center lines up with the bold title's cap-height (and with the body baseline in the title-less case). No API change. Visual fix only. Refs #1731 * fix(design-system): split DS::Alert into title-row + indented body Replaces the items-start + margin-fudge approach with a two-row layout that doesn't depend on icon-bounding-box vs text-cap-height arithmetic: - Title case: icon and bold title share a flex row with items-center, so the icon's vertical centre lines up with the title's line. Body (block content or message) renders below in a separate row, padded by pl-8 (= icon md width + gap-3) so it indents under the title text rather than under the icon. - Block-only case (no title, no message — used by the alpha_vantage rate-limit alert): keeps the items-start fallback with a small mt-0.5 on the icon so the cap of the first paragraph still sits near the icon centre. - Single-line message case: items-center between icon and message, no fudge needed. container_classes loses its 'flex items-start gap-3' base since the outer div is no longer the flex container. Each branch declares its own flex/items-* combination. Refs #1731 * fix(design-system): a11y semantics + visual polish on DS::Alert Builds on the title-row restructure with the items the design / a11y review surfaced: - live: keyword (default :none, accepts :status / :polite and :alert / :assertive) maps to role="status" or role="alert" on the outer div. Static, page-baked alerts (the migrated callsites in #1731) keep the default :none and stay role-less. Dynamic surfaces (flash, validation summaries appearing after a Turbo update) opt into the live role they need. - aria-labelledby on the outer div pointing at the title <p> so AT picks the title as the alert's accessible name when one is set. - Variant prefix in the title / message via an sr-only span. Screen reader hears 'Warning: …', 'Error: …', etc.; sighted users see no change. Variant labels live under ds.alert.variants.* in config/locales/views/components/en.yml. - Body text inside titled alerts now defaults to text-secondary instead of text-primary, so hierarchy reads on weight + colour rather than weight alone (Refactoring UI: hierarchy needs both). Single-line message and block-only fallback keep text-primary since there is no second tier. - Icon size goes back from md (20px) to sm (16px) — proportionally closer to text-sm body — and the items-center branches grow -mt-0.5 to compensate for the cap-centre vs line-centre offset that flex's items-center alone can't bridge. - Title weight bumped from font-medium (500) to font-semibold (600) for clearer prominence against the now-softer body. No API breakage: existing callers passing only message:/title:/variant: keep working. The new live: arg defaults to the correct value for the static migration sites. Refs #1731 * fix(design-system): drop aria-labelledby when alert has no role; revert body to text-primary Two corrections after numerical contrast analysis and CodeRabbit feedback: 1. aria-labelledby was being emitted on every titled alert, but the default live: :none leaves the outer <div> with no role. ARIA spec only honours the labelling relationship on elements with a host role, so on a generic <div> the attribute is invalid and accessibility validators flag it. Now only emitted when aria_role is set (live: :status or :alert). Static, page-baked callsites stay role-less and label-less; dynamic callers that opt into a live role get the proper accessible-name relationship. 2. text-secondary on bg-{variant}/10 in light mode lands at ~4.07-4.25:1 contrast — below WCAG AA's 4.5:1 for normal text. Reverting the body wrapper to text-primary brings it back to AAA (~15:1). Loses some of the Refactoring UI body-vs-title colour hierarchy; the title's font-semibold weight + larger optical mass against an otherwise plain body still reads as hierarchy. Single-line message and block-only fallback already used text-primary, so this just unifies the three branches. The remaining contrast gap — text-success (green-600) icon on bg-success/10 light surface at 2.77:1 — is documented in the PR description; fixing it cleanly needs a token-level bump (--color-success: green-600 -> green-700 in light mode) which is out of scope for this PR. Refs #1731 * fix(settings/providers): use DS::Alert title:+message: instead of inline content_tag Three callsites added in #1710 passed block-level markup (`<p>`/`<h2>`) through `message:` via `safe_join + content_tag`. The post-#1731 alert template wraps `message:` in a `<p>`, which makes nesting a `<p>` or `<h2>` invalid HTML — browsers auto-close the outer paragraph and the indented body row collapses. Each of the three is semantically a title + body pair, so swap them to the proper `title:` + `message:` API. No new strings — the i18n keys (`*.no_withdraw_title` / `_body`, `encryption_error.title` / `.message`) already split that way; the inline assembly was the artefact. The encryption-error block loses an explicit `<h2>` wrapper around the title; DS::Alert's title is a `<p>`. The visual hierarchy and sr-only variant prefix are unchanged. Worth tracking heading semantics as a follow-up against DS::Alert (a `heading_level:` arg) rather than bringing back the manual markup. * fix(design-system): make :destructive variant alias explicit in DS::Alert locale Add `destructive: Error` to `ds.alert.variants` and drop the implicit `:destructive -> :error` aliasing in `DS::Alert#variant_label`. Both the locale file and the component now self-document the variant set; lookup is direct, no conditional needed. Per @jjmata review on #1734.
103 lines
4.7 KiB
Plaintext
103 lines
4.7 KiB
Plaintext
<div class="space-y-4">
|
|
<% items = local_assigns[:binance_items] || @binance_items || Current.family.binance_items.active.ordered %>
|
|
|
|
<%= render DS::Alert.new(
|
|
variant: :warning,
|
|
title: t("settings.providers.binance_panel.no_withdraw_title"),
|
|
message: t("settings.providers.binance_panel.no_withdraw_body")
|
|
) %>
|
|
|
|
<div class="space-y-2">
|
|
<%= render "settings/providers/setup_steps",
|
|
steps: [
|
|
t("settings.providers.binance_panel.step1_html").html_safe,
|
|
t("settings.providers.binance_panel.step2"),
|
|
t("settings.providers.binance_panel.step3")
|
|
] %>
|
|
|
|
<div class="bg-surface-inset rounded-xl p-4 text-sm">
|
|
<p class="text-xs font-medium uppercase text-subdued tracking-wider mb-2">
|
|
<%= t("settings.providers.binance_panel.ip_hint_title") %>
|
|
</p>
|
|
<p class="text-secondary"><%= t("settings.providers.binance_panel.ip_hint_body") %></p>
|
|
<% server_ip = ENV["BINANCE_EGRESS_IP"].presence %>
|
|
<% if server_ip %>
|
|
<code class="mt-2 block text-xs bg-container px-2 py-1 rounded font-mono text-primary"><%= server_ip %></code>
|
|
<% else %>
|
|
<p class="mt-1 text-xs text-secondary italic"><%= t("settings.providers.binance_panel.ip_hint_contact_admin") %></p>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<% error_msg = local_assigns[:error_message] || @error_message %>
|
|
<% if error_msg.present? %>
|
|
<%= render DS::Alert.new(message: error_msg, variant: :error) %>
|
|
<% end %>
|
|
|
|
<% if items.any? %>
|
|
<div class="space-y-3">
|
|
<% items.each do |item| %>
|
|
<div class="flex items-center justify-between p-3 bg-container-inset rounded-lg border border-primary">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-full flex items-center justify-center" style="background-color: rgba(240, 185, 11, 0.15);">
|
|
<%= icon "coins", size: "md", class: "text-[#F0B90B]" %>
|
|
</div>
|
|
<div>
|
|
<p class="font-medium text-primary"><%= item.name %></p>
|
|
<p class="text-xs text-secondary">
|
|
<% if item.syncing? %>
|
|
<%= t("settings.providers.binance_panel.syncing") %>
|
|
<% else %>
|
|
<%= item.sync_status_summary %>
|
|
<% end %>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<%= button_to sync_binance_item_path(item),
|
|
method: :post,
|
|
class: "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-secondary hover:text-primary border border-secondary rounded-lg hover:border-primary",
|
|
disabled: item.syncing? do %>
|
|
<%= icon "refresh-cw", size: "sm" %>
|
|
<%= t("settings.providers.binance_panel.sync") %>
|
|
<% end %>
|
|
<%= button_to binance_item_path(item),
|
|
method: :delete,
|
|
class: "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-destructive hover:bg-destructive/10 rounded-lg",
|
|
data: { turbo_confirm: t("settings.providers.binance_panel.disconnect_confirm") } do %>
|
|
<%= icon "trash-2", size: "sm" %>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% else %>
|
|
<%
|
|
binance_item = Current.family.binance_items.build(name: "Binance")
|
|
%>
|
|
|
|
<%= styled_form_with model: binance_item,
|
|
url: binance_items_path,
|
|
scope: :binance_item,
|
|
method: :post,
|
|
data: { turbo: true },
|
|
class: "space-y-3" do |form| %>
|
|
<%= form.text_field :api_key,
|
|
label: t("settings.providers.binance_panel.api_key_label"),
|
|
placeholder: t("settings.providers.binance_panel.api_key_placeholder"),
|
|
type: :password %>
|
|
|
|
<%= form.text_field :api_secret,
|
|
label: t("settings.providers.binance_panel.api_secret_label"),
|
|
placeholder: t("settings.providers.binance_panel.api_secret_placeholder"),
|
|
type: :password %>
|
|
|
|
<div class="flex justify-end">
|
|
<%= form.submit t("settings.providers.binance_panel.connect_button"),
|
|
class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-inverse bg-inverse hover:bg-inverse-hover focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 transition-colors" %>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
</div>
|