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

Pre-launch design sync with Figma spec (#2154)

Browse source 
* 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 2025-04-30 18:14:22 -04:00 • committed by GitHub
parent 1aafed5f8b
commit 90a9546f32
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
291 changed files with 4143 additions and 3104 deletions
Download patch file Download diff file Expand all files Collapse all files

4
app/views/shared/notifications/_alert.html.erb
View file

@ -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 %>

2
app/views/shared/notifications/_cta.html.erb
View file

@ -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
app/views/shared/notifications/_loading.html.erb
View file

@ -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" %>

30
app/views/shared/notifications/_notice.html.erb
View file

@ -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 %>