Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-08-06 22:15:20 +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

16
app/views/import/cleans/show.html.erb
View file

@ -6,12 +6,12 @@
<div class="space-y-4 mx-auto max-w-5xl">
<div class="text-center space-y-2 max-w-[400px] mx-auto mb-4">
<h2 class="text-3xl text-gray-900 font-medium"><%= t(".title") %></h2>
<p class="text-gray-500 text-sm"><%= t(".description") %></p>
<h2 class="text-3xl text-primary font-medium"><%= t(".title") %></h2>
<p class="text-secondary text-sm"><%= t(".description") %></p>
</div>
<% if @import.cleaned? %>
<div class="bg-white border border-alpha-black-100 rounded-lg p-3 flex items-center justify-between">
<div class="bg-white border border-tertiary rounded-lg p-3 flex items-center justify-between">
<div class="flex items-center gap-2">
<%= lucide_icon "check-circle", class: "w-4 h-4 text-green-500" %>
<p class="text-green-500">Your data has been cleaned</p>
@ -20,14 +20,14 @@
<%= link_to "Next step", import_confirm_path(@import), class: "btn btn--primary" %>
</div>
<% else %>
<div class="bg-white border border-alpha-black-100 rounded-lg p-3 flex items-center justify-between">
<div class="bg-white border border-tertiary rounded-lg p-3 flex items-center justify-between">
<div class="flex items-center gap-2">
<%= lucide_icon "alert-triangle", class: "w-4 h-4 text-red-500" %>
<p class="text-red-500 text-sm"><%= t(".errors_notice") %></p>
</div>
<div class="flex justify-center">
<div class="bg-gray-50 rounded-lg inline-flex p-1 space-x-2 text-sm text-gray-900 font-medium">
<div class="bg-gray-50 rounded-lg inline-flex p-1 space-x-2 text-sm text-primary font-medium">
<%= link_to "All rows", import_clean_path(@import, per_page: params[:per_page], view: "all"), class: "p-2 rounded-lg #{params[:view] != 'errors' ? 'bg-white' : ''}" %>
<%= link_to "Error rows", import_clean_path(@import, per_page: params[:per_page], view: "errors"), class: "p-2 rounded-lg #{params[:view] == 'errors' ? 'bg-white' : ''}" %>
</div>
@ -37,13 +37,13 @@
<div class="pb-12">
<div class="bg-gray-25 rounded-xl p-1 mb-6">
<div style="grid-template-columns: repeat(<%= @import.column_keys.count %>, 1fr)" class="grid items-center uppercase text-xs font-medium text-gray-500 py-3">
<div style="grid-template-columns: repeat(<%= @import.column_keys.count %>, 1fr)" class="grid items-center uppercase text-xs font-medium text-secondary py-3">
<% @import.column_keys.each do |key| %>
<div class="px-5"><%= import_col_label(key) %></div>
<% end %>
</div>
<div class="bg-white border border-alpha-black-200 rounded-xl shadow-xs divide-y divide-alpha-black-200">
<div class="bg-white border border-secondary rounded-xl shadow-xs divide-y divide-alpha-black-200">
<% @rows.each do |row| %>
<%= render "import/rows/form", row: row %>
<% end %>
@ -52,7 +52,7 @@
</div>
<div class="fixed bottom-0 left-1/2 -translate-x-1/2 w-full p-12">
<div class="border border-alpha-black-100 rounded-lg p-3 max-w-2xl mx-auto bg-white shadow-xs">
<div class="border border-tertiary rounded-lg p-3 max-w-2xl mx-auto bg-white shadow-xs">
<%= render "application/pagination", pagy: @pagy %>
</div>
</div>

4
app/views/import/configurations/_mint_import.html.erb
View file

@ -1,8 +1,8 @@
<%# locals: (import:) %>
<div class="flex items-center justify-between border border-alpha-black-200 rounded-lg bg-green-500/5 p-5 gap-4">
<div class="flex items-center justify-between border border-secondary rounded-lg bg-green-500/5 p-5 gap-4">
<%= lucide_icon("check-circle", class: "w-5 h-5 shrink-0 text-green-500") %>
<p class="text-sm text-gray-900 italic">We have pre-configured your Mint import for you. Please proceed to the next step.</p>
<p class="text-sm text-primary italic">We have pre-configured your Mint import for you. Please proceed to the next step.</p>
</div>
<%= styled_form_with model: @import, url: import_configuration_path(@import), scope: :import, method: :patch, class: "space-y-2" do |form| %>

