1
0
Fork 0
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:
Zach Gollwitzer 2025-02-13 11:31:07 -05:00 committed by GitHub
parent c0e290a07e
commit 849c58dd3e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
193 changed files with 1356 additions and 1073 deletions

View file

@ -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>