mirror of
https://github.com/we-promise/sure.git
synced 2026-05-09 21:54:58 +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).
198 lines
7.8 KiB
Plaintext
198 lines
7.8 KiB
Plaintext
<% if @newly_created && @plain_key %>
|
|
<%= content_for :page_title, "API Key Created Successfully" %>
|
|
|
|
<div class="bg-container rounded-xl shadow-border-xs p-4">
|
|
<div class="space-y-4">
|
|
<div class="p-3 shadow-border-xs bg-container rounded-lg">
|
|
<div class="flex items-start gap-3">
|
|
<%= render DS::FilledIcon.new(
|
|
icon: "check-circle",
|
|
rounded: true,
|
|
size: "lg",
|
|
variant: :success
|
|
) %>
|
|
<div class="flex-1">
|
|
<h3 class="font-medium text-primary">API Key Created Successfully!</h3>
|
|
<p class="text-secondary text-sm mt-1">Your new API key "<%= @current_api_key.name %>" has been created and is ready to use.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-surface-inset rounded-xl p-4">
|
|
<h4 class="font-medium text-primary mb-3">Your API Key</h4>
|
|
<p class="text-secondary text-sm mb-3">Copy and store this key securely. You'll need it to authenticate your API requests.</p>
|
|
|
|
<div class="bg-container rounded-lg p-3 border border-primary" data-controller="clipboard">
|
|
<div class="flex items-center justify-between gap-3">
|
|
<code id="api-key-display" class="font-mono text-sm text-primary break-all" data-clipboard-target="source"><%= @current_api_key.plain_key %></code>
|
|
<%= render DS::Button.new(
|
|
text: "Copy API Key",
|
|
variant: "ghost",
|
|
icon: "copy",
|
|
data: { action: "clipboard#copy" }
|
|
) %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-surface-inset rounded-xl p-4">
|
|
<h4 class="font-medium text-primary mb-3">How to use your API key</h4>
|
|
<p class="text-secondary text-sm mb-3"><%= t(".current_api_key.usage_instructions", product_name: product_name) %></p>
|
|
<div class="bg-container rounded-lg p-3 font-mono text-sm text-primary border border-primary">
|
|
curl -H "X-Api-Key: <%= @current_api_key.plain_key %>" <%= request.base_url %>/api/v1/accounts
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-end pt-4 border-t border-primary">
|
|
<%= render DS::Link.new(
|
|
text: "Continue to API Key Settings",
|
|
href: settings_api_key_path,
|
|
variant: "primary"
|
|
) %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% elsif @current_api_key %>
|
|
<%= content_for :page_title, "Your API Key" %>
|
|
<%= content_for :page_actions do %>
|
|
<%= render DS::Link.new(
|
|
text: "Create New Key",
|
|
href: new_settings_api_key_path(regenerate: true),
|
|
variant: "secondary"
|
|
) %>
|
|
<% end %>
|
|
|
|
<div class="bg-container rounded-xl shadow-border-xs p-4">
|
|
<div class="space-y-4">
|
|
<div class="p-3 shadow-border-xs bg-container rounded-lg flex justify-between items-center">
|
|
<div class="flex items-center gap-3">
|
|
<%= render DS::FilledIcon.new(
|
|
icon: "key",
|
|
rounded: true,
|
|
size: "lg"
|
|
) %>
|
|
|
|
<div class="text-sm space-y-1">
|
|
<p class="text-primary font-medium"><%= @current_api_key.name %></p>
|
|
<p class="text-secondary">
|
|
Created <%= time_ago_in_words(@current_api_key.created_at) %> ago
|
|
<% if @current_api_key.last_used_at %>
|
|
• Last used <%= time_ago_in_words(@current_api_key.last_used_at) %> ago
|
|
<% else %>
|
|
• Never used
|
|
<% end %>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-md bg-success px-2 py-1">
|
|
<p class="text-success-foreground font-medium text-xs">Active</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-surface-inset rounded-xl p-4">
|
|
<h4 class="font-medium text-primary mb-3">Permissions</h4>
|
|
<div class="flex flex-wrap gap-2">
|
|
<% @current_api_key.scopes.each do |scope| %>
|
|
<span class="inline-flex items-center gap-1 px-2 py-1 button-bg-primary text-inverse rounded-full text-xs font-medium">
|
|
<%= icon("shield-check", class: "w-3 h-3") %>
|
|
<%= case scope
|
|
when "read" then "Read Only"
|
|
when "read_write" then "Read/Write"
|
|
else scope.humanize
|
|
end %>
|
|
</span>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-surface-inset rounded-xl p-4">
|
|
<h4 class="font-medium text-primary mb-3">Your API Key</h4>
|
|
<p class="text-secondary text-sm mb-3">Copy and store this key securely. You'll need it to authenticate your API requests.</p>
|
|
|
|
<div class="bg-container rounded-lg p-3 border border-primary" data-controller="clipboard">
|
|
<div class="flex items-center justify-between gap-3">
|
|
<code id="api-key-display" class="font-mono text-sm text-primary break-all" data-clipboard-target="source"><%= @current_api_key.plain_key %></code>
|
|
<%= render DS::Button.new(
|
|
text: "Copy API Key",
|
|
variant: "ghost",
|
|
icon: "copy",
|
|
data: { action: "clipboard#copy" }
|
|
) %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-surface-inset rounded-xl p-4">
|
|
<h4 class="font-medium text-primary mb-3">How to use your API key</h4>
|
|
<p class="text-secondary text-sm mb-3"><%= t(".current_api_key.usage_instructions", product_name: product_name) %></p>
|
|
<div class="bg-container rounded-lg p-3 font-mono text-sm text-primary border border-primary">
|
|
curl -H "X-Api-Key: <%= @current_api_key.plain_key %>" <%= request.base_url %>/api/v1/accounts
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-end pt-4 border-t border-primary">
|
|
<%= render DS::Button.new(
|
|
text: "Revoke Key",
|
|
href: settings_api_key_path,
|
|
method: :delete,
|
|
variant: "destructive",
|
|
data: {
|
|
turbo_confirm: "Are you sure you want to revoke this API key?"
|
|
}
|
|
) %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% else %>
|
|
<%= content_for :page_title, t(".no_api_key.title") %>
|
|
<%= content_for :page_actions do %>
|
|
<%= render DS::Link.new(
|
|
text: t(".no_api_key.create_api_key"),
|
|
href: new_settings_api_key_path,
|
|
variant: "primary"
|
|
) %>
|
|
<% end %>
|
|
|
|
<div class="bg-container rounded-xl shadow-border-xs p-4">
|
|
<div class="space-y-4">
|
|
<div class="p-3 shadow-border-xs bg-container rounded-lg">
|
|
<div class="flex items-start gap-3">
|
|
<%= render DS::FilledIcon.new(
|
|
icon: "key",
|
|
rounded: true,
|
|
size: "lg"
|
|
) %>
|
|
<div class="flex-1">
|
|
<h3 class="font-medium text-primary"><%= t(".no_api_key.heading", product_name: product_name) %></h3>
|
|
<p class="text-secondary text-sm mt-1"><%= t(".no_api_key.description") %></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-surface-inset rounded-xl p-4">
|
|
<h4 class="font-medium text-primary mb-3"><%= t(".no_api_key.what_you_can_do") %></h4>
|
|
<ul class="space-y-2 text-sm text-secondary">
|
|
<li class="flex items-start gap-2">
|
|
<%= icon("check", class: "w-4 h-4 text-primary mt-0.5") %>
|
|
<span><%= t(".no_api_key.feature_1") %></span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<%= icon("check", class: "w-4 h-4 text-primary mt-0.5") %>
|
|
<span><%= t(".no_api_key.feature_2") %></span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<%= icon("check", class: "w-4 h-4 text-primary mt-0.5") %>
|
|
<span><%= t(".no_api_key.feature_3") %></span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="bg-surface-inset rounded-xl p-4">
|
|
<h4 class="font-medium text-primary mb-2"><%= t(".no_api_key.security_note_title") %></h4>
|
|
<p class="text-secondary text-sm"><%= t(".no_api_key.security_note") %></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|