mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-08-07 06:25:19 +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
GitHub
parent
c0e290a07e
commit
849c58dd3e
193 changed files with 1356 additions and 1073 deletions
|
|
@ -1,6 +1,6 @@
|
|||
<div class="flex items-center py-0.5 px-0.5 gap-1 fixed bottom-2 right-2 shadow-xs border border-alpha-black-50 rounded-md bg-white">
|
||||
<p class="text-xs text-gray-500 pl-2">Version: <%= Maybe.version.to_release_tag %></p>
|
||||
<p class="text-xs text-secondary pl-2">Version: <%= Maybe.version.to_release_tag %></p>
|
||||
<%= link_to settings_hosting_path, class: "flex gap-1 items-center hover:bg-gray-50 rounded-md p-2" do %>
|
||||
<%= lucide_icon("settings", class: "w-4 h-4 text-gray-500 shrink-0") %>
|
||||
<%= lucide_icon("settings", class: "w-4 h-4 text-secondary shrink-0") %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@
|
|||
<div class="flex justify-between mb-2 gap-4">
|
||||
<h3 id="turbo-confirm-title" class="font-medium text-md"><%= t(".title") %></h3>
|
||||
<button value="cancel">
|
||||
<%= lucide_icon("x", class: "w-5 h-5 shrink-0 text-gray-500") %>
|
||||
<%= lucide_icon("x", class: "w-5 h-5 shrink-0 text-secondary") %>
|
||||
</button>
|
||||
</div>
|
||||
<div id="turbo-confirm-body" class="text-gray-500 text-sm">
|
||||
<div id="turbo-confirm-body" class="text-secondary text-sm">
|
||||
<%= t(".body_html") %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@
|
|||
|
||||
<details class="group space-y-2" <%= "open" if open %>>
|
||||
<summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium
|
||||
uppercase text-gray-500 bg-gray-25 focus-visible:outline-hidden">
|
||||
uppercase text-secondary bg-gray-25 focus-visible:outline-hidden">
|
||||
<h3><%= title %></h3>
|
||||
<%= lucide_icon "chevron-down",
|
||||
class: "group-open:transform group-open:rotate-180 text-gray-500 w-5 h-5" %>
|
||||
class: "group-open:transform group-open:rotate-180 text-secondary w-5 h-5" %>
|
||||
</summary>
|
||||
|
||||
<%= content %>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<%# locals: (key:, size: "md", color: "current") %>
|
||||
|
||||
<% size_class = case size when "sm" then "w-4 h-4" when "md" then "w-5 h-5" when "lg" then "w-6 h-6" end %>
|
||||
<% color_class = case color when "current" then "text-current" when "gray" then "text-gray-500" end %>
|
||||
<% color_class = case color when "current" then "text-current" when "gray" then "text-secondary" end %>
|
||||
|
||||
<%= lucide_icon key, class: class_names(size_class, color_class, "shrink-0") %>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,6 @@
|
|||
data-time-series-chart-data-value="<%= series.to_json %>"></div>
|
||||
<% else %>
|
||||
<div class="w-full h-full flex items-center justify-center">
|
||||
<p class="text-gray-500">No data available for the selected period.</p>
|
||||
<p class="text-secondary">No data available for the selected period.</p>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<%# locals: (header:, content:) %>
|
||||
<div class="bg-gray-25 rounded-xl p-1 w-full">
|
||||
<div class="py-2 px-4 flex items-center justify-between font-medium text-xs text-gray-500">
|
||||
<div class="py-2 px-4 flex items-center justify-between font-medium text-xs text-secondary">
|
||||
<%= header %>
|
||||
</div>
|
||||
<div class="bg-white shadow-xs rounded-md border border-alpha-black-25 divide-y divide-alpha-black-50">
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@
|
|||
<div class="space-y-2">
|
||||
<header class="flex justify-between items-center">
|
||||
<h2 class="font-medium"><%= title %></h2>
|
||||
<%= lucide_icon("x", class: "cursor-pointer w-5 h-5 text-gray-500", data: { action: "click->modal#close" }) %>
|
||||
<%= lucide_icon("x", class: "cursor-pointer w-5 h-5 text-secondary", data: { action: "click->modal#close" }) %>
|
||||
</header>
|
||||
|
||||
<% if subtitle.present? %>
|
||||
<%= tag.p subtitle, class: "text-gray-500 font-light" %>
|
||||
<%= tag.p subtitle, class: "text-secondary font-light" %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
<div class="flex items-center gap-1">
|
||||
<div class="flex items-center grow gap-1">
|
||||
<span class="text-gray-500 text-sm" data-money-field-target="symbol">
|
||||
<span class="text-secondary text-sm" data-money-field-target="symbol">
|
||||
<%= currency.symbol %>
|
||||
</span>
|
||||
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
currencies_for_select.map(&:iso_code),
|
||||
{ inline: true, selected: currency_value },
|
||||
{
|
||||
class: "w-fit pr-5 disabled:text-gray-400 form-field__input",
|
||||
class: "w-fit pr-5 disabled:text-subdued form-field__input",
|
||||
disabled: options[:disable_currency],
|
||||
data: {
|
||||
"money-field-target": "currency",
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<div class="flex justify-center items-center h-[800px]">
|
||||
<div class="text-center flex flex-col gap-4 items-center max-w-[300px]">
|
||||
<%= lucide_icon "layers", class: "w-6 h-6 text-gray-500" %>
|
||||
<%= lucide_icon "layers", class: "w-6 h-6 text-secondary" %>
|
||||
|
||||
<div class="space-y-1 text-sm">
|
||||
<p class="text-gray-900 font-medium"><%= t(".no_account_title") %></p>
|
||||
<p class="text-gray-500"><%= t(".no_account_subtitle") %></p>
|
||||
<p class="text-primary font-medium"><%= t(".no_account_title") %></p>
|
||||
<p class="text-secondary"><%= t(".no_account_subtitle") %></p>
|
||||
</div>
|
||||
|
||||
<%= link_to new_account_path, class: "btn btn--primary flex items-center gap-1", data: { turbo_frame: "modal" } do %>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
<% end %>
|
||||
</div>
|
||||
|
||||
<%= tag.p message, class: "text-gray-900 text-sm font-medium" %>
|
||||
<%= tag.p message, class: "text-primary text-sm font-medium" %>
|
||||
|
||||
<div class="ml-auto">
|
||||
<% if type.to_sym == :notice %>
|
||||
|
|
@ -32,11 +32,11 @@
|
|||
<circle class="origin-center -rotate-90 animate-[stroke-fill_2.2s_300ms_forwards]" stroke="#141414" stroke-opacity="0.4" r="7.2" cx="10" cy="10" stroke-dasharray="43.9822971503" stroke-dashoffset="43.9822971503" />
|
||||
</svg>
|
||||
<div class="absolute -top-2 -right-2">
|
||||
<%= lucide_icon "x", class: "w-5 h-5 p-0.5 hidden group-hover:inline-block border border-alpha-black-50 border-solid rounded-lg bg-white text-gray-400 cursor-pointer", data: { action: "click->element-removal#remove" } %>
|
||||
<%= lucide_icon "x", class: "w-5 h-5 p-0.5 hidden group-hover:inline-block border border-alpha-black-50 border-solid rounded-lg bg-white text-subdued cursor-pointer", data: { action: "click->element-removal#remove" } %>
|
||||
</div>
|
||||
</div>
|
||||
<% elsif type.to_sym == :alert %>
|
||||
<%= lucide_icon "x", data: { action: "click->element-removal#remove" }, class: "w-5 h-5 text-gray-500 hover:text-gray-600 cursor-pointer" %>
|
||||
<%= lucide_icon "x", data: { action: "click->element-removal#remove" }, class: "w-5 h-5 text-secondary hover:text-gray-600 cursor-pointer" %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@
|
|||
<%= image_tag "maybe-plus-logo.png", class: "w-20" %>
|
||||
</div>
|
||||
|
||||
<h2 class="font-medium text-gray-900 mb-2">Join Maybe+</h2>
|
||||
<h2 class="font-medium text-primary mb-2">Join Maybe+</h2>
|
||||
|
||||
<div class="text-gray-500 text-sm space-y-4 mb-5">
|
||||
<div class="text-secondary text-sm space-y-4 mb-5">
|
||||
<p>Nobody likes paywalls, but we need feedback from users willing to pay for Maybe. </p>
|
||||
|
||||
<p>To continue using the app, please subscribe. In this early beta testing phase, we require that you upgrade within one hour to claim your spot.</p>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<%= tag.div id: "syncing-notice", class: "flex gap-3 rounded-lg border bg-white p-4 group max-w-80 shadow-xs border-alpha-black-25" do %>
|
||||
<div class="h-5 w-5 shrink-0 p-px text-white">
|
||||
<%= lucide_icon "loader", class: "w-5 h-5 text-gray-500 animate-pulse" %>
|
||||
<%= lucide_icon "loader", class: "w-5 h-5 text-secondary animate-pulse" %>
|
||||
</div>
|
||||
|
||||
<%= tag.p t(".syncing"), class: "text-gray-900 text-sm font-medium" %>
|
||||
<%= tag.p t(".syncing"), class: "text-primary text-sm font-medium" %>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
<%# locals: (upgrade:) %>
|
||||
<div class="bg-white space-y-4 text-right fixed bottom-10 right-10 p-5 border border-alpha-black-200 shadow-xs rounded-md z-50 max-w-[350px]">
|
||||
<div class="bg-white space-y-4 text-right fixed bottom-10 right-10 p-5 border border-secondary shadow-xs rounded-md z-50 max-w-[350px]">
|
||||
<div>
|
||||
<p><%= link_to upgrade.to_s, upgrade.url, class: "text-sm text-blue-500 underline hover:text-blue-700", target: "_blank" %></p>
|
||||
<% if upgrade.complete? %>
|
||||
<p class="text-gray-900"><%= t(".app_upgraded", version: upgrade.to_s) %></p>
|
||||
<p class="text-primary"><%= t(".app_upgraded", version: upgrade.to_s) %></p>
|
||||
<% else %>
|
||||
<p class="text-gray-900"><%= t(".new_version_available") %></p>
|
||||
<p class="text-primary"><%= t(".new_version_available") %></p>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="flex justify-end items-center gap-2">
|
||||
<%= button_to t(".dismiss"), acknowledge_upgrade_path(upgrade.commit_sha), method: :post, class: "#{upgrade.complete? ? 'bg-gray-900 text-white' : 'bg-gray-100 text-gray-900'} text-sm font-bold p-2 rounded-lg" %>
|
||||
<%= button_to t(".dismiss"), acknowledge_upgrade_path(upgrade.commit_sha), method: :post, class: "#{upgrade.complete? ? 'bg-gray-900 text-white' : 'bg-gray-100 text-primary'} text-sm font-bold p-2 rounded-lg" %>
|
||||
<% if upgrade.available? %>
|
||||
<%= button_to t(".upgrade_now"), deploy_upgrade_path(upgrade.commit_sha), method: :post, class: "bg-gray-900 hover:bg-gray-700 text-white font-medium text-sm p-2 rounded-lg" %>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<%# locals: (label:, period:, value:, trend:, size: "lg", is_percentage: false)%>
|
||||
<div class="space-y-2">
|
||||
<p class="text-sm text-gray-500 font-medium"><%= label %></p>
|
||||
<p class="text-gray-900 -space-x-0.5">
|
||||
<p class="text-sm text-secondary font-medium"><%= label %></p>
|
||||
<p class="text-primary -space-x-0.5">
|
||||
<% if value.is_a?(Money) %>
|
||||
<span class="<%= size == "lg" ? "text-xl" : "text-lg" %> font-medium"><%= format_money value %></span>
|
||||
<% else %>
|
||||
|
|
@ -9,13 +9,13 @@
|
|||
<% end %>
|
||||
</p>
|
||||
<% if trend.nil? %>
|
||||
<p class="text-sm text-gray-500">Data not available for the selected period</p>
|
||||
<p class="text-sm text-secondary">Data not available for the selected period</p>
|
||||
<% elsif trend.direction.flat? %>
|
||||
<p class="text-sm text-gray-500">No change vs. prior period</p>
|
||||
<p class="text-sm text-secondary">No change vs. prior period</p>
|
||||
<% else %>
|
||||
<div class="flex items-center gap-2">
|
||||
<%= render partial: "shared/trend_change", locals: { trend: trend } %>
|
||||
<span class="text-sm text-gray-500"><%= period_label(period) %></span>
|
||||
<span class="text-sm text-secondary"><%= period_label(period) %></span>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue