mirror of
https://github.com/we-promise/sure.git
synced 2026-05-12 23:25:00 +00:00
2bcdf6c554
* fix(design-system): replace undefined utility classes and broken /N modifiers
Audit of class-name resolution in views surfaced two related silent
failures across ~17 files:
1. Class names that don't exist anywhere in the design system. Tailwind
silently drops them and the element renders with no CSS for that
property.
- bg-primary (and bg-primary/5, /10, /90): never defined as a
custom utility, no --color-primary in @theme. Used as a CTA bg
in 8 places, all rendered transparent.
- text-inverted: typo of text-inverse.
- text-primary-foreground: shadcn/Radix vocabulary, not in our
token system.
- bg-accent / border-accent / text-accent: same shadcn vocabulary;
not defined.
2. Slash modifier (/N) used on custom @utility blocks. Modifiers only
resolve on Tailwind theme colors (anything in tokens.json color.*).
Custom @utility blocks compile to static @apply statements and
silently drop the /N variant. Affected uses:
- border-surface-inset/50 across provider account selectors.
- border-secondary/30, /40 in admin SSO form and simplefin setup.
- bg-surface-inset/30, /40 in settings preferences and simplefin.
Fixes:
| From | To |
|---------------------------------------------------|------------------------------------------------------|
| bg-primary text-white (and similar primary CTAs) | button-bg-primary text-inverse |
| bg-primary text-primary-foreground (badges) | button-bg-primary text-inverse |
| bg-primary text-inverted (typo) | button-bg-primary text-inverse |
| bg-primary text-primary (broken active pill) | bg-inverse text-inverse |
| bg-primary (status dot) | bg-inverse |
| bg-primary/5, bg-primary/10 (subtle accent bg) | bg-gray-tint-5, bg-gray-tint-10 |
| hover:bg-primary/90 | hover:button-bg-primary-hover |
| border-accent bg-accent/10 text-accent (badges) | border-secondary bg-surface-inset text-secondary |
| border-surface-inset/50 | border-secondary |
| border-secondary/30, /40 | border-tertiary |
| bg-surface-inset/30 | bg-surface-inset (full strength) |
| bg-surface-inset/40 | bg-container-inset |
Also documents the alpha-modifier limitation in design/tokens/README.md
under a new "Alpha modifiers in views (/N syntax)" section, with the
opacity-N convention for custom utilities and a note that the
gray-tint-5 / gray-tint-10 family (and similar pre-resolved tints) are
theme colors and accept /N modifiers natively.
The accent-badge mapping uses neutral semantics for now. A dedicated
brand-accent token (text-link-tint-10 etc.) is worth considering as a
follow-up if the "highlighted metadata badge" pattern recurs.
* fix(design-system): replace undefined divide-primary / divide-secondary with alpha tokens
Same class of bug as the rest of this PR: divide-{name} requires the
name to be a theme color (i.e. expose --color-{name}), and our custom
@utility utilities (primary, secondary, etc.) do not. Tailwind silently
drops the unrecognized class and rows render with no separator.
Spotted six instances during the visual audit:
- admin/users/index.html.erb (×2): users table + pending invitations
- admin/sso_providers/index.html.erb (×2): configured + legacy lists
- transactions/categorizes/_transaction_list.html.erb: categorize sidebar
- settings/preferences/show.html.erb: divide-secondary/60 (also broken)
Swapped to the alpha-black/white pattern already used elsewhere in the
codebase (imports/cleans/show, transactions/_summary, etc.):
divide-y divide-primary
-> divide-y divide-alpha-black-200 theme-dark:divide-alpha-white-200
divide-y divide-secondary/60
-> divide-y divide-alpha-black-100 theme-dark:divide-alpha-white-100
The lighter (-100) variant on the preferences list matches the original
intent of /60 (more subtle).
149 lines
6.6 KiB
Plaintext
149 lines
6.6 KiB
Plaintext
<%# locals: (indexa_capital_item:) %>
|
|
|
|
<%= tag.div id: dom_id(indexa_capital_item) do %>
|
|
<details open class="group bg-container p-4 shadow-border-xs rounded-xl">
|
|
<summary class="flex items-center justify-between gap-2 focus-visible:outline-hidden">
|
|
<div class="flex items-center gap-2">
|
|
<%= icon "chevron-right", class: "group-open:transform group-open:rotate-90" %>
|
|
|
|
<div class="flex items-center justify-center h-8 w-8 bg-gray-tint-10 rounded-full">
|
|
<div class="flex items-center justify-center">
|
|
<%= tag.p indexa_capital_item.name.first.upcase, class: "text-primary text-xs font-medium" %>
|
|
</div>
|
|
</div>
|
|
|
|
<% unlinked_count = indexa_capital_item.unlinked_accounts_count %>
|
|
|
|
<div class="pl-1 text-sm">
|
|
<div class="flex items-center gap-2">
|
|
<%= tag.p indexa_capital_item.name, class: "font-medium text-primary" %>
|
|
<% if indexa_capital_item.scheduled_for_deletion? %>
|
|
<p class="text-destructive text-sm animate-pulse"><%= t(".deletion_in_progress") %></p>
|
|
<% end %>
|
|
</div>
|
|
<p class="text-xs text-secondary"><%= t(".provider_name") %></p>
|
|
<% if indexa_capital_item.syncing? %>
|
|
<div class="text-secondary flex items-center gap-1">
|
|
<%= icon "loader", size: "sm", class: "animate-spin" %>
|
|
<%= tag.span t(".syncing") %>
|
|
</div>
|
|
<% elsif indexa_capital_item.requires_update? %>
|
|
<div class="text-warning flex items-center gap-1">
|
|
<%= icon "alert-triangle", size: "sm", color: "warning" %>
|
|
<%= tag.span t(".requires_update") %>
|
|
</div>
|
|
<% elsif indexa_capital_item.sync_error.present? %>
|
|
<div class="text-secondary flex items-center gap-1">
|
|
<%= render DS::Tooltip.new(text: indexa_capital_item.sync_error, icon: "alert-circle", size: "sm", color: "destructive") %>
|
|
<%= tag.span t(".error"), class: "text-destructive" %>
|
|
</div>
|
|
<% else %>
|
|
<p class="text-secondary">
|
|
<% if indexa_capital_item.last_synced_at %>
|
|
<%= t(".status", timestamp: time_ago_in_words(indexa_capital_item.last_synced_at), summary: indexa_capital_item.sync_status_summary) %>
|
|
<% else %>
|
|
<%= t(".status_never") %>
|
|
<% end %>
|
|
</p>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<% if Current.user&.admin? %>
|
|
<div class="flex items-center gap-2">
|
|
<% if indexa_capital_item.requires_update? %>
|
|
<%= render DS::Link.new(
|
|
text: t(".update_credentials"),
|
|
icon: "refresh-cw",
|
|
variant: "secondary",
|
|
href: settings_providers_path,
|
|
frame: "_top"
|
|
) %>
|
|
<% else %>
|
|
<%= icon(
|
|
"refresh-cw",
|
|
as_button: true,
|
|
href: sync_indexa_capital_item_path(indexa_capital_item),
|
|
disabled: indexa_capital_item.syncing?
|
|
) %>
|
|
<% end %>
|
|
|
|
<%= render DS::Menu.new do |menu| %>
|
|
<% if unlinked_count > 0 %>
|
|
<% menu.with_item(
|
|
variant: "link",
|
|
text: t(".setup_action"),
|
|
icon: "settings",
|
|
href: setup_accounts_indexa_capital_item_path(indexa_capital_item),
|
|
frame: :modal
|
|
) %>
|
|
<% end %>
|
|
<% menu.with_item(
|
|
variant: "link",
|
|
text: t(".update_credentials"),
|
|
icon: "cable",
|
|
href: settings_providers_path(manage: "1")
|
|
) %>
|
|
<% menu.with_item(
|
|
variant: "button",
|
|
text: t(".delete"),
|
|
icon: "trash-2",
|
|
href: indexa_capital_item_path(indexa_capital_item),
|
|
method: :delete,
|
|
confirm: CustomConfirm.for_resource_deletion(indexa_capital_item.name, high_severity: true)
|
|
) %>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</summary>
|
|
|
|
<% unless indexa_capital_item.scheduled_for_deletion? %>
|
|
<div class="space-y-4 mt-4">
|
|
<% if indexa_capital_item.accounts.any? %>
|
|
<%= render "accounts/index/account_groups", accounts: indexa_capital_item.accounts %>
|
|
<% end %>
|
|
|
|
<%# Sync summary (collapsible) - using shared ProviderSyncSummary component %>
|
|
<% stats = indexa_capital_item.syncs.ordered.first&.sync_stats || {} %>
|
|
<% activities_pending = indexa_capital_item.indexa_capital_accounts.any?(&:activities_fetch_pending) %>
|
|
<%= render ProviderSyncSummary.new(
|
|
stats: stats,
|
|
provider_item: indexa_capital_item,
|
|
activities_pending: activities_pending
|
|
) %>
|
|
|
|
<% if unlinked_count > 0 && indexa_capital_item.accounts.empty? %>
|
|
<%# No accounts imported yet - show prominent setup prompt %>
|
|
<div class="p-4 flex flex-col gap-3 items-center justify-center">
|
|
<p class="text-primary font-medium text-sm"><%= t(".setup_needed") %></p>
|
|
<p class="text-secondary text-sm"><%= t(".setup_description", linked: indexa_capital_item.linked_accounts_count, total: indexa_capital_item.total_accounts_count) %></p>
|
|
<%= render DS::Link.new(
|
|
text: t(".setup_action"),
|
|
icon: "settings",
|
|
variant: "primary",
|
|
href: setup_accounts_indexa_capital_item_path(indexa_capital_item),
|
|
frame: :modal
|
|
) %>
|
|
</div>
|
|
<% elsif unlinked_count > 0 %>
|
|
<%# Some accounts imported, more available - show subtle link %>
|
|
<div class="pt-2 border-t border-primary">
|
|
<%= link_to setup_accounts_indexa_capital_item_path(indexa_capital_item),
|
|
data: { turbo_frame: :modal },
|
|
class: "flex items-center gap-2 text-sm text-secondary hover:text-primary transition-colors" do %>
|
|
<%= icon "plus", size: "sm" %>
|
|
<span><%= t(".more_accounts_available", count: unlinked_count) %></span>
|
|
<% end %>
|
|
</div>
|
|
<% elsif indexa_capital_item.accounts.empty? && indexa_capital_item.indexa_capital_accounts.none? %>
|
|
<%# No provider accounts at all - waiting for sync %>
|
|
<div class="p-4 flex flex-col gap-3 items-center justify-center">
|
|
<p class="text-primary font-medium text-sm"><%= t(".no_accounts_title") %></p>
|
|
<p class="text-secondary text-sm"><%= t(".no_accounts_description") %></p>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</details>
|
|
<% end %>
|