mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-08-05 05:25:24 +02:00
Maybe Design System Updates (#1856)
* Add geist font * Design system css file * Add cursor ui/ux rules * Add shadows and shadow borders * Replace primitives with tokens for common text and backgrounds * Organize css * Update switch and checkbox class names * Add back global color variables
This commit is contained in:
parent
c0e290a07e
commit
849c58dd3e
193 changed files with 1356 additions and 1073 deletions
|
@ -4,7 +4,7 @@
|
|||
<details open class="group bg-white p-4 border border-alpha-black-25 shadow-xs rounded-xl">
|
||||
<summary class="flex items-center justify-between gap-2 focus-visible:outline-hidden">
|
||||
<div class="flex items-center gap-2">
|
||||
<%= lucide_icon "chevron-right", class: "group-open:transform group-open:rotate-90 text-gray-500 w-5" %>
|
||||
<%= lucide_icon "chevron-right", class: "group-open:transform group-open:rotate-90 text-secondary w-5" %>
|
||||
|
||||
<div class="flex items-center justify-center h-8 w-8 bg-blue-600/10 rounded-full bg-black/5">
|
||||
<% if plaid_item.logo.attached? %>
|
||||
|
@ -18,13 +18,13 @@
|
|||
|
||||
<div class="pl-1 text-sm">
|
||||
<div class="flex items-center gap-2">
|
||||
<%= tag.p plaid_item.name, class: "font-medium text-gray-900" %>
|
||||
<%= tag.p plaid_item.name, class: "font-medium text-primary" %>
|
||||
<% if plaid_item.scheduled_for_deletion? %>
|
||||
<p class="text-red-500 text-sm animate-pulse">(deletion in progress...)</p>
|
||||
<% end %>
|
||||
</div>
|
||||
<% if plaid_item.syncing? %>
|
||||
<div class="text-gray-500 flex items-center gap-1">
|
||||
<div class="text-secondary flex items-center gap-1">
|
||||
<%= lucide_icon "loader", class: "w-4 h-4 animate-pulse" %>
|
||||
<%= tag.span t(".syncing") %>
|
||||
</div>
|
||||
|
@ -34,12 +34,12 @@
|
|||
<%= tag.span t(".requires_update") %>
|
||||
</div>
|
||||
<% elsif plaid_item.sync_error.present? %>
|
||||
<div class="text-gray-500 flex items-center gap-1">
|
||||
<div class="text-secondary flex items-center gap-1">
|
||||
<%= lucide_icon "alert-circle", class: "w-4 h-4 text-red-500" %>
|
||||
<%= tag.span t(".error"), class: "text-red-500" %>
|
||||
</div>
|
||||
<% else %>
|
||||
<p class="text-gray-500">
|
||||
<p class="text-secondary">
|
||||
<%= plaid_item.last_synced_at ? t(".status", timestamp: time_ago_in_words(plaid_item.last_synced_at)) : t(".status_never") %>
|
||||
</p>
|
||||
<% end %>
|
||||
|
@ -62,13 +62,13 @@
|
|||
<%= lucide_icon "refresh-cw", class: "w-4 h-4" %>
|
||||
<%= tag.span t(".update") %>
|
||||
</button>
|
||||
<% rescue PlaidItem::PlaidConnectionLostError %>
|
||||
<% rescue PlaidItem::PlaidConnectionLostError %>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="text-amber-500 flex items-center gap-1">
|
||||
<%= lucide_icon "alert-triangle", class: "w-4 h-4" %>
|
||||
<%= tag.span t(".connection_lost") %>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500"><%= t(".connection_lost_description") %></p>
|
||||
<p class="text-sm text-secondary"><%= t(".connection_lost_description") %></p>
|
||||
<div class="flex items-center gap-2">
|
||||
<%= button_to plaid_item_path(plaid_item),
|
||||
method: :delete,
|
||||
|
@ -91,13 +91,13 @@
|
|||
</div>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<%= button_to sync_plaid_item_path(plaid_item), disabled: plaid_item.syncing? || plaid_item.scheduled_for_deletion?, class: "disabled:text-gray-400 text-gray-900 flex hover:text-gray-800 items-center text-sm font-medium hover:underline" do %>
|
||||
<%= button_to sync_plaid_item_path(plaid_item), disabled: plaid_item.syncing? || plaid_item.scheduled_for_deletion?, class: "disabled:text-subdued text-primary flex hover:text-gray-800 items-center text-sm font-medium hover:underline" do %>
|
||||
<%= lucide_icon "refresh-cw", class: "w-4 h-4" %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<%= contextual_menu do %>
|
||||
<div class="w-48 p-1 text-sm leading-6 text-gray-900 bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
|
||||
<div class="w-48 p-1 text-sm leading-6 text-primary bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
|
||||
<%= button_to plaid_item_path(plaid_item),
|
||||
method: :delete,
|
||||
class: "block w-full py-2 px-3 space-x-2 text-red-600 hover:bg-red-50 flex items-center rounded-lg",
|
||||
|
@ -124,8 +124,8 @@
|
|||
<%= render "accounts/index/account_groups", accounts: plaid_item.accounts %>
|
||||
<% else %>
|
||||
<div class="p-4 flex flex-col gap-3 items-center justify-center">
|
||||
<p class="text-gray-900 font-medium text-sm"><%= t(".no_accounts_title") %></p>
|
||||
<p class="text-gray-500 text-sm"><%= t(".no_accounts_description") %></p>
|
||||
<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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue