QT/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure.git synced 2026-04-19 03:54:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix dark mode compatibility for SimpleFin UI components

Browse Source 
- Replace hardcoded colors with design system tokens throughout SimpleFin views
- Fix method selector hover states to use bg-surface instead of bg-gray-50
- Update SimpleFin form to use styled_form_with and standard form patterns
- Replace custom button styling with design system button components
- Fix info boxes and containers to use bg-surface and border-primary
- Replace hardcoded green/blue colors with text-primary, text-secondary, text-link
- Remove custom text area styling to allow form builder defaults (dark mode support)

All SimpleFin components now properly adapt to both light and dark themes
with correct contrast and visibility.
This commit is contained in:
Sholom Ber
2025-08-07 13:44:24 -04:00
parent dbcbf89f4b
commit 332f5b0018
5 changed files with 42 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/views/accounts/new/_method_selector.html.erb
View File

@@ -12,7 +12,7 @@
<% if show_us_link %>
<%# Default US-only Link %>
<%= link_to new_plaid_item_path(region: "us", accountable_type: accountable_type),
class: "text-primary flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-gray-50 border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-gray-50 rounded-lg p-2",
class: "text-primary flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-surface border border-transparent focus:border focus:border-primary px-2 hover:bg-surface rounded-lg p-2",
data: { turbo_frame: "modal" } do %>
<span class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-alpha-black-50 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]">
<%= icon("link-2") %>
@@ -24,7 +24,7 @@
<%# EU Link %>
<% if show_eu_link %>
<%= link_to new_plaid_item_path(region: "eu", accountable_type: accountable_type),
class: "text-primary flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-gray-50 border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-gray-50 rounded-lg p-2",
class: "text-primary flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-surface border border-transparent focus:border focus:border-primary px-2 hover:bg-surface rounded-lg p-2",
data: { turbo_frame: "modal" } do %>
<span class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-alpha-black-50 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]">
<%= icon("link-2") %>
@@ -35,10 +35,10 @@
<%# SimpleFin Link %>
<%= link_to new_simplefin_item_path,
class: "text-primary flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-gray-50 border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-gray-50 rounded-lg p-2",
class: "text-primary flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-surface border border-transparent focus:border focus:border-primary px-2 hover:bg-surface rounded-lg p-2",
data: { turbo_frame: "modal" } do %>
<span class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-green-100 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]">
<%= icon("building-2", class: "text-green-600") %>
<span class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-alpha-black-50 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]">
<%= icon("building-2") %>
</span>
Connect with SimpleFin
<% end %>

4
app/views/simplefin_items/_simplefin_item.html.erb
View File

@@ -6,12 +6,12 @@
<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-green-600/10 rounded-full">
<div class="flex items-center justify-center h-8 w-8 bg-alpha-black-50 rounded-full">
<% if simplefin_item.logo.attached? %>
<%= image_tag simplefin_item.logo, class: "rounded-full h-full w-full", loading: "lazy" %>
<% else %>
<div class="flex items-center justify-center">
<%= tag.p simplefin_item.name.first.upcase, class: "text-green-600 text-xs font-medium" %>
<%= tag.p simplefin_item.name.first.upcase, class: "text-primary text-xs font-medium" %>
</div>
<% end %>
</div>

4
app/views/simplefin_items/index.html.erb
View File

@@ -23,8 +23,8 @@
</div>
<% else %>
<div class="text-center py-12">
<div class="mx-auto w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
<%= icon "building-2", size: "lg", class: "text-green-600" %>
<div class="mx-auto w-16 h-16 bg-alpha-black-50 rounded-full flex items-center justify-center mb-4">
<%= icon "building-2", size: "lg" %>
</div>
<h3 class="text-lg font-medium text-primary mb-2">No SimpleFin connections</h3>
<p class="text-secondary mb-6">Connect your bank accounts through SimpleFin to automatically sync transactions.</p>

56
app/views/simplefin_items/new.html.erb
View File

@@ -1,44 +1,38 @@
<% content_for :title, "Add SimpleFin Connection" %>
<%= render DS::Dialog.new do |dialog| %>
<% dialog.with_header(title: "Add SimpleFin Connection") do %>
<div class="flex items-center gap-2">
<%= icon "building-2", class: "text-green-600" %>
<span>Connect your bank account through SimpleFin</span>
</div>
<% end %>
<% dialog.with_header(title: "Add SimpleFin Connection") %>
<% dialog.with_body do %>
<% if @error_message.present? %>
<%= render DS::Alert.new(message: @error_message, variant: :error) %>
<% end %>
<%= form_with(model: @simplefin_item, local: true, data: { turbo: false }, class: "space-y-6") do |form| %>
<div class="space-y-4">
<div>
<%= form.label :setup_token, "SimpleFin Setup Token", class: "block text-sm font-medium text-primary mb-2" %>
<%= form.text_area :setup_token,
placeholder: "Paste your SimpleFin setup token here...",
rows: 4,
class: "w-full px-3 py-2 border border-primary rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm font-mono" %>
<p class="text-xs text-secondary mt-1">
Get your setup token from
<%= link_to "SimpleFin Bridge", "https://bridge.simplefin.org/simplefin/create",
target: "_blank",
class: "text-blue-600 hover:text-blue-800 underline" %>
</p>
</div>
<%= styled_form_with model: @simplefin_item, local: true, data: { turbo: false }, class: "flex flex-col gap-4 justify-between grow text-primary" do |form| %>
<div class="grow space-y-2">
<%= form.text_area :setup_token,
label: "SimpleFin Setup Token",
placeholder: "Paste your SimpleFin setup token here...",
rows: 4,
required: true %>
<p class="text-xs text-secondary">
Get your setup token from
<%= link_to "SimpleFin Bridge", "https://bridge.simplefin.org/simplefin/create",
target: "_blank",
class: "text-link underline" %>
</p>
<div class="bg-blue-50 p-4 rounded-lg">
<div class="bg-surface border border-primary p-4 rounded-lg">
<div class="flex items-start gap-3">
<%= icon "info", size: "sm", class: "text-blue-600 mt-0.5 flex-shrink-0" %>
<%= icon "info", size: "sm", class: "text-primary mt-0.5 flex-shrink-0" %>
<div>
<h3 class="text-sm font-medium text-blue-900 mb-1">How to get your setup token:</h3>
<ol class="text-xs text-blue-800 space-y-1 list-decimal list-inside">
<li>Visit <%= link_to "SimpleFin Bridge", "https://bridge.simplefin.org/simplefin/create", target: "_blank", class: "underline" %></li>
<h3 class="text-sm font-medium text-primary mb-1">How to get your setup token:</h3>
<ol class="text-xs text-secondary space-y-1 list-decimal list-inside">
<li>Visit <%= link_to "SimpleFin Bridge", "https://bridge.simplefin.org/simplefin/create", target: "_blank", class: "text-link underline" %></li>
<li>Connect your bank account using your online banking credentials</li>
<li>Copy the SimpleFin setup token that appears (it will be a long Base64-encoded string)</li>
<li>Paste it above and click "Add Connection"</li>
</ol>
<p class="text-xs text-blue-700 mt-2">
<p class="text-xs text-secondary mt-2">
<strong>Note:</strong> Setup tokens can only be used once. If the connection fails, you'll need to create a new token.
</p>
</div>
@@ -46,13 +40,7 @@
</div>
</div>
<div class="flex gap-3">
<%= form.submit "Add Connection",
class: "flex-1 bg-blue-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" %>
<%= link_to "Cancel",
simplefin_items_path,
class: "px-4 py-2 text-secondary hover:text-primary" %>
</div>
<%= form.submit "Add Connection" %>
<% end %>
<% end %>
<% end %>

22
app/views/simplefin_items/setup_accounts.html.erb
View File

