Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-08-07 14:35:23 +02:00
Code Issues Releases Activity Actions

Maybe Design System Updates (#1856)

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

2
app/views/imports/_empty.html.erb
View file

@ -1,6 +1,6 @@
<div class="flex justify-center items-center py-20">
<div class="text-center flex flex-col items-center max-w-[300px] gap-4">
<p class="text-gray-900 mb-1 font-medium text-sm"><%= t(".message") %></p>
<p class="text-primary mb-1 font-medium text-sm"><%= t(".message") %></p>
<%= link_to new_import_path, class: "btn btn--primary flex items-center gap-2", data: { turbo_frame: "modal" } do %>
<%= lucide_icon("plus", class: "w-5 h-5") %>
<span><%= t(".new") %></span>

4
app/views/imports/_failure.html.erb
View file

@ -7,8 +7,8 @@
</div>
<div class="text-center space-y-2">
<h1 class="font-medium text-gray-900 text-center text-3xl">Import failed</h1>
<p class="text-sm text-gray-500">Please check that your file format, for any errors and that all required fields are filled, then come back and try again.</p>
<h1 class="font-medium text-primary text-center text-3xl">Import failed</h1>
<p class="text-sm text-secondary">Please check that your file format, for any errors and that all required fields are filled, then come back and try again.</p>
</div>
<div>

10
app/views/imports/_import.html.erb
View file

@ -1,12 +1,12 @@
<div id="<%= dom_id import %>" class="flex items-center justify-between mx-4 py-4 border-b last:border-b-0 border-alpha-black-50">
<div class="flex items-center gap-2 mb-1">
<%= link_to import_path(import), class: "text-sm text-gray-900 hover:underline" do %>
<%= link_to import_path(import), class: "text-sm text-primary hover:underline" do %>
<%= t(".label", type: import.type.titleize, datetime: import.updated_at.strftime("%b %-d, %Y at %l:%M %p")) %>
<% end %>
<% if import.pending? %>
<span class="px-1 py text-xs rounded-full bg-gray-500/5 text-gray-500 border border-alpha-black-50">
<span class="px-1 py text-xs rounded-full bg-gray-500/5 text-secondary border border-alpha-black-50">
<%= t(".in_progress") %>
</span>
<% elsif import.importing? %>
@ -33,10 +33,10 @@
</div>
<%= 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">
<%= link_to import_path(import),
class: "block w-full py-2 px-3 space-x-2 text-gray-900 hover:bg-gray-50 flex items-center rounded-lg" do %>
<%= lucide_icon "eye", class: "w-5 h-5 text-gray-500" %>
class: "block w-full py-2 px-3 space-x-2 text-primary hover:bg-gray-50 flex items-center rounded-lg" do %>
<%= lucide_icon "eye", class: "w-5 h-5 text-secondary" %>
<span><%= t(".view") %></span>
<% end %>

6
app/views/imports/_importing.html.erb
View file

@ -3,12 +3,12 @@
<div class="h-full flex flex-col justify-center items-center">
<div class="space-y-6 max-w-sm">
<div class="mx-auto bg-gray-500/5 h-8 w-8 rounded-full flex items-center justify-center">
<%= lucide_icon "loader", class: "animate-pulse w-5 h-5 text-gray-500" %>
<%= lucide_icon "loader", class: "animate-pulse w-5 h-5 text-secondary" %>
</div>
<div class="text-center space-y-2">
<h1 class="font-medium text-gray-900 text-center text-3xl">Import in progress</h1>
<p class="text-sm text-gray-500">Your import is in progress. Check the imports menu for status updates or click 'Check Status' to refresh the page for updates. Feel free to continue using the app.</p>
<h1 class="font-medium text-primary text-center text-3xl">Import in progress</h1>
<p class="text-sm text-secondary">Your import is in progress. Check the imports menu for status updates or click 'Check Status' to refresh the page for updates. Feel free to continue using the app.</p>
</div>
<div class="space-y-2">

4
app/views/imports/_nav.html.erb
View file

@ -14,9 +14,9 @@
<% is_current = request.path == step[:path] %>
<% text_class = if is_current
"text-gray-900"
"text-primary"
else
step[:is_complete] ? "text-green-600" : "text-gray-500"
step[:is_complete] ? "text-green-600" : "text-secondary"
end %>
<% step_class = if is_current
"bg-gray-900 text-white"

6
app/views/imports/_ready.html.erb
View file

@ -1,13 +1,13 @@
<%# locals: (import:) %>
<div class="text-center space-y-2 mb-4 mx-auto max-w-md">
<h1 class="text-3xl text-gray-900 font-medium"><%= t(".title") %></h1>
<p class="text-gray-500 text-sm"><%= t(".description") %></p>
<h1 class="text-3xl text-primary font-medium"><%= t(".title") %></h1>
<p class="text-secondary text-sm"><%= t(".description") %></p>
</div>
<div class="mx-auto max-w-2xl space-y-4">
<div class="bg-gray-25 rounded-xl p-1 space-y-1">
<div class="flex justify-between items-center text-xs font-medium text-gray-500 uppercase px-5 py-3">
<div class="flex justify-between items-center text-xs font-medium text-secondary uppercase px-5 py-3">
<p>item</p>
<p class="justify-self-end">count</p>
</div>

4
app/views/imports/_revert_failure.html.erb
View file

@ -7,8 +7,8 @@
</div>
<div class="text-center space-y-2">
<h1 class="font-medium text-gray-900 text-center text-3xl">Reverting import failed</h1>
<p class="text-sm text-gray-500">Please try again or contact support.</p>
<h1 class="font-medium text-primary text-center text-3xl">Reverting import failed</h1>
<p class="text-sm text-secondary">Please try again or contact support.</p>
</div>
<div>

4
app/views/imports/_success.html.erb
View file

@ -7,8 +7,8 @@
</div>
<div class="text-center space-y-2">
<h1 class="font-medium text-gray-900 text-center text-3xl">Import successful</h1>
<p class="text-sm text-gray-500">Your imported data has been successfully added to the app and is now ready for use.</p>
<h1 class="font-medium text-primary text-center text-3xl">Import successful</h1>
<p class="text-sm text-secondary">Your imported data has been successfully added to the app and is now ready for use.</p>
</div>
<div>

4
app/views/imports/_table.html.erb
View file

@ -1,6 +1,6 @@
<%# locals: (headers: [], rows: [], caption: nil) %>
<div class="overflow-x-auto">
<div class="border border-alpha-black-200 rounded-md shadow-xs text-sm bg-white w-full">
<div class="border border-secondary rounded-md shadow-xs text-sm bg-white w-full">
<div class="grid border-b border-b-alpha-black-200" style="grid-template-columns: repeat(<%= headers.length %>, minmax(0, 1fr))">
<% headers.each_with_index do |header, index| %>
<div class="
@ -29,7 +29,7 @@
<% end %>
<% if caption %>
<div class="px-3 py-2.5 text-center text-xs text-gray-900 rounded-b-md italic bg-gray-25 overflow-x-auto">
<div class="px-3 py-2.5 text-center text-xs text-primary rounded-b-md italic bg-gray-25 overflow-x-auto">
<%= caption %>
</div>
<% end %>

4
app/views/imports/index.html.erb
View file

@ -4,7 +4,7 @@
<div class="space-y-4">
<div class="flex items-center justify-between">
<h1 class="text-xl font-medium text-gray-900"><%= t(".title") %></h1>
<h1 class="text-xl font-medium text-primary"><%= t(".title") %></h1>
<%= link_to new_import_path, class: "btn btn--primary flex items-center gap-2", data: { turbo_frame: :modal } do %>
<%= lucide_icon("plus", class: "w-5 h-5") %>
@ -16,7 +16,7 @@
<%= render partial: "imports/empty" %>
<% else %>
<div class="rounded-xl bg-gray-25 p-1">
<h2 class="uppercase px-4 py-2 text-gray-500 text-xs"><%= t(".imports") %> · <%= @imports.size %></h2>
<h2 class="uppercase px-4 py-2 text-secondary text-xs"><%= t(".imports") %> · <%= @imports.size %></h2>
<div class="border border-alpha-gray-100 rounded-lg bg-white shadow-xs">
<%= render partial: "imports/import", collection: @imports.ordered %>

28
app/views/imports/new.html.erb
View file

@ -2,17 +2,17 @@
<div class="p-4 space-y-4 max-w-[420px]">
<div class="space-y-2">
<div class="flex justify-between items-center">
<h2 class="font-medium text-gray-900"><%= t(".title") %></h2>
<h2 class="font-medium text-primary"><%= t(".title") %></h2>
<button data-action="modal#close" tabindex="-1">
<%= lucide_icon("x", class: "w-5 h-5 text-gray-900") %>
<%= lucide_icon("x", class: "w-5 h-5 text-primary") %>
</button>
</div>
<p class="text-gray-500 text-sm"><%= t(".description") %></p>
<p class="text-secondary text-sm"><%= t(".description") %></p>
</div>
<div class="rounded-xl bg-gray-25 p-1">
<h3 class="uppercase text-gray-500 text-xs font-medium px-3 py-1.5"><%= t(".sources") %></h3>
<h3 class="uppercase text-secondary text-xs font-medium px-3 py-1.5"><%= t(".sources") %></h3>
<ul class="bg-white border border-alpha-black-25 rounded-lg shadow-xs">
<li>
<% if @pending_import.present? && (params[:type].nil? || params[:type] == @pending_import.type) %>
@ -21,11 +21,11 @@
<div class="bg-orange-500/5 rounded-md w-8 h-8 flex items-center justify-center">
<%= lucide_icon("loader", class: "w-5 h-5 text-orange-500") %>
</div>
<span class="text-sm text-gray-900 group-hover:text-gray-700">
<span class="text-sm text-primary group-hover:text-gray-700">
<%= t(".resume", type: @pending_import.type.titleize) %>
</span>
</div>
<%= lucide_icon("chevron-right", class: "w-5 h-5 text-gray-500") %>
<%= lucide_icon("chevron-right", class: "w-5 h-5 text-secondary") %>
<% end %>
<div class="pl-14 pr-3">
@ -41,11 +41,11 @@
<div class="bg-indigo-500/5 rounded-md w-8 h-8 flex items-center justify-center">
<%= lucide_icon("file-spreadsheet", class: "w-5 h-5 text-indigo-500") %>
</div>
<span class="text-sm text-gray-900 group-hover:text-gray-700">
<span class="text-sm text-primary group-hover:text-gray-700">
<%= t(".import_transactions") %>
</span>
</div>
<%= lucide_icon("chevron-right", class: "w-5 h-5 text-gray-500") %>
<%= lucide_icon("chevron-right", class: "w-5 h-5 text-secondary") %>
<% end %>
<div class="pl-14 pr-3">
@ -61,11 +61,11 @@
<div class="bg-yellow-500/5 rounded-md w-8 h-8 flex items-center justify-center">
<%= lucide_icon("square-percent", class: "w-5 h-5 text-yellow-500") %>
</div>
<span class="text-sm text-gray-900 group-hover:text-gray-700">
<span class="text-sm text-primary group-hover:text-gray-700">
<%= t(".import_portfolio") %>
</span>
</div>
<%= lucide_icon("chevron-right", class: "w-5 h-5 text-gray-500") %>
<%= lucide_icon("chevron-right", class: "w-5 h-5 text-secondary") %>
<% end %>
<div class="pl-14 pr-3">
@ -81,11 +81,11 @@
<div class="bg-violet-500/5 rounded-md w-8 h-8 flex items-center justify-center">
<%= lucide_icon("building", class: "w-5 h-5 text-violet-500") %>
</div>
<span class="text-sm text-gray-900 group-hover:text-gray-700">
<span class="text-sm text-primary group-hover:text-gray-700">
<%= t(".import_accounts") %>
</span>
</div>
<%= lucide_icon("chevron-right", class: "w-5 h-5 text-gray-500") %>
<%= lucide_icon("chevron-right", class: "w-5 h-5 text-secondary") %>
<% end %>
<div class="pl-14 pr-3">
@ -99,11 +99,11 @@
<%= button_to imports_path(import: { type: "MintImport" }), class: "flex items-center justify-between p-4 group w-full", data: { turbo: false } do %>
<div class="flex items-center gap-2">
<%= image_tag("mint-logo.jpeg", alt: "Mint logo", class: "w-8 h-8 rounded-md") %>
<span class="text-sm text-gray-900">
<span class="text-sm text-primary">
<%= t(".import_mint") %>
</span>
</div>
<%= lucide_icon("chevron-right", class: "w-5 h-5 text-gray-500") %>
<%= lucide_icon("chevron-right", class: "w-5 h-5 text-secondary") %>
<% end %>
<div class="pl-14 pr-3">