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

View file

@ -1,73 +1,47 @@
<%# locals: (user:, placement: "right-start", offset: 16) %>
<div id="user-menu" data-controller="menu" data-menu-placement-value="<%= placement %>" data-menu-offset-value="<%= offset %>">
<button data-menu-target="button">
<div class="w-9 h-9 cursor-pointer">
<%= render "settings/user_avatar", user: user, variant: :small %>
</div>
</button>
<div data-testid="user-menu">
<%= render MenuComponent.new(variant: "avatar", avatar_url: user.profile_image&.variant(:small)&.url, placement: placement, offset: offset) do |menu| %>
<%= menu.with_header do %>
<div class="px-4 py-3 flex items-center gap-3">
<div class="w-9 h-9 shrink-0">
<%= render "settings/user_avatar", avatar_url: user.profile_image&.variant(:small)&.url, lazy: true %>
</div>
<div data-menu-target="content" class="hidden absolute w-[276px] z-100 divide-y divide-alpha-black-100 bg-container rounded-xl shadow-border-sm">
<div class="px-4 py-3 flex items-center gap-3">
<div class="w-9 h-9 shrink-0">
<%= render "settings/user_avatar", user: user, variant: :small, lazy: true %>
</div>
<div class="overflow-hidden text-ellipsis text-sm">
<p class="font-medium"><%= user.display_name %></p>
<% if user.display_name != user.email %>
<p class="text-secondary"><%= user.email %></p>
<% end %>
</div>
</div>
<% if self_hosted? %>
<div class="p-3">
<p class="text-sm">
<span class="font-medium text-primary">Version:</span>
<%= link_to Maybe.version.to_release_tag, "https://github.com/maybe-finance/maybe/releases/tag/#{Maybe.version.to_release_tag}", target: "_blank", class: "hover:underline" %>
<% if Maybe.commit_sha.present? %>
(<%= link_to Maybe.commit_sha.first(7), "https://github.com/maybe-finance/maybe/commit/#{Maybe.commit_sha}", target: "_blank", class: "hover:underline" %>)
<div class="overflow-hidden text-ellipsis text-sm">
<p class="font-medium"><%= user.display_name %></p>
<% if user.display_name != user.email %>
<p class="text-secondary"><%= user.email %></p>
<% end %>
</p>
</div>
</div>
<% end %>
<div class="p-1">
<%= link_to settings_profile_path(return_to: request.fullpath), class: "btn btn--ghost flex gap-2 items-center" do %>
<%= lucide_icon("settings", class: "w-5 h-5 text-secondary shrink-0") %>
<span class="text-sm">Settings</span>
<% end %>
<%= link_to changelog_path, class: "btn btn--ghost flex gap-2 items-center" do %>
<%= lucide_icon("box", class: "w-5 h-5 text-secondary shrink-0") %>
<span class="text-sm">Changelog</span>
<% end %>
<%= link_to feedback_path, class: "btn btn--ghost flex gap-2 items-center" do %>
<%= lucide_icon("megaphone", class: "w-5 h-5 text-secondary shrink-0") %>
<span class="text-sm">Feedback</span>
<% end %>
<% if self_hosted? %>
<%= link_to "https://link.maybe.co/discord", class: "btn btn--ghost flex gap-2 items-center" do %>
<%= lucide_icon("message-square-more", class: "w-5 h-5 text-secondary shrink-0") %>
<span class="text-sm">Contact</span>
<% end %>
<% else %>
<%= link_to "mailto:hello@maybefinance.com", class: "btn btn--ghost flex gap-2 items-center", onclick: "Intercom('showNewMessage'); return false;" do %>
<%= lucide_icon("message-square-more", class: "w-5 h-5 text-secondary shrink-0") %>
<span class="text-sm">Contact</span>
<% end %>
<% end %>
</div>
<div class="px-4 py-3 border-t border-tertiary">
<p class="text-sm">
<span class="font-medium text-primary">Version:</span>
<%= link_to Maybe.version.to_release_tag, "https://github.com/maybe-finance/maybe/releases/tag/#{Maybe.version.to_release_tag}", target: "_blank", class: "hover:underline" %>
<div class="p-1">
<%= button_to session_path(Current.session), method: :delete, class: "btn btn--ghost text-destructive w-full flex gap-2 items-center" do %>
<%= lucide_icon("log-out", class: "w-5 h-5 shrink-0") %>
<span class="text-sm">Logout</span>
<% if Maybe.commit_sha.present? %>
(<%= link_to Maybe.commit_sha.first(7), "https://github.com/maybe-finance/maybe/commit/#{Maybe.commit_sha}", target: "_blank", class: "hover:underline" %>)
<% end %>
</p>
</div>
<% end %>
</div>
</div>
<% end %>
<% menu.with_item(variant: "link", text: "Settings", icon: "settings", href: settings_profile_path(return_to: request.fullpath)) %>
<% menu.with_item(variant: "link", text: "Changelog", icon: "box", href: changelog_path) %>
<% if self_hosted? %>
<% menu.with_item(variant: "link", text: "Feedback", icon: "megaphone", href: feedback_path) %>
<% menu.with_item(variant: "link", text: "Contact", icon: "message-square-more", href: "https://link.maybe.co/discord") %>
<% else %>
<% menu.with_item(variant: "button", text: "Contact", icon: "message-square-more", data: { action: "intercom#show" }) %>
<% end %>
<% menu.with_item(variant: "divider") %>
<% menu.with_item(variant: "button", text: "Log out", icon: "log-out", href: session_path(Current.session), method: :delete) %>
<% end %>
</div>