mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-08-09 15:35:22 +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,33 +1,17 @@
|
|||
<%# locals: (breadcrumbs:, sidebar_toggle_enabled: true) %>
|
||||
<%# locals: (breadcrumbs:) %>
|
||||
|
||||
<nav class="items-center gap-2 mb-6 hidden md:flex">
|
||||
<% if sidebar_toggle_enabled %>
|
||||
<button data-action="sidebar#toggleLeftPanel" class="hidden p-2 lg:inline-flex rounded-lg items-center justify-center hover:bg-container-inset cursor-pointer">
|
||||
<%= icon("panel-left", color: "gray") %>
|
||||
</button>
|
||||
<% end %>
|
||||
|
||||
<div class="py-2 flex items-center gap-2">
|
||||
<% breadcrumbs.each_with_index do |(name, path), index| %>
|
||||
<% if index > 0 %>
|
||||
<%= icon("chevron-right", color: "gray", size: "sm") %>
|
||||
<% end %>
|
||||
|
||||
<% if path.present? && index < breadcrumbs.size - 1 %>
|
||||
<%= link_to name, path, class: "text-sm text-gray-500 font-medium" %>
|
||||
<% elsif index == breadcrumbs.size - 1 %>
|
||||
<span class="text-primary font-medium text-sm"><%= name %></span>
|
||||
<% else %>
|
||||
<span class="text-sm text-gray-500 font-medium"><%= name %></span>
|
||||
<% end %>
|
||||
<div class="py-2 flex items-center gap-2">
|
||||
<% breadcrumbs.each_with_index do |(name, path), index| %>
|
||||
<% if index > 0 %>
|
||||
<%= icon("chevron-right", color: "gray", size: "sm") %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<% if sidebar_toggle_enabled %>
|
||||
<div class="ml-auto">
|
||||
<button data-action="sidebar#toggleRightPanel" class="p-2 hidden lg:inline-flex rounded-lg items-center justify-center hover:bg-container-inset cursor-pointer" title="Toggle AI Assistant">
|
||||
<%= icon("panel-right", color: "gray") %>
|
||||
</button>
|
||||
</div>
|
||||
<% if path.present? && index < breadcrumbs.size - 1 %>
|
||||
<%= link_to name, path, class: "text-sm text-gray-500 font-medium" %>
|
||||
<% elsif index == breadcrumbs.size - 1 %>
|
||||
<span class="text-primary font-medium text-sm"><%= name %></span>
|
||||
<% else %>
|
||||
<span class="text-sm text-gray-500 font-medium"><%= name %></span>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</nav>
|
||||
</div>
|
||||
|
|
|
|||
30
app/views/layouts/shared/_confirm_dialog.html.erb
Normal file
30
app/views/layouts/shared/_confirm_dialog.html.erb
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<%# This dialog is used as an override to the browser's confirm API when submitting forms with data-turbo-confirm %>
|
||||
<%# See confirm_dialog_controller.js and _htmldoc.html.erb %>
|
||||
<%= render DialogComponent.new(id: "confirm-dialog", auto_open: false, data: { controller: "confirm-dialog" }, width: "sm") do |dialog| %>
|
||||
<% dialog.with_body do %>
|
||||
<form method="dialog" class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<h3 class="font-medium text-primary" data-confirm-dialog-target="title">Are you sure?</h3>
|
||||
<%= icon("x", as_button: true, type: "submit", value: "cancel") %>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-secondary" data-confirm-dialog-target="subtitle">This action cannot be undone.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<% ["primary", "outline-destructive", "destructive"].each do |variant| %>
|
||||
<%= render ButtonComponent.new(
|
||||
text: "Confirm",
|
||||
variant: variant,
|
||||
autofocus: true,
|
||||
full_width: true,
|
||||
value: "confirm",
|
||||
data: { variant: variant, confirm_dialog_target: "confirmButton" },
|
||||
hidden: true,
|
||||
) %>
|
||||
<% end %>
|
||||
</div>
|
||||
</form>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
<%= turbo_frame_tag "modal" %>
|
||||
<%= turbo_frame_tag "drawer" %>
|
||||
<%= render "shared/confirm_modal" %>
|
||||
|
||||
<%= render "impersonation_sessions/super_admin_bar" if Current.true_user&.super_admin? && show_super_admin_bar? %>
|
||||
<%= render "impersonation_sessions/approval_bar" if Current.true_user&.impersonated_support_sessions&.initiated&.any? %>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="h-full text-primary overflow-hidden lg:overflow-auto font-sans <%= @os %>" lang="en" data-controller="theme" data-theme-user-preference-value="<%= Current.user&.theme || "system" %>">
|
||||
<html class="h-full text-primary overflow-hidden lg:overflow-auto font-sans <%= @os %>" lang="en" data-controller="theme intercom" data-theme-user-preference-value="<%= Current.user&.theme || "system" %>">
|
||||
<head>
|
||||
<%= render "layouts/shared/head" %>
|
||||
<%= yield :head %>
|
||||
|
|
@ -20,9 +20,22 @@
|
|||
|
||||
<%= family_stream %>
|
||||
|
||||
<% if Rails.env.development? %>
|
||||
<div class="fixed bottom-32 left-7 flex flex-col gap-1">
|
||||
<%= icon("eclipse", as_button: true, data: { action: "theme#toDark" }) %>
|
||||
<%= icon("sun", as_button: true, data: { action: "theme#toLight" }) %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% if require_upgrade? %>
|
||||
<%= render "shared/subscribe_modal" %>
|
||||
<% end %>
|
||||
|
||||
<%= turbo_frame_tag "modal" %>
|
||||
<%= turbo_frame_tag "drawer" %>
|
||||
<%= render "shared/confirm_modal" %>
|
||||
|
||||
<%# Custom overrides for browser's confirm API %>
|
||||
<%= render "layouts/shared/confirm_dialog" %>
|
||||
|
||||
<%= render "impersonation_sessions/super_admin_bar" if Current.true_user&.super_admin? && show_super_admin_bar? %>
|
||||
<%= render "impersonation_sessions/approval_bar" if Current.true_user&.impersonated_support_sessions&.initiated&.any? %>
|
||||
|
|
|
|||
20
app/views/layouts/shared/_nav_item.html.erb
Normal file
20
app/views/layouts/shared/_nav_item.html.erb
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<%# locals:(name:, path:, icon:, icon_custom:, active:, mobile_only: false) %>
|
||||
|
||||
<%= link_to path, class: "space-y-1 group block relative pb-1" do %>
|
||||
<div class="grow flex flex-col lg:flex-row gap-1 items-center">
|
||||
<%= tag.div class: class_names("w-4 h-1 lg:w-1 lg:h-4 rounded-bl-sm rounded-br-sm lg:rounded-tr-sm lg:rounded-br-sm lg:rounded-bl-none", "bg-nav-indicator" => active) %>
|
||||
|
||||
<%= tag.div class: class_names(
|
||||
"w-8 h-8 flex items-center justify-center mx-auto rounded-lg",
|
||||
active ? "bg-container shadow-xs text-primary" : "group-hover:bg-container-hover text-secondary"
|
||||
) do %>
|
||||
<%= icon(icon, color: active ? "current" : "default", custom: icon_custom) %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="grow flex justify-center lg:pl-2">
|
||||
<%= tag.p class: class_names("font-medium text-[11px]", active ? "text-primary" : "text-secondary") do %>
|
||||
<%= name %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
Loading…
Add table
Add a link
Reference in a new issue