4
app/views/import/configurations/show.html.erb
View file

@ -7,8 +7,8 @@
<div>
<div class="space-y-4">
<div class="text-center space-y-2">
<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-lg">

6
app/views/import/confirms/_mappings.html.erb
View file

@ -5,13 +5,13 @@
<% if mapping_class == Import::AccountMapping %>
<% if import.requires_account? %>
<div class="flex items-center justify-between p-4 mb-4 gap-4 text-gray-500 bg-red-100 border border-red-200 rounded-lg w-[650px]">
<div class="flex items-center justify-between p-4 mb-4 gap-4 text-secondary bg-red-100 border border-red-200 rounded-lg w-[650px]">
<%= tag.p t(".no_accounts"), class: "text-sm" %>
<%= link_to t(".create_account"), new_account_path(return_to: import_confirm_path(import)), class: "btn btn--primary whitespace-nowrap", data: { turbo_frame: :modal } %>
</div>
<% elsif import.has_unassigned_account? %>
<div class="flex items-center justify-between p-4 mb-4 gap-4 text-gray-500 bg-yellow-100 border border-yellow-200 rounded-lg w-[650px]">
<div class="flex items-center justify-between p-4 mb-4 gap-4 text-secondary bg-yellow-100 border border-yellow-200 rounded-lg w-[650px]">
<%= tag.p t(".unassigned_account"), class: "text-sm" %>
<%= link_to t(".create_account"), new_account_path(return_to: import_confirm_path(import)), class: "btn btn--primary whitespace-nowrap", data: { turbo_frame: :modal } %>
@ -21,7 +21,7 @@
<div class="space-y-4">
<div class="bg-gray-25 rounded-xl p-1 space-y-1 w-[650px]">
<div class="grid grid-cols-3 gap-2 text-xs font-medium text-gray-500 uppercase px-5 py-3">
<div class="grid grid-cols-3 gap-2 text-xs font-medium text-secondary uppercase px-5 py-3">
<p><%= t(".csv_mapping_label", mapping: mapping_label(mapping_class)) %></p>
<p><%= t(".maybe_mapping_label", mapping: mapping_label(mapping_class)) %></p>
<p class="justify-self-end"><%= t(".rows_label") %></p>

4
app/views/import/confirms/show.html.erb
View file

@ -19,10 +19,10 @@
</div>
<div class="text-center space-y-2">
<h1 class="text-3xl text-gray-900 font-medium">
<h1 class="text-3xl text-primary font-medium">
<%= t(".#{step_mapping_class.name.demodulize.underscore}_title", import_type: @import.type.underscore.humanize) %>
</h1>
<p class="text-gray-500 text-sm">
<p class="text-secondary text-sm">
<%= t(".#{step_mapping_class.name.demodulize.underscore}_description", import_type: @import.type.underscore.humanize) %>
</p>
</div>

8
app/views/import/uploads/show.html.erb
View file

@ -7,13 +7,13 @@
<div class="space-y-12">
<div class="space-y-4 mx-auto max-w-md">
<div class="text-center space-y-2">
<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 data-controller="tabs" data-tabs-active-class="bg-white" data-tabs-default-tab-value="csv-paste-tab">
<div class="flex justify-center mb-4">
<div class="bg-gray-50 rounded-lg inline-flex p-1 space-x-2 text-sm text-gray-900 font-medium">
<div class="bg-gray-50 rounded-lg inline-flex p-1 space-x-2 text-sm text-primary font-medium">
<button type="button" data-id="csv-paste-tab" class="p-2 rounded-lg" data-tabs-target="btn" data-action="click->tabs#select">Copy & Paste</button>
<button type="button" data-id="csv-upload-tab" class="p-2 rounded-lg" data-tabs-target="btn" data-action="click->tabs#select">Upload CSV</button>
</div>
@ -50,7 +50,7 @@
</div>
<div class="bg-alpha-black-25 rounded-xl p-1 mt-5 mx-auto max-w-7xl">
<div class="text-gray-500 p-2 mb-2">
<div class="text-secondary p-2 mb-2">
<div class="flex gap-2 mb-2">
<%= lucide_icon("info", class: "w-5 h-5 shrink-0") %>
<p class="text-sm"><%= t(".instructions_1") %></p>