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

8
app/views/pages/_account_group_disclosure.erb
View file

@ -1,14 +1,14 @@
<%# locals: (accountable_group:) %>
<% text_class = accountable_text_class(accountable_group.name) %>
<details class="open:bg-gray-25 group">
<summary class="flex p-4 items-center w-full rounded-lg font-medium hover:bg-gray-50 text-gray-500 text-sm font-medium cursor-pointer">
<summary class="flex p-4 items-center w-full rounded-lg font-medium hover:bg-gray-50 text-secondary text-sm font-medium cursor-pointer">
<%= lucide_icon("chevron-down", class: "hidden group-open:block w-5 h-5") %>
<%= lucide_icon("chevron-right", class: "group-open:hidden w-5 h-5") %>
<div class="ml-4 h-2.5 w-2.5 rounded-full <%= accountable_bg_class(accountable_group.name) %>"></div>
<p class="text-gray-900 ml-2"><%= to_accountable_title(Accountable.from_type(accountable_group.name)) %></p>
<p class="text-primary ml-2"><%= to_accountable_title(Accountable.from_type(accountable_group.name)) %></p>
<span class="mx-1">&middot;</span>
<div><%= accountable_group.children.count %></div>
<div class="ml-auto text-right flex items-center gap-10 text-sm font-medium text-gray-900">
<div class="ml-auto text-right flex items-center gap-10 text-sm font-medium text-primary">
<div class="flex items-center justify-end gap-2 w-24">
<%= render partial: "shared/progress_circle", locals: { progress: accountable_group.percent_of_total, text_class: text_class } %>
<p><%= accountable_group.percent_of_total.round(1) %>%</p>
@ -23,7 +23,7 @@
</summary>
<div class="px-4 py-3 space-y-4">
<% accountable_group.children.map do |account_value_node| %>
<div class="flex items-center justify-between text-sm font-medium text-gray-900">
<div class="flex items-center justify-between text-sm font-medium text-primary">
<div class="flex items-center gap-4 overflow-hidden">
<%= render "accounts/logo", account: account_value_node.original, size: "sm" %>
<div class="truncate">

2
app/views/pages/_account_percentages_bar.html.erb
View file

@ -9,7 +9,7 @@
<% account_groups.sort_by(&:percent_of_total).reverse.each do |group| %>
<div class="flex items-center gap-2 text-sm">
<div class="h-2.5 w-2.5 rounded-full <%= accountable_bg_class(group.name) %>"></div>
<p class="text-gray-500"><%= to_accountable_title(Accountable.from_type(group.name)) %></p>
<p class="text-secondary"><%= to_accountable_title(Accountable.from_type(group.name)) %></p>
<p class="text-black"><%= group.percent_of_total.round(1) %>%</p>
</div>
<% end %>

2
app/views/pages/_account_percentages_table.html.erb
View file

@ -1,6 +1,6 @@
<%# locals: (account_groups:) %>
<div class="bg-gray-25 p-1 rounded-xl">
<div class="px-4 py-2 flex items-center uppercase text-xs font-medium text-gray-500">
<div class="px-4 py-2 flex items-center uppercase text-xs font-medium text-secondary">
<div>Name</div>
<div class="ml-auto text-right flex items-center gap-10">
<div class="w-24">

10
app/views/pages/changelog.html.erb
View file

@ -3,7 +3,7 @@
<% end %>
<div class="space-y-4 flex flex-col h-full">
<h1 class="text-gray-900 text-xl font-medium mb-4"><%= t(".title") %></h1>
<h1 class="text-primary text-xl font-medium mb-4"><%= t(".title") %></h1>
<div class="bg-white shadow-xs border border-alpha-black-25 rounded-xl p-4 grow overflow-y-auto">
<div class="flex justify-between gap-4 mb-12 last:mb-0">
<div class="w-1/3">
@ -12,13 +12,13 @@
<%= image_tag @release_notes[:avatar], class: "rounded-full w-full h-full object-cover" %>
</div>
<div>
<a class="text-gray-900 font-medium text-sm" href="https://github.com/<%= @release_notes[:username] %>"><%= "@#{@release_notes[:username]}" %></a>
<div class="text-gray-500 text-sm"><%= @release_notes[:published_at].strftime("%B %d, %Y") %></div>
<a class="text-primary font-medium text-sm" href="https://github.com/<%= @release_notes[:username] %>"><%= "@#{@release_notes[:username]}" %></a>
<div class="text-secondary text-sm"><%= @release_notes[:published_at].strftime("%B %d, %Y") %></div>
</div>
</div>
</div>
<div class="w-2/3 text-gray-500 text-sm prose prose--github-release-notes">
<h2 class="mb-5 text-xl text-gray-900"><%= @release_notes[:name] %></h2>
<div class="w-2/3 text-secondary text-sm prose prose--github-release-notes">
<h2 class="mb-5 text-xl text-primary"><%= @release_notes[:name] %></h2>
<%= @release_notes[:body].html_safe %>
</div>
</div>

24
app/views/pages/dashboard.html.erb
View file

