mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-08-07 14:35:23 +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:
parent
c0e290a07e
commit
849c58dd3e
193 changed files with 1356 additions and 1073 deletions
|
@ -1,8 +1,7 @@
|
|||
|
||||
<header class="flex justify-between items-center p-4">
|
||||
<%= image_tag "logo.svg", class: "h-[22px]" %>
|
||||
<div class="flex items-center gap-2">
|
||||
<%= lucide_icon "log-in", class: "w-5 h-5 shrink-0 text-gray-500 gap-2" %>
|
||||
<%= button_to t(".sign_out"), session_path(Current.session), method: :delete, class: "text-sm text-gray-900 font-medium" %>
|
||||
<%= lucide_icon "log-in", class: "w-5 h-5 shrink-0 text-secondary gap-2" %>
|
||||
<%= button_to t(".sign_out"), session_path(Current.session), method: :delete, class: "text-sm text-primary font-medium" %>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
@ -5,18 +5,18 @@
|
|||
<div>
|
||||
<div class="space-y-1 mb-6">
|
||||
<h1 class="text-2xl font-medium"><%= t(".title") %></h1>
|
||||
<p class="text-gray-500 text-sm"><%= t(".subtitle") %></p>
|
||||
<p class="text-secondary text-sm"><%= t(".subtitle") %></p>
|
||||
</div>
|
||||
|
||||
<div class="p-1 bg-alpha-black-25 mb-2 rounded-lg">
|
||||
<div class="bg-white p-4 rounded-lg flex gap-8 shadow-xs">
|
||||
<div class="space-y-2">
|
||||
<%= tag.p t(".example"), class: "text-gray-500 text-sm" %>
|
||||
<%= tag.p "$2,323.25", class: "text-gray-900 font-medium text-2xl" %>
|
||||
<%= tag.p t(".example"), class: "text-secondary text-sm" %>
|
||||
<%= tag.p "$2,323.25", class: "text-primary font-medium text-2xl" %>
|
||||
<p class="text-sm">
|
||||
<span class="text-green-500 font-medium">+<%= format_money(Money.new(78.90, params[:currency] || @user.family.currency)) %></span>
|
||||
<span class="text-green-500 font-medium">(+<%= format_money(Money.new(6.39, params[:currency] || @user.family.currency)) %>)</span>
|
||||
<span class="text-gray-500">as of <%= format_date(Date.parse("2024-10-23"), :default, format_code: params[:date_format] || @user.family.date_format) %></span>
|
||||
<span class="text-secondary">as of <%= format_date(Date.parse("2024-10-23"), :default, format_code: params[:date_format] || @user.family.date_format) %></span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
@ -52,7 +52,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-500 text-xs mb-4"><%= t(".preview") %></p>
|
||||
<p class="text-secondary text-xs mb-4"><%= t(".preview") %></p>
|
||||
|
||||
<%= styled_form_with model: @user do |form| %>
|
||||
<%= form.hidden_field :onboarded_at, value: Time.current %>
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
<div>
|
||||
<div class="space-y-1 mb-6">
|
||||
<h1 class="text-2xl font-medium"><%= t(".title") %></h1>
|
||||
<p class="text-gray-500 text-sm"><%= t(".subtitle") %></p>
|
||||
<p class="text-secondary text-sm"><%= t(".subtitle") %></p>
|
||||
</div>
|
||||
|
||||
<%= styled_form_with model: @user do |form| %>
|
||||
|
@ -13,7 +13,7 @@
|
|||
<%= form.hidden_field :onboarded_at, value: Time.current if @invitation %>
|
||||
|
||||
<div class="space-y-4 mb-4">
|
||||
<p class="text-gray-500 text-xs"><%= t(".profile_image") %></p>
|
||||
<p class="text-secondary text-xs"><%= t(".profile_image") %></p>
|
||||
<%= render "settings/user_avatar_field", form: form, user: @user %>
|
||||
</div>
|
||||
|
||||
|
@ -30,7 +30,7 @@
|
|||
country_options,
|
||||
{ label: t(".country") }, required: true %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%= form.submit t(".submit") %>
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<div class="grow flex justify-center items-center flex-col max-w-sm w-full text-center">
|
||||
<%= image_tag "logo-color.png", class: "w-16 mb-6" %>
|
||||
<%= tag.h1 t(".title"), class: "text-3xl font-medium mb-2" %>
|
||||
<%= tag.p t(".message"), class: "text-sm text-gray-500 mb-6" %>
|
||||
<%= tag.p t(".message"), class: "text-sm text-secondary mb-6" %>
|
||||
|
||||
<%= link_to t(".setup"), profile_onboarding_path, class: "block flex justify-center items-center btn btn--primary w-full" %>
|
||||
</div>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue