mirror of
https://github.com/we-promise/sure.git
synced 2026-05-27 14:34:56 +00:00
0d32bb70ec
* chore(design-system): swap raw gray classes for semantic tokens across remaining views Finalizes the raw-color sweep started in #1652 (settings) and continued in #1654 (holdings). Covers accounts, budgets, chats, pages, imports, provider integrations (mercury, lunchflow, sophtron, enable_banking, coinstats), auth flows (password reset, MFA, registrations), shared layouts, and selected DS component hover states. 35 files, ~56 line changes. Mappings (matching the patterns established in the prior sweeps): - text-white bg-gray-900 hover:bg-gray-800 (with optional focus:ring-gray-900) -> text-inverse button-bg-primary hover:button-bg-primary-hover -> focus:ring-button-bg-primary - text-gray-500 / 600 / 700 -> text-secondary - text-gray-800 -> text-primary - text-gray-400 -> text-subdued - hover:text-gray-700 / hover:text-gray-100 -> hover:text-primary - bg-gray-50 / 100 / 200 (standalone) -> bg-surface-inset - bg-gray-500/5 -> bg-gray-tint-5 - bg-gray-500/10 -> bg-gray-tint-10 - bg-gray-900 (decorative active states) -> bg-inverse - hover:bg-gray-50 / 100 (standalone) -> hover:bg-surface-inset - hover:bg-gray-300 -> hover:bg-surface-inset-hover - bg-white hover:bg-gray-100 -> bg-container hover:bg-container-hover - border-gray-300 -> border-secondary - focus:border-gray-200 -> focus:border-secondary - focus-within:border-gray-900 -> focus-within:border-primary - DS::Buttonish outline / ghost / icon hover: hover:bg-gray-100 theme-dark:hover:bg-gray-700 -> hover:bg-container-inset-hover Left intentionally raw, with rationale: - bg-gray-300 / bg-gray-400 decorative dots and avatar circles. The raw value reads OK against both bg-container variants; no semantic "neutral indicator" token exists. Same pattern as #1652 / #1654. - bg-gray-400/20 theme-dark:bg-gray-500/20 (onboardings/trial). Custom alpha tint with no equivalent token. - bg-white theme-dark:bg-gray-700 (DS::Tabs active pill, budgets tabs). Custom tab-pill pattern; gray-700 in dark mode (one shade lighter than page bg-gray-900) is intentional for visibility. - bg-gray-100 theme-dark:bg-gray-700 (DS::Toggle base bg). Closest match (bg-container-inset-hover) is semantically a hover state. - DS::Buttonish secondary variant gray-200/300/700/600 pattern. Same pattern as #1654 holdings; needs button-bg-secondary-strong from that PR. Will swap in a follow-up after #1654 merges. - disabled:bg-gray-500 theme-dark:disabled:bg-gray-400 on inverse buttons (DS::Buttonish primary, enable_banking, coinstats). Custom disabled state for the inverse pair; no token. - text-gray-300 SVG stroke (shared/_progress_circle). - bg-white text-gray-900 (layouts/print). Print contexts intentionally light regardless of theme. - bg-gray-800 / border-gray-700 / text-white / hover:text-gray-100 (impersonation_sessions/_super_admin_bar). Admin overlay styled to remain dark in both modes; not a theme-aware component. Files covered by other in-flight PRs were skipped to avoid rebase conflicts: chats/_ai_consent's fg-inverse swap (#1626), shared/_text_tooltip and shared/_money_field tooltip pills (#1626), investments/_value_tooltip (#1626), components/DS/tooltip (#1626). * fix(design-system): keep changelog avatar text raw to preserve dark-mode contrast The changelog avatar fallback (when @release_notes[:avatar] is missing) sits inside the "decorative + raw" exception list — bg-gray-300 stays fixed across themes since no semantic neutral-indicator token exists. The earlier sweep partially themed the pair: bg-gray-300 stayed raw but text-gray-600 became text-secondary. text-secondary resolves to gray-300 in dark mode, which matches the bg → text became invisible against its own background. Reverting only the text class to text-gray-600 restores the original fixed-light placeholder behavior. Both classes raw, both themes readable. * fix(design-system): address review feedback on raw-color-sweep-finalize Six issues caught by CodeRabbit + Codex review: 1. focus:ring-button-bg-primary silently emits no CSS (×6 files). button-bg-primary is a custom @utility, not a theme color, so Tailwind's ring-{name} resolution finds no --color-button-bg-primary. Replaces with focus:ring-gray-900 theme-dark:focus:ring-white — same color flip as the button bg, but resolved through theme colors so the ring actually renders. Files: lunchflow/mercury/sophtron _api_error + _setup_required, coinstats_items/new. 2. accounts/show/_activity.html.erb: focus-within:ring-gray-100 was dead (no ring-width on the parent). Removed. 3. import/confirms/show.html.erb: uniform hover:bg-surface-inset-hover applied to both active and inactive step indicators created a jarring dark-to-light flip on the active step (bg-inverse → bg-surface-inset-hover). Now hover follows the resting state: active uses hover:bg-inverse-hover, inactive uses hover:bg-surface-inset-hover. 4. password_resets/new.html.erb: bg-white left raw alongside the migrated hover:bg-surface-inset. Swapped to bg-container so dark mode flips properly. 5. registrations/new.html.erb + password_validator_controller.js: view now uses bg-surface-inset on password strength block lines, but the Stimulus controller still toggled bg-gray-200 on validate. Updated controller to add/remove bg-surface-inset matching the view, so unmet states reset to the tokenized class instead of leaving raw gray-200 stuck on the element.
233 lines
10 KiB
Plaintext
233 lines
10 KiB
Plaintext
<%= render DS::Dialog.new do |dialog| %>
|
|
<% dialog.with_header(title: t(".title"), subtitle: t(".description")) %>
|
|
|
|
<% dialog.with_body do %>
|
|
<% has_accounts = accessible_accounts.any? %>
|
|
<% requires_account_message = t(".requires_account") %>
|
|
|
|
<% if @pending_import.present? && params[:type].nil? %>
|
|
<div class="rounded-xl bg-container-inset p-1 mb-4">
|
|
<ul class="bg-container shadow-border-xs rounded-lg">
|
|
<li>
|
|
<%= link_to import_path(@pending_import), class: "flex items-center justify-between p-4 group cursor-pointer", data: { turbo: false } do %>
|
|
<div class="flex items-center gap-2">
|
|
<div class="bg-orange-500/5 rounded-md w-8 h-8 flex items-center justify-center">
|
|
<span class="text-orange-500">
|
|
<%= icon("loader", color: "current") %>
|
|
</span>
|
|
</div>
|
|
<span class="text-sm text-primary group-hover:text-secondary">
|
|
<%= t(".resume", type: @pending_import.type.titleize) %>
|
|
</span>
|
|
</div>
|
|
<%= icon("chevron-right") %>
|
|
<% end %>
|
|
|
|
<%= render "shared/ruler" %>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%
|
|
import_type = params[:type].presence || @pending_import&.type
|
|
active_tab = import_type.present? && !import_type.in?(%w[MintImport QifImport SureImport DocumentImport PdfImport]) ? "raw_data" : "financial_tools"
|
|
%>
|
|
<%= render DS::Tabs.new(active_tab: active_tab) do |tabs| %>
|
|
<% tabs.with_nav do |nav| %>
|
|
<% nav.with_btn(id: "financial_tools", label: t(".tab_financial_tools")) %>
|
|
<% nav.with_btn(id: "raw_data", label: t(".tab_raw_data")) %>
|
|
<% end %>
|
|
|
|
<% tabs.with_panel(tab_id: "financial_tools") do %>
|
|
<div class="rounded-xl bg-container-inset p-1">
|
|
<ul class="bg-container shadow-border-xs rounded-lg">
|
|
<% if @pending_import.present? && params[:type].present? && params[:type].in?(%w[MintImport QifImport SureImport DocumentImport PdfImport]) %>
|
|
<li>
|
|
<%= link_to import_path(@pending_import), class: "flex items-center justify-between p-4 group cursor-pointer", data: { turbo: false } do %>
|
|
<div class="flex items-center gap-2">
|
|
<div class="bg-orange-500/5 rounded-md w-8 h-8 flex items-center justify-center">
|
|
<span class="text-orange-500">
|
|
<%= icon("loader", color: "current") %>
|
|
</span>
|
|
</div>
|
|
<span class="text-sm text-primary group-hover:text-secondary">
|
|
<%= t(".resume", type: @pending_import.type.titleize) %>
|
|
</span>
|
|
</div>
|
|
<%= icon("chevron-right") %>
|
|
<% end %>
|
|
|
|
<%= render "shared/ruler" %>
|
|
</li>
|
|
<% end %>
|
|
|
|
<% if params[:type].nil? || params[:type] == "SureImport" %>
|
|
<li>
|
|
<%= styled_form_with url: imports_path, scope: :import, multipart: true, class: "w-full", data: { turbo: false } do |form| %>
|
|
<%= form.hidden_field :type, value: "SureImport" %>
|
|
<label class="flex items-center justify-between p-4 group cursor-pointer w-full">
|
|
<div class="flex items-center gap-2">
|
|
<div class="bg-cyan-500/5 rounded-md w-8 h-8 flex items-center justify-center">
|
|
<span class="text-cyan-500">
|
|
<%= icon("file-braces", color: "current") %>
|
|
</span>
|
|
</div>
|
|
<div class="text-left">
|
|
<span class="text-sm text-primary group-hover:text-secondary block">
|
|
<%= t(".import_sure") %>
|
|
</span>
|
|
<span class="text-xs text-secondary">
|
|
<%= t(".import_sure_description") %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<%= icon("chevron-right") %>
|
|
<%= form.file_field :import_file, accept: ".ndjson,.json", class: "hidden", onchange: "this.form.submit()" %>
|
|
</label>
|
|
<% end %>
|
|
|
|
<%= render "shared/ruler" %>
|
|
</li>
|
|
<% end %>
|
|
|
|
<% if params[:type].nil? || params[:type] == "MintImport" || params[:type] == "TransactionImport" %>
|
|
<%= render "imports/import_option",
|
|
type: "MintImport",
|
|
image: "mint-logo.jpeg",
|
|
label: t(".import_mint"),
|
|
enabled: true %>
|
|
<% end %>
|
|
|
|
<% if params[:type].nil? || params[:type] == "QifImport" %>
|
|
<%= render "imports/import_option",
|
|
type: "QifImport",
|
|
icon_name: "file-clock",
|
|
icon_bg_class: "bg-teal-500/5",
|
|
icon_text_class: "text-teal-500",
|
|
label: t(".import_qif"),
|
|
enabled: true %>
|
|
<% end %>
|
|
|
|
<%= render "imports/import_option",
|
|
type: "TransactionImport",
|
|
icon_name: "bar-chart-2",
|
|
icon_bg_class: "bg-gray-tint-5",
|
|
icon_text_class: "text-subdued",
|
|
label: t(".import_ynab"),
|
|
enabled: false,
|
|
disabled_message: t(".coming_soon") %>
|
|
|
|
<% if (params[:type].nil? || params[:type].in?(%w[DocumentImport PdfImport])) && @document_upload_extensions.any? %>
|
|
<li>
|
|
<%= styled_form_with url: imports_path, scope: :import, multipart: true, class: "w-full", data: { turbo: false } do |form| %>
|
|
<%= form.hidden_field :type, value: "DocumentImport" %>
|
|
<label class="flex items-center justify-between p-4 group cursor-pointer w-full">
|
|
<div class="flex items-center gap-2">
|
|
<div class="bg-red-500/5 rounded-md w-8 h-8 flex items-center justify-center">
|
|
<span class="text-red-500">
|
|
<%= icon("file-text", color: "current") %>
|
|
</span>
|
|
</div>
|
|
<div class="text-left">
|
|
<span class="text-sm text-primary group-hover:text-secondary block">
|
|
<%= t(".import_file") %>
|
|
</span>
|
|
<span class="text-xs text-secondary">
|
|
<%= t(".import_file_description") %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<%= icon("chevron-right") %>
|
|
<%= form.file_field :import_file, accept: @document_upload_extensions.join(","), class: "hidden", onchange: "this.form.submit()" %>
|
|
</label>
|
|
<% end %>
|
|
|
|
<%= render "shared/ruler" %>
|
|
</li>
|
|
<% end %>
|
|
</ul>
|
|
</div>
|
|
<% end %>
|
|
|
|
<% tabs.with_panel(tab_id: "raw_data") do %>
|
|
<div class="rounded-xl bg-container-inset p-1">
|
|
<ul class="bg-container shadow-border-xs rounded-lg">
|
|
<% if @pending_import.present? && params[:type].present? && !params[:type].in?(%w[MintImport QifImport SureImport DocumentImport PdfImport]) %>
|
|
<li>
|
|
<%= link_to import_path(@pending_import), class: "flex items-center justify-between p-4 group cursor-pointer", data: { turbo: false } do %>
|
|
<div class="flex items-center gap-2">
|
|
<div class="bg-orange-500/5 rounded-md w-8 h-8 flex items-center justify-center">
|
|
<span class="text-orange-500">
|
|
<%= icon("loader", color: "current") %>
|
|
</span>
|
|
</div>
|
|
<span class="text-sm text-primary group-hover:text-secondary">
|
|
<%= t(".resume", type: @pending_import.type.titleize) %>
|
|
</span>
|
|
</div>
|
|
<%= icon("chevron-right") %>
|
|
<% end %>
|
|
|
|
<%= render "shared/ruler" %>
|
|
</li>
|
|
<% end %>
|
|
|
|
<% if params[:type].nil? || params[:type] == "TransactionImport" %>
|
|
<%= render "imports/import_option",
|
|
type: "TransactionImport",
|
|
icon_name: "file-spreadsheet",
|
|
icon_bg_class: "bg-indigo-500/5",
|
|
icon_text_class: "text-indigo-500",
|
|
label: t(".import_transactions"),
|
|
enabled: has_accounts,
|
|
disabled_message: requires_account_message %>
|
|
<% end %>
|
|
|
|
<% if params[:type].nil? || params[:type] == "TradeImport" %>
|
|
<%= render "imports/import_option",
|
|
type: "TradeImport",
|
|
icon_name: "square-percent",
|
|
icon_bg_class: "bg-yellow-500/5",
|
|
icon_text_class: "text-yellow-500",
|
|
label: t(".import_portfolio"),
|
|
enabled: has_accounts,
|
|
disabled_message: requires_account_message %>
|
|
<% end %>
|
|
|
|
<% if params[:type].nil? || params[:type] == "AccountImport" %>
|
|
<%= render "imports/import_option",
|
|
type: "AccountImport",
|
|
icon_name: "building",
|
|
icon_bg_class: "bg-violet-500/5",
|
|
icon_text_class: "text-violet-500",
|
|
label: t(".import_accounts"),
|
|
enabled: true %>
|
|
<% end %>
|
|
|
|
<% if params[:type].nil? || params[:type] == "CategoryImport" %>
|
|
<%= render "imports/import_option",
|
|
type: "CategoryImport",
|
|
icon_name: "shapes",
|
|
icon_bg_class: "bg-blue-500/5",
|
|
icon_text_class: "text-blue-500",
|
|
label: t(".import_categories"),
|
|
enabled: true %>
|
|
<% end %>
|
|
|
|
<% if params[:type].nil? || params[:type] == "RuleImport" %>
|
|
<%= render "imports/import_option",
|
|
type: "RuleImport",
|
|
icon_name: "workflow",
|
|
icon_bg_class: "bg-green-500/5",
|
|
icon_text_class: "text-green-500",
|
|
label: t(".import_rules"),
|
|
enabled: true %>
|
|
<% end %>
|
|
</ul>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|
|
<% end %>
|
|
<% end %>
|