@ -13,17 +13,17 @@
<header class="flex items-center justify-between">
<div>
<h1 class="sr-only"><%= t(".title") %></h1>
<p class="text-xl font-medium text-gray-900 mb-1">
<p class="text-xl font-medium text-primary mb-1">
<%= Current.user.first_name.present? ? t(".greeting", name: Current.user.first_name ) : t(".fallback_greeting") %>
</p>
<% unless @accounts.blank? %>
<p class="text-gray-500 text-sm"><%= t(".subtitle") %></p>
<p class="text-secondary text-sm"><%= t(".subtitle") %></p>
<% end %>
</div>
<div class="flex items-center gap-2">
<%= 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">
<%= contextual_menu_modal_action_item t(".import"), new_import_path, icon: "hard-drive-upload" %>
</div>
<% end %>
@ -81,14 +81,14 @@
</div>
<div class="flex gap-1.5 mt-auto">
<% @top_earners.first(3).each do |account| %>
<%= link_to account, class: "border border-alpha-black-25 rounded-full p-1 pr-2 flex items-center gap-1 text-xs text-gray-900 font-medium hover:bg-gray-25", data: { controller: "tooltip" } do %>
<%= link_to account, class: "border border-alpha-black-25 rounded-full p-1 pr-2 flex items-center gap-1 text-xs text-primary font-medium hover:bg-gray-25", data: { controller: "tooltip" } do %>
<%= render "accounts/logo", account: account, size: "sm" %>
<span>+<%= Money.new(account.income, account.currency) %></span>
<%= render partial: "shared/text_tooltip", locals: { tooltip_text: account.name } %>
<% end %>
<% end %>
<% if @top_earners.count > 3 %>
<div class="bg-gray-25 rounded-full flex h-full aspect-1 items-center justify-center text-xs font-medium text-gray-500">+<%= @top_earners.count - 3 %></div>
<div class="bg-gray-25 rounded-full flex h-full aspect-1 items-center justify-center text-xs font-medium text-secondary">+<%= @top_earners.count - 3 %></div>
<% end %>
</div>
</div>
@ -114,14 +114,14 @@
</div>
<div class="mt-auto flex gap-1.5">
<% @top_spenders.first(3).each do |account| %>
<%= link_to account, class: "border border-alpha-black-25 rounded-full p-1 pr-2 flex items-center gap-1 text-xs text-gray-900 font-medium hover:bg-gray-25", data: { controller: "tooltip" } do %>
<%= link_to account, class: "border border-alpha-black-25 rounded-full p-1 pr-2 flex items-center gap-1 text-xs text-primary font-medium hover:bg-gray-25", data: { controller: "tooltip" } do %>
<%= render "accounts/logo", account: account, size: "sm" %>
-<%= Money.new(account.spending, account.currency) %>
<%= render partial: "shared/text_tooltip", locals: { tooltip_text: account.name } %>
<% end %>
<% end %>
<% if @top_spenders.count > 3 %>
<div class="bg-gray-25 rounded-full flex h-full aspect-1 items-center justify-center text-xs font-medium text-gray-500">+<%= @top_spenders.count - 3 %></div>
<div class="bg-gray-25 rounded-full flex h-full aspect-1 items-center justify-center text-xs font-medium text-secondary">+<%= @top_spenders.count - 3 %></div>
<% end %>
</div>
</div>
@ -149,7 +149,7 @@
<div class="flex gap-1.5">
<% @top_savers.first(3).each do |account| %>
<% unless account.savings_rate.infinite? %>
<%= link_to account, class: "border border-alpha-black-25 rounded-full p-1 pr-2 flex items-center gap-1 text-xs text-gray-900 font-medium hover:bg-gray-25", data: { controller: "tooltip" } do %>
<%= link_to account, class: "border border-alpha-black-25 rounded-full p-1 pr-2 flex items-center gap-1 text-xs text-primary font-medium hover:bg-gray-25", data: { controller: "tooltip" } do %>
<%= render "accounts/logo", account: account, size: "sm" %>
<span><%= account.savings_rate > 0 ? "+" : "-" %><%= number_to_percentage(account.savings_rate.abs * 100, precision: 2) %></span>
<%= render partial: "shared/text_tooltip", locals: { tooltip_text: account.name } %>
@ -157,7 +157,7 @@
<% end %>
<% end %>
<% if @top_savers.count > 3 %>
<div class="bg-gray-25 rounded-full flex h-full aspect-1 items-center justify-center text-xs font-medium text-gray-500">+<%= @top_savers.count - 3 %></div>
<div class="bg-gray-25 rounded-full flex h-full aspect-1 items-center justify-center text-xs font-medium text-secondary">+<%= @top_savers.count - 3 %></div>
<% end %>
</div>
</div>
@ -183,13 +183,13 @@
</section>
<section class="w-full">
<div class="bg-white p-4 border border-alpha-black-25 shadow-xs rounded-xl space-y-4">
<h2 class="text-lg font-medium text-gray-900"><%= t(".transactions") %></h2>
<h2 class="text-lg font-medium text-primary"><%= t(".transactions") %></h2>
<% if @transaction_entries.empty? %>
<div class="text-gray-500 flex items-center justify-center py-12">
<div class="text-secondary flex items-center justify-center py-12">
<p><%= t(".no_transactions") %></p>
</div>
<% else %>
<div class="text-gray-500 p-1 space-y-1 bg-gray-25 rounded-xl">
<div class="text-secondary p-1 space-y-1 bg-gray-25 rounded-xl">
<%= entries_by_date(@transaction_entries, selectable: false) do |entries, _transfers| %>
<%= render entries, selectable: false %>
<% end %>

8
app/views/pages/dashboard/_allocation_chart.html.erb
View file

@ -1,12 +1,12 @@
<%# locals: (account_groups:) -%>
<div data-controller="tabs" data-tabs-active-class="bg-white border-alpha-black-25 shadow-xs text-gray-900" data-tabs-default-tab-value="asset-tab">
<div class="bg-gray-25 rounded-lg p-1 flex gap-1 text-sm text-gray-500 font-medium">
<div data-controller="tabs" data-tabs-active-class="bg-white border-alpha-black-25 shadow-xs text-primary" data-tabs-default-tab-value="asset-tab">
<div class="bg-gray-25 rounded-lg p-1 flex gap-1 text-sm text-secondary font-medium">
<button data-id="asset-tab" class="w-1/2 px-2 py-1 rounded-md border border-transparent" data-tabs-target="btn" data-action="tabs#select"><%= t(".assets") %></button>
<button data-id="liability-tab" class="w-1/2 px-2 py-1 rounded-md border border-transparent" data-tabs-target="btn" data-action="tabs#select"><%= t(".debts") %></button>
</div>
<div>
<div data-tabs-target="tab" id="asset-tab" class="space-y-6">
<div class="text-gray-500 flex items-center justify-center py-6">
<div class="text-secondary flex items-center justify-center py-6">
<div
data-controller="pie-chart"
class="w-full aspect-1"
@ -16,7 +16,7 @@
</div>
</div>
<div data-tabs-target="tab" id="liability-tab" class="space-y-6 hidden">
<div class="text-gray-500 flex items-center justify-center py-6">
<div class="text-secondary flex items-center justify-center py-6">
<div
data-controller="pie-chart"
class="w-full aspect-1"

4
app/views/pages/dashboard/_net_worth_chart.html.erb
View file

@ -7,10 +7,10 @@
data-time-series-chart-data-value="<%= series.to_json %>"></div>
<% elsif series.empty? %>
<div class="w-full h-full flex items-center justify-center">
<p class="text-gray-500 text-sm">No data available for the selected period.</p>
<p class="text-secondary text-sm">No data available for the selected period.</p>
</div>
<% else %>
<div class="w-full h-full flex items-center justify-center">
<p class="text-gray-500 text-sm animate-pulse">Calculating latest balance data...</p>
<p class="text-secondary text-sm animate-pulse">Calculating latest balance data...</p>
</div>
<% end %>

12
app/views/pages/early_access.html.erb
View file

@ -28,27 +28,27 @@
<%= image_tag "logo-squircle.svg", alt: "Maybe Logo", class: "w-16 h-16 sm:w-18 sm:h-18 mx-auto mb-6 sm:mb-8" %>
<h1 class="text-2xl font-normal my-4">Maybe Early Access</h1>
<% if @invite_codes_count > 0 %>
<p class="text-base text-gray-400">There <%= @invite_codes_count == 1 ? "is" : "are" %> <span class="text-white"><%= @invite_codes_count %> invite <%= "code".pluralize(@invite_codes_count) %></span> remaining.</p>
<p class="text-base text-subdued">There <%= @invite_codes_count == 1 ? "is" : "are" %> <span class="text-white"><%= @invite_codes_count %> invite <%= "code".pluralize(@invite_codes_count) %></span> remaining.</p>
<div class="bg-gray-900 border border-gray-800 p-2 rounded-xl my-4">
<p class="text-sm text-gray-400 mt-1 mb-3 sm:mb-4">Your invite code is <span class="font-mono text-white"><%= @invite_code.token %></span></p>
<p class="text-sm text-subdued mt-1 mb-3 sm:mb-4">Your invite code is <span class="font-mono text-white"><%= @invite_code.token %></span></p>
<p><%= link_to "Sign up with this code", new_registration_path(invite: @invite_code.token), class: "block w-full bg-white text-black py-2 px-3 rounded-lg no-underline text-sm sm:text-base hover:bg-gray-200 transition duration-150" %></p>
</div>
<p class="text-sm text-gray-400">You may need to refresh the page to get a new invite code if someone else claimed it before you.</p>
<p class="text-sm text-subdued">You may need to refresh the page to get a new invite code if someone else claimed it before you.</p>
<p class="mt-4 sm:mt-6">
<%= link_to early_access_path, class: "w-full block text-center justify-center inline-flex items-center text-white hover:bg-gray-800 p-2 rounded-md text-base transition duration-150", data: { turbo_method: :get } do %>
<%= lucide_icon "refresh-cw", class: "w-4 h-4 sm:w-5 sm:h-5 mr-2 text-gray-400" %>
<%= lucide_icon "refresh-cw", class: "w-4 h-4 sm:w-5 sm:h-5 mr-2 text-subdued" %>
<span>Refresh page</span>
<% end %>
</p>
<% else %>
<p class="text-base text-gray-400 mb-6 sm:mb-8">Sorry, there are <span class="text-white">no invite codes</span> remaining. Join our <%= link_to "Discord server", "https://link.maybe.co/discord", target: "_blank", class: "text-white hover:text-gray-300" %> to get notified when new invite codes are available.</p>
<p class="text-base text-subdued mb-6 sm:mb-8">Sorry, there are <span class="text-white">no invite codes</span> remaining. Join our <%= link_to "Discord server", "https://link.maybe.co/discord", target: "_blank", class: "text-white hover:text-gray-300" %> to get notified when new invite codes are available.</p>
<p><%= link_to "Join Discord server", "https://link.maybe.co/discord", target: "_blank", class: "bg-white text-black px-3 py-2 rounded-md no-underline text-base hover:bg-gray-200 transition duration-150" %></p>
<% end %>
</div>
</div>
<footer class="pb-6 sm:pb-10 text-center text-gray-400 text-sm">
<footer class="pb-6 sm:pb-10 text-center text-subdued text-sm">
©2024 Maybe Finance, Inc.
</footer>
</body>

14
app/views/pages/feedback.html.erb
View file

@ -3,30 +3,30 @@
<% end %>
<div class="space-y-4">
<h1 class="text-gray-900 text-xl font-medium mb-4">Feedback</h1>
<h1 class="text-primary text-xl font-medium mb-4">Feedback</h1>
<div class="bg-white shadow-xs border border-alpha-black-25 rounded-xl p-4">
<h2 class="text-lg font-medium text-gray-900 mb-1">Leave feedback</h2>
<p class="text-sm text-gray-500 mb-4">Let us know if you have any specific feedback. Feel free to include links to videos or screenshots.</p>
<h2 class="text-lg font-medium text-primary mb-1">Leave feedback</h2>
<p class="text-sm text-secondary mb-4">Let us know if you have any specific feedback. Feel free to include links to videos or screenshots.</p>
<div class="flex gap-2">
<%= link_to "https://github.com/maybe-finance/maybe/discussions/categories/feature-requests", target: "_blank", rel: "noopener noreferrer", class: "w-1/3 flex flex-col items-center p-4 border border-alpha-black-25 rounded-xl hover:bg-gray-50" do %>
<%= image_tag "github-icon.svg", class: "w-8 h-8 mb-2" %>
<span class="text-sm font-medium text-gray-900">Write a feature request</span>
<span class="text-sm font-medium text-primary">Write a feature request</span>
<% end %>
<% if self_hosted? %>
<%= link_to "https://github.com/maybe-finance/maybe/issues/new?assignees=&labels=bug&template=bug_report.md&title=", target: "_blank", rel: "noopener noreferrer", class: "w-1/3 flex flex-col items-center p-4 border border-alpha-black-25 rounded-xl hover:bg-gray-50" do %>
<%= image_tag "github-icon.svg", class: "w-8 h-8 mb-2" %>
<span class="text-sm font-medium text-gray-900">File a bug report</span>
<span class="text-sm font-medium text-primary">File a bug report</span>
<% end %>
<% else %>
<%= link_to "mailto:hello@maybefinance.com", class: "w-1/3 flex flex-col items-center p-4 border border-alpha-black-25 rounded-xl hover:bg-gray-50", onclick: "Intercom('showNewMessage'); return false;" do %>
<%= lucide_icon "bug", class: "w-8 h-8 mb-2" %>
<span class="text-sm font-medium text-gray-900">File a bug report</span>
<span class="text-sm font-medium text-primary">File a bug report</span>
<% end %>
<% end %>
<%= link_to "https://link.maybe.co/discord", target: "_blank", rel: "noopener noreferrer", class: "w-1/3 flex flex-col items-center p-4 border border-alpha-black-25 rounded-xl hover:bg-gray-50" do %>
<%= image_tag "discord-icon.svg", class: "w-8 h-8 mb-2" %>
<span class="text-sm font-medium text-gray-900">Discuss Maybe with others</span>
<span class="text-sm font-medium text-primary">Discuss Maybe with others</span>
<% end %>
</div>
</div>