mirror of
https://github.com/we-promise/sure.git
synced 2026-05-25 13:34:58 +00:00
8a2f16a621
Per the user's directive — DS-compliance over pixel-perfect alignment with the design mock. Walked the design audit and applied every swap that lands within ±2px of the original. Swaps: - _health_strip: gap-[18px] → gap-5 (+2), px-[14px] → px-3.5 (=), text-[13px] → text-sm (+1). - _search_filters: chip group p-[3px] → p-1, rounded-[10px] → rounded-xl (concentric with rounded-lg inner pills), chip py-[5px] → py-1. - _status_pill: text-[11px] → text-xs. - _group_heading: mt-[18px] → mt-5. - _maturity_badge: text-[10px] → text-xs. - provider_card: tagline + foot text-[13px] → text-sm. Kept arbitrary: `min-w-[200px]` in _search_filters — nearest scale tokens are min-w-48 (192px) and min-w-52 (208px); both are noticeable layout shifts for a one-off responsive guard. Worth keeping the arbitrary here. Net: 9 of 10 arbitrary values gone. Visual delta: max +2px on a single value. Design mock and DS scale now agree.
26 lines
1.3 KiB
Plaintext
26 lines
1.3 KiB
Plaintext
<%= link_to connect_path,
|
|
class: "bg-container shadow-border-xs rounded-xl p-4 flex flex-col gap-2.5 text-primary hover:bg-container-hover transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-alpha-black-100",
|
|
data: { turbo_frame: "drawer", turbo_prefetch: "false" }.merge(filter_data) do %>
|
|
<div class="flex items-start gap-2.5">
|
|
<div class="w-9 h-9 rounded-lg flex items-center justify-center shrink-0 <%= logo_bg %>">
|
|
<span class="text-xs font-bold text-inverse"><%= logo_text %></span>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center gap-2 flex-wrap">
|
|
<span class="text-sm font-medium text-primary"><%= name %></span>
|
|
<%= render "settings/providers/maturity_badge", label: maturity_label %>
|
|
</div>
|
|
<% if meta_line.present? %>
|
|
<p class="text-xs text-subdued mt-0.5"><%= meta_line %></p>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% if tagline.present? %>
|
|
<p class="text-sm text-secondary grow leading-snug"><%= tagline %></p>
|
|
<% end %>
|
|
<div class="flex items-center justify-end gap-1.5 text-sm font-medium text-primary">
|
|
<%= t("settings.providers.connect") %>
|
|
<%= helpers.icon "arrow-right", size: "sm", class: "!w-3.5 !h-3.5" %>
|
|
</div>
|
|
<% end %>
|