@@ -3,7 +3,7 @@
<%= render DS::Dialog.new do |dialog| %>
<% dialog.with_header(title: "Set Up Your SimpleFin Accounts") do %>
<div class="flex items-center gap-2">
<%= icon "building-2", class: "text-green-600" %>
<%= icon "building-2", class: "text-primary" %>
<span>Choose the correct account types for your imported accounts</span>
</div>
<% end %>
@@ -16,14 +16,14 @@
class: "space-y-6" do |form| %>
<div class="space-y-4">
<div class="bg-blue-50 p-4 rounded-lg">
<div class="bg-surface border border-primary p-4 rounded-lg">
<div class="flex items-start gap-3">
<%= icon "info", size: "sm", class: "text-blue-600 mt-0.5 flex-shrink-0" %>
<%= icon "info", size: "sm", class: "text-primary mt-0.5 flex-shrink-0" %>
<div>
<p class="text-sm text-blue-900 mb-2">
<p class="text-sm text-primary mb-2">
<strong>Choose the correct account type for each SimpleFin account:</strong>
</p>
<ul class="text-xs text-blue-800 space-y-1 list-disc list-inside">
<ul class="text-xs text-secondary space-y-1 list-disc list-inside">
<li><strong>Checking or Savings</strong> - Regular bank accounts</li>
<li><strong>Credit Card</strong> - Credit card accounts</li>
<li><strong>Investment</strong> - Brokerage, 401(k), IRA accounts</li>
@@ -52,7 +52,7 @@
<%= select_tag "account_types[#{simplefin_account.id}]",
options_for_select(@account_type_options,
Account.map_simplefin_type_to_accountable_type(simplefin_account.account_type, account_name: simplefin_account.name)),
{ class: "w-full px-3 py-2 border border-primary rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
{ class: "w-full px-3 py-2 border border-primary rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-blue-600",
data: {
action: "change->account-type-selector#updateSubtype"
} } %>
@@ -67,7 +67,7 @@
options_for_select([["Select subtype", ""]] + @depository_subtypes,
simplefin_account.name.downcase.include?("checking") ? "checking" :
simplefin_account.name.downcase.include?("savings") ? "savings" : ""),
{ class: "w-full px-3 py-2 border border-primary rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" } %>
{ class: "w-full px-3 py-2 border border-primary rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-blue-600" } %>
</div>
<div class="subtype-select" data-type="CreditCard" style="display: none;">
@@ -75,7 +75,7 @@
class: "block text-sm font-medium text-primary mb-2" %>
<%= select_tag "account_subtypes[#{simplefin_account.id}]",
options_for_select([["Select type", ""]] + @credit_card_subtypes),
{ class: "w-full px-3 py-2 border border-primary rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" } %>
{ class: "w-full px-3 py-2 border border-primary rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-blue-600" } %>
</div>
<div class="subtype-select" data-type="Investment" style="display: none;">
@@ -83,7 +83,7 @@
class: "block text-sm font-medium text-primary mb-2" %>
<%= select_tag "account_subtypes[#{simplefin_account.id}]",
options_for_select([["Select type", ""]] + @investment_subtypes),
{ class: "w-full px-3 py-2 border border-primary rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" } %>
{ class: "w-full px-3 py-2 border border-primary rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-blue-600" } %>
</div>
<div class="subtype-select" data-type="Loan" style="display: none;">
@@ -91,7 +91,7 @@
class: "block text-sm font-medium text-primary mb-2" %>
<%= select_tag "account_subtypes[#{simplefin_account.id}]",
options_for_select([["Select type", ""]] + @loan_subtypes),
{ class: "w-full px-3 py-2 border border-primary rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" } %>
{ class: "w-full px-3 py-2 border border-primary rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-blue-600" } %>
</div>
<!-- OtherAsset doesn't need subtype selection -->
@@ -106,7 +106,7 @@
<div class="flex gap-3">
<%= form.submit "Create Accounts",
class: "flex-1 bg-blue-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" %>
class: "flex-1 bg-blue-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-700 focus:ring-2 focus:ring-blue-600 focus:ring-offset-2" %>
<%= link_to "Cancel",
simplefin_items_path,
class: "px-4 py-2 text-secondary hover:text-primary" %>