mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-08-07 06:25:19 +02:00
Pre-launch design sync with Figma spec (#2154)
* Add lookbook + viewcomponent, organize design system file * Build menu component * Button updates * More button fixes * Replace all menus with new ViewComponent * Checkpoint: fix tests, all buttons and menus converted * Split into Link and Button components for clarity * Button cleanup * Simplify custom confirmation configuration in views * Finalize button, link component API * Add toggle field to custom form builder + Component * Basic tabs component * Custom tabs, convert all menu / tab instances in app * Gem updates * Centralized icon helper * Update all icon usage to central helper * Lint fixes * Centralize all disclosure instances * Dialog replacements * Consolidation of all dialog styles * Test fixes * Fix app layout issues, move to component with slots * Layout simplification * Flakey test fix * Fix dashboard mobile issues * Finalize homepage * Lint fixes * Fix shadows and borders in dark mode * Fix tests * Remove stale class * Fix filled icon logic * Move transparent? to public interface
This commit is contained in:
Zach Gollwitzer
GitHub
parent
1aafed5f8b
commit
90a9546f32
291 changed files with 4143 additions and 3104 deletions
|
|
@ -1,13 +0,0 @@
|
|||
<%# locals: (name:, hex: nil, size: "md") %>
|
||||
|
||||
<% size_classes = {
|
||||
"sm" => "w-6 h-6",
|
||||
"md" => "w-9 h-9",
|
||||
"lg" => "w-10 h-10",
|
||||
"full" => "w-full h-full"
|
||||
} %>
|
||||
|
||||
<%= tag.div style: mixed_hex_styles(hex || "#1570EF"),
|
||||
class: [size_classes[size], "flex shrink-0 items-center justify-center rounded-full"] do %>
|
||||
<%= tag.span (name.presence&.first || "T").upcase, class: ["font-medium", size == "sm" ? "text-xs" : "text-sm"] %>
|
||||
<% end %>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<dialog id="turbo-confirm" class="max-w-[420px] w-full rounded-xl m-auto">
|
||||
<form method="dialog" class="p-4 bg-container">
|
||||
<div class="flex flex-col mb-4">
|
||||
<div class="flex justify-between mb-2 gap-4">
|
||||
<h3 id="turbo-confirm-title" class="font-medium text-primary text-md"><%= t(".title") %></h3>
|
||||
<button value="cancel">
|
||||
<%= lucide_icon("x", class: "w-5 h-5 shrink-0 text-secondary") %>
|
||||
</button>
|
||||
</div>
|
||||
<div id="turbo-confirm-body" class="text-secondary text-sm">
|
||||
<%= t(".body_html") %>
|
||||
</div>
|
||||
</div>
|
||||
<button id="turbo-confirm-accept" class="btn btn--outline-destructive justify-center w-full mb-2" value="confirm"><%= t(".accept") %></button>
|
||||
</form>
|
||||
</dialog>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<%# locals: (title:, content:, open: true) %>
|
||||
|
||||
<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-secondary bg-surface focus-visible:outline-hidden">
|
||||
<h3><%= title %></h3>
|
||||
<%= lucide_icon "chevron-down",
|
||||
class: "group-open:transform group-open:rotate-180 text-secondary w-5 h-5" %>
|
||||
</summary>
|
||||
|
||||
<%= content %>
|
||||
</details>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<%# locals: (content:, reload_on_close: false) %>
|
||||
|
||||
<%= turbo_frame_tag "drawer" do %>
|
||||
<dialog class="ml-auto bg-container md:shadow-border-xs md:rounded-2xl max-w-screen max-h-screen md:max-w-[480px] h-full w-full md:mt-4 md:mr-4 pt-safe focus-visible:outline-hidden"
|
||||
data-controller="modal"
|
||||
data-action="mousedown->modal#clickOutside"
|
||||
data-modal-reload-on-close-value="<%= reload_on_close %>">
|
||||
<div class="flex flex-col h-full gap-4">
|
||||
<div class="flex justify-end items-center p-4">
|
||||
<div data-action="mousedown->modal#close" class="cursor-pointer p-2">
|
||||
<%= lucide_icon("x", class: "w-5 h-5 shrink-0") %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 overflow-y-auto px-4 pb-4">
|
||||
<%= content %>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
<% end %>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<%# locals: (model:) %>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<%= lucide_icon("alert-circle", class: "text-red-500 w-4 h-4 shrink-0") %>
|
||||
<p class="text-red-500 text-sm"><%= model.errors.full_messages.to_sentence %></p>
|
||||
<%= icon("alert-circle", size: "sm", color: "destructive") %>
|
||||
<p class="text-destructive text-sm"><%= model.errors.full_messages.to_sentence %></p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
<%# 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-secondary" end %>
|
||||
|
||||
<%= lucide_icon key, class: class_names(size_class, color_class, "shrink-0") %>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
<%# 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-secondary" end %>
|
||||
|
||||
<%= inline_svg_tag "#{key}.svg", class: class_names(size_class, color_class, "shrink-0") %>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
<%# 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-secondary" end %>
|
||||
|
||||
<%= image_tag("icon-#{key}.svg", class: class_names(size_class, color_class, "shrink-0"), alt: key ) %>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<%# locals: (content:, reload_on_close:, overflow_visible: false) -%>
|
||||
|
||||
<%= turbo_frame_tag "modal" do %>
|
||||
<%= tag.dialog(
|
||||
class: class_names(
|
||||
"focus:outline-none md:m-auto bg-container rounded-none md:rounded-2xl max-w-screen max-h-screen md:max-w-max w-full h-full md:h-fit md:w-auto shadow-border-xs",
|
||||
overflow_visible ? "overflow-visible" : "overflow-auto"
|
||||
),
|
||||
data: {
|
||||
controller: "modal",
|
||||
action: "mousedown->modal#clickOutside",
|
||||
modal_reload_on_close_value: reload_on_close
|
||||
}
|
||||
) do %>
|
||||
<div class="flex flex-col h-full md:h-auto mt-safe">
|
||||
<%= content %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<%# locals: (title:, content:, subtitle: nil, overflow_visible: false) %>
|
||||
|
||||
<%= modal overflow_visible: overflow_visible do %>
|
||||
<article class="mx-auto w-full p-4 space-y-4 md:min-w-[450px]">
|
||||
<div class="space-y-2">
|
||||
<header class="flex justify-between items-center">
|
||||
<h2 class="font-medium text-primary"><%= title %></h2>
|
||||
<%= lucide_icon("x", class: "cursor-pointer w-6 h-6 md:w-5 md:w-5 text-secondary", data: { action: "mousedown->modal#close" }) %>
|
||||
</header>
|
||||
|
||||
<% if subtitle.present? %>
|
||||
<%= tag.p subtitle, class: "text-secondary font-light" %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<%= content %>
|
||||
</article>
|
||||
<% end %>
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
<% unless options[:hide_currency] %>
|
||||
<div>
|
||||
<%= form.select currency_method,
|
||||
currencies_for_select.map(&:iso_code),
|
||||
Money::Currency.as_options.map(&:iso_code),
|
||||
{ inline: true, selected: currency.iso_code },
|
||||
{
|
||||
class: "w-fit pr-5 disabled:text-subdued form-field__input",
|
||||
|
|
|
|||
|
|
@ -7,11 +7,11 @@
|
|||
<%= link_to pagy_url_for(pagy, pagy.prev),
|
||||
data: { turbo_frame: :_top },
|
||||
class: "inline-flex items-center p-2 text-sm font-medium text-secondary bg-container-inset hover:border-secondary hover:text-secondary" do %>
|
||||
<%= lucide_icon("chevron-left", class: "w-5 h-5 text-secondary") %>
|
||||
<%= icon("chevron-left") %>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<div class="inline-flex items-center p-2 text-sm font-medium hover:border-secondary">
|
||||
<%= lucide_icon("chevron-left", class: "w-5 h-5 text-secondary") %>
|
||||
<%= icon("chevron-left") %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
@ -39,11 +39,11 @@
|
|||
<%= link_to pagy_url_for(pagy, pagy.next),
|
||||
data: { turbo_frame: :_top },
|
||||
class: "inline-flex items-center p-2 text-sm font-medium text-secondary hover:border-secondary hover:text-secondary" do %>
|
||||
<%= lucide_icon("chevron-right", class: "w-5 h-5 text-secondary") %>
|
||||
<%= icon("chevron-right") %>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<div class="inline-flex items-center p-2 text-sm font-medium hover:border-secondary">
|
||||
<%= lucide_icon("chevron-right", class: "w-5 h-5 text-secondary") %>
|
||||
<%= icon("chevron-right") %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,26 @@
|
|||
<div data-controller="modal" data-modal-open-value="true" class="h-full flex items-center justify-center bg-container/90" aria-labelledby="modal-title" role="dialog" aria-modal="true">
|
||||
<div class="w-[400px] rounded-xl relative overflow-hidden">
|
||||
<div class="bg-container shadow-border-xs rounded-xl relative z-10">
|
||||
<div class="rounded-xl" style="background-image: url('<%= asset_path("maybe-plus-background.svg") %>'); background-size: cover; background-position: center top;">
|
||||
<div class="text-center rounded-xl" style="background-image: linear-gradient(to bottom, rgba(197,161,119,0.15) 0%, rgba(255,255,255,0.8) 30%, white 40%);">
|
||||
<div class="p-4 pt-2 rounded-xl">
|
||||
<div class="flex justify-center">
|
||||
<%= image_tag "maybe-plus-logo.png", class: "w-20" %>
|
||||
</div>
|
||||
|
||||
<h2 class="font-medium text-primary mb-2">Join Maybe+</h2>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<%= link_to "Upgrade to Maybe+", new_subscription_path, class: "btn btn--primary text-center w-full block" %>
|
||||
</div>
|
||||
<%= render DialogComponent.new do |dialog| %>
|
||||
<div class="rounded-xl" style="background-image: url('<%= asset_path("maybe-plus-background.svg") %>'); background-size: cover; background-position: center top;">
|
||||
<div class="text-center rounded-xl" style="background-image: linear-gradient(to bottom, rgba(197,161,119,0.15) 0%, rgba(255,255,255,0.8) 30%, white 40%);">
|
||||
<div class="p-4 pt-2 rounded-xl">
|
||||
<div class="flex justify-center">
|
||||
<%= image_tag "maybe-plus-logo.png", class: "w-20" %>
|
||||
</div>
|
||||
|
||||
<h2 class="font-medium text-primary mb-2">Join Maybe+</h2>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<%= render LinkComponent.new(
|
||||
text: "Upgrade to Maybe+",
|
||||
href: new_subscription_path,
|
||||
variant: "primary",
|
||||
full_width: true
|
||||
) %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
<%# locals: (model:, attribute:, turbo_frame: nil) %>
|
||||
|
||||
<%= form_with model: model,
|
||||
namespace: model.id,
|
||||
class: "flex items-center",
|
||||
data: { controller: "auto-submit-form", turbo_frame: turbo_frame } do |form| %>
|
||||
<div class="relative inline-block select-none">
|
||||
<%= form.check_box attribute, { class: "sr-only peer", data: { "auto-submit-form-target": "auto" } } %>
|
||||
<%= form.label attribute, " ".html_safe, class: "switch" %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
@ -1,24 +1,24 @@
|
|||
<fieldset class="bg-gray-50 rounded-lg p-1 grid grid-flow-col justify-stretch gap-x-2">
|
||||
<% active_tab = local_assigns[:active_tab] || 'expense' %>
|
||||
<% active_tab = local_assigns[:active_tab] || "expense" %>
|
||||
|
||||
<%= link_to new_transaction_path(nature: 'outflow'),
|
||||
<%= link_to new_transaction_path(nature: "outflow"),
|
||||
data: { turbo_frame: :modal },
|
||||
class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-sm md:text-normal text-subdued #{active_tab == 'expense' ? 'bg-container text-gray-800 shadow-sm' : 'hover:bg-container hover:text-gray-800 hover:shadow-sm'}" do %>
|
||||
<%= lucide_icon "minus-circle", class: "w-4 h-4 md:w-5 md:h-5" %>
|
||||
<%= icon "minus-circle" %>
|
||||
<%= tag.span t("shared.transaction_tabs.expense") %>
|
||||
<% end %>
|
||||
|
||||
<%= link_to new_transaction_path(nature: 'inflow'),
|
||||
<%= link_to new_transaction_path(nature: "inflow"),
|
||||
data: { turbo_frame: :modal },
|
||||
class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-sm md:text-normal text-subdued #{active_tab == 'income' ? 'bg-container text-gray-800 shadow-sm' : 'hover:bg-container hover:text-gray-800 hover:shadow-sm'}" do %>
|
||||
<%= lucide_icon "plus-circle", class: "w-4 h-4 md:w-5 md:h-5" %>
|
||||
<%= icon "plus-circle" %>
|
||||
<%= tag.span t("shared.transaction_tabs.income") %>
|
||||
<% end %>
|
||||
|
||||
<%= link_to new_transfer_path,
|
||||
data: { turbo_frame: :modal },
|
||||
class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-sm md:text-normal text-subdued #{active_tab == 'transfer' ? 'bg-container text-gray-800 shadow-sm' : 'hover:bg-container hover:text-gray-800 hover:shadow-sm'}" do %>
|
||||
<%= lucide_icon "arrow-right-left", class: "w-4 h-4 md:w-5 md:h-5" %>
|
||||
<%= icon "arrow-right-left" %>
|
||||
<%= tag.span t("shared.transaction_tabs.transfer") %>
|
||||
<% end %>
|
||||
</fieldset>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<%= trend.value.is_a?(Money) ? format_money(trend.value) : trend.value.round(2) %>
|
||||
</span>
|
||||
<% unless trend.percent.infinite? %>
|
||||
<span class="font-mono">(<%= lucide_icon(trend.icon, class: "w-4 h-4 align-text-bottom inline") %><%= trend.percent_formatted %>)</span>
|
||||
<span class="font-mono">(<%= icon(trend.icon, size: "sm", color: "current", class: "mb-0.5 inline") %><%= trend.percent_formatted %>)</span>
|
||||
<% end %>
|
||||
<span class="text-secondary">
|
||||
<%= " #{comparison_label}" if defined?(comparison_label) && comparison_label.present? %>
|
||||
|
|
|
|||
|
|
@ -4,13 +4,13 @@
|
|||
data: { controller: "element-removal" } do %>
|
||||
<div class="h-5 w-5 shrink-0 p-px text-primary">
|
||||
<div class="flex h-full items-center justify-center rounded-full bg-destructive">
|
||||
<%= lucide_icon "x", class: "w-3 h-3" %>
|
||||
<%= icon "x", size: "xs" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%= tag.p message, class: "text-primary text-sm font-medium" %>
|
||||
|
||||
<div class="ml-auto">
|
||||
<%= lucide_icon "x", data: { action: "click->element-removal#remove" }, class: "w-5 h-5 text-secondary hover:text-gray-600 cursor-pointer" %>
|
||||
<%= icon "x", data: { action: "click->element-removal#remove" }, class: "cursor-pointer" %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<%= tag.div class: "relative flex gap-3 rounded-lg bg-container-inset p-4 group w-full md:max-w-80 shadow-border-xs", data: { controller: "element-removal" } do %>
|
||||
<div class="h-5 w-5 shrink-0 p-px text-primary">
|
||||
<div class="flex h-full items-center justify-center rounded-full bg-success">
|
||||
<%= lucide_icon "check", class: "w-3 h-3" %>
|
||||
<%= icon "check", size: "xs" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
<%= tag.div id: id, class: "flex gap-3 rounded-lg bg-container-inset p-4 group w-full md:max-w-80 shadow-border-xs" do %>
|
||||
<div class="h-5 w-5 shrink-0 p-px text-primary">
|
||||
<%= lucide_icon "loader", class: "w-5 h-5 text-secondary animate-pulse" %>
|
||||
<%= icon "loader", class: "animate-pulse" %>
|
||||
</div>
|
||||
|
||||
<%= tag.p message, class: "text-primary text-sm font-medium" %>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
<%# locals: (message:, description: nil, cta: nil) %>
|
||||
<%# locals: (message:, description: nil) %>
|
||||
|
||||
<%= tag.div class: "relative flex gap-3 rounded-lg bg-container-inset p-4 group w-full md:max-w-80 shadow-border-xs",
|
||||
data: {
|
||||
controller: "element-removal",
|
||||
action: "animationend->element-removal#remove"
|
||||
} do %>
|
||||
|
||||
<div class="h-5 w-5 shrink-0 p-px text-primary">
|
||||
<div class="flex h-full items-center justify-center rounded-full bg-success">
|
||||
<%= lucide_icon "check", class: "w-3 h-3" %>
|
||||
<%= icon "check", size: "xs" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -20,29 +19,18 @@
|
|||
<%= tag.p description, class: "text-secondary text-sm" %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<% if cta %>
|
||||
<%= tag.div class:"flex gap-2 justify-end" do %>
|
||||
<%= tag.button cta[:decline][:label], class: "btn btn--secondary", data: { action: "click->element-removal#remove" } %>
|
||||
<%= tag.a cta[:accept][:label], href: cta[:accept][:href], class: "btn btn--primary" %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="ml-auto">
|
||||
<div class="h-5 shrink-0">
|
||||
<% unless cta %>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0">
|
||||
<path d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM3.6 10C3.6 13.5346 6.46538 16.4 10 16.4C13.5346 16.4 16.4 13.5346 16.4 10C16.4 6.46538 13.5346 3.6 10 3.6C6.46538 3.6 3.6 6.46538 3.6 10Z" fill="#E5E5E5" />
|
||||
<circle class="origin-center -rotate-90 animate-stroke-fill" stroke="#141414" stroke-opacity="0.4" r="7.2" cx="10" cy="10" stroke-dasharray="43.9822971503" stroke-dashoffset="43.9822971503" />
|
||||
</svg>
|
||||
<% end %>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0">
|
||||
<path d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM3.6 10C3.6 13.5346 6.46538 16.4 10 16.4C13.5346 16.4 16.4 13.5346 16.4 10C16.4 6.46538 13.5346 3.6 10 3.6C6.46538 3.6 3.6 6.46538 3.6 10Z" fill="#E5E5E5" />
|
||||
<circle class="origin-center -rotate-90 animate-stroke-fill" stroke="#141414" stroke-opacity="0.4" r="7.2" cx="10" cy="10" stroke-dasharray="43.9822971503" stroke-dashoffset="43.9822971503" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% unless cta %>
|
||||
<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-subdued cursor-pointer", data: { action: "click->element-removal#remove" } %>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="absolute -top-2 -right-2">
|
||||
<%= icon "x", class: "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>
|
||||
<% end %>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue