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

app/views/budgets/_budget_categories.html.erb

@@ -25,7 +25,7 @@
             <% group.budget_subcategories.each do |budget_subcategory| %>
               <div class="w-full flex items-center -mt-4">
                 <div class="ml-8 flex items-center justify-center text-subdued">
-                  <%= lucide_icon "corner-down-right", class: "w-5 h-5 shrink-0" %>
+                  <%= icon "corner-down-right" %>
                 </div>
 
                 <%= render "budget_categories/budget_category", budget_category: budget_subcategory %>

app/views/budgets/_budget_donut.html.erb

@@ -8,24 +8,29 @@
           <span>Spent</span>
         </div>
 
-        <div class="text-3xl font-medium <%= budget.available_to_spend.negative? ? "text-red-500" : "text-primary" %>">
+        <div class="mb-2 text-3xl font-medium <%= budget.available_to_spend.negative? ? "text-red-500" : "text-primary" %>">
           <%= format_money(budget.actual_spending_money) %>
         </div>
 
-        <%= link_to edit_budget_path(budget), class: "btn btn--secondary flex items-center gap-1 mt-2" do %>
-          <span class="text-primary font-medium">
-            of <%= format_money(budget.budgeted_spending_money) %>
-          </span>
-          <%= lucide_icon "pencil", class: "w-4 h-4 text-secondary hover:text-gray-600" %>
-        <% end %>
+        <%= render LinkComponent.new(
+          text: "of #{budget.budgeted_spending_money.format}",
+          variant: "secondary",
+          icon: "pencil",
+          icon_position: "right",
+          size: "sm",
+          href: edit_budget_path(budget)
+        ) %>
       <% else %>
         <div class="text-subdued text-3xl mb-2">
           <span><%= format_money Money.new(0, budget.currency || budget.family.currency) %></span>
         </div>
-        <%= link_to edit_budget_path(budget), class: "flex items-center gap-2 btn btn--primary" do %>
-          <%= lucide_icon "plus", class: "w-4 h-4 text-white" %>
-          New budget
-        <% end %>
+
+        <%= render LinkComponent.new(
+          text: "New budget",
+          size: "sm",
+          icon: "plus",
+          href: edit_budget_path(budget)
+        ) %>
       <% end %>
     </div>
 
@@ -41,11 +46,14 @@
             <%= format_money(bc.actual_spending_money) %>
           </p>
 
-          <%= link_to budget_budget_categories_path(budget), class: "btn btn--secondary flex items-center gap-1" do %>
-            <span>of <%= format_money(bc.budgeted_spending_money, precision: 0) %></span>
-
-            <%= lucide_icon "pencil", class: "w-4 h-4 text-secondary shrink-0" %>
-          <% end %>
+          <%= render LinkComponent.new(
+            text: "of #{bc.budgeted_spending_money.format(precision: 0)}",
+            variant: "secondary",
+            icon: "pencil",
+            icon_position: "right",
+            size: "sm",
+            href: budget_budget_categories_path(budget)
+          ) %>
         </div>
       </div>
     <% end %>

app/views/budgets/_budget_header.html.erb

@@ -3,38 +3,46 @@
 <div class="flex items-center gap-1 mb-4">
   <div class="flex items-center gap-2">
     <% if budget.previous_budget_param %>
-      <%= link_to budget_path(budget.previous_budget_param) do %>
-        <%= lucide_icon "chevron-left" %>
-      <% end %>
+      <%= render LinkComponent.new(
+        variant: "icon",
+        icon: "chevron-left",
+        href: budget_path(budget.previous_budget_param),
+      ) %>
     <% else %>
-      <%= lucide_icon "chevron-left", class: "text-subdued" %>
+      <span class="text-subdued">
+        <%= icon "chevron-left", color: "current" %>
+      </span>
     <% end %>
 
     <% if budget.next_budget_param %>
-      <%= link_to budget_path(budget.next_budget_param) do %>
-        <%= lucide_icon "chevron-right" %>
-      <% end %>
+      <%= render LinkComponent.new(
+        variant: "icon",
+        icon: "chevron-right",
+        href: budget_path(budget.next_budget_param),
+      ) %>
     <% else %>
-      <%= lucide_icon "chevron-right", class: "text-subdued" %>
+      <span class="text-subdued">
+        <%= icon "chevron-right", color: "current" %>
+      </span>
     <% end %>
   </div>
 
-  <div data-controller="menu" data-menu-placement-value="bottom-start">
-    <%= tag.button data: { menu_target: "button" }, class: "flex items-center gap-1 hover:bg-alpha-black-25 cursor-pointer rounded-md p-2" do %>
-      <span class="text-primary font-medium text-3xl md:text-base"><%= @budget.name %></span>
-      <%= lucide_icon "chevron-down", class: "w-5 h-5 shrink-0 text-secondary" %>
+  <%= render MenuComponent.new(variant: "button") do |menu| %>
+    <% menu.with_button class: "flex items-center gap-1 hover:bg-alpha-black-25 cursor-pointer rounded-md p-2"  do %>
+      <span class="text-primary font-medium text-lg lg:text-base"><%= @budget.name %></span>
+      <%= icon("chevron-down") %>
     <% end %>
 
-    <div data-menu-target="content" class="hidden z-10">
+    <% menu.with_custom_content do %>
       <%= render "budgets/picker", family: Current.family, year: budget.start_date.year %>
-    </div>
-  </div>
+    <% end %>
+  <% end %>
 
   <div class="ml-auto">
-    <% if @budget.current? %>
-      <span class="border border-secondary text-primary text-sm font-medium px-3 py-2 rounded-lg">Today</span>
-    <% else %>
-      <%= link_to "Today", budget_path(Budget.date_to_param(Date.current)), class: "btn btn--outline" %>
-    <% end %>
+    <%= render LinkComponent.new(
+        text: "Today",
+        variant: "outline",
+        href: budget_path(Budget.date_to_param(Date.current)),
+    ) %>
   </div>
 </div>

app/views/budgets/_budget_nav.html.erb

@@ -24,7 +24,7 @@
       <%= link_to step[:path], class: "flex items-center gap-3" do %>
         <div class="flex items-center gap-2 text-sm font-medium <%= text_class %>">
           <span class="<%= step_class %> w-7 h-7 rounded-full shrink-0 inline-flex items-center justify-center border border-transparent">
-            <%= step[:is_complete] && !is_current ? lucide_icon("check", class: "w-4 h-4") : idx + 1 %>
+            <%= step[:is_complete] && !is_current ? icon("check", size: "sm") : idx + 1 %>
           </span>
 
           <span><%= step[:name] %></span>

app/views/budgets/_over_allocation_warning.html.erb

@@ -1,13 +1,15 @@
 <%# locals: (budget:) %>
 
 <div class="flex flex-col gap-4 items-center justify-center h-full">
-  <%= lucide_icon "alert-triangle", class: "w-6 h-6 text-red-500" %>
+  <%= icon "alert-triangle", size: "lg", color: "destructive" %>
   <p class="text-secondary text-sm text-center">You have over-allocated your budget.  Please fix your allocations.</p>
 
-  <%= link_to budget_budget_categories_path(budget), class: "btn btn--secondary flex items-center gap-1" do %>
-    <span class="text-primary font-medium">
-      Fix allocations
-    </span>
-    <%= lucide_icon "pencil", class: "w-4 h-4 text-secondary hover:text-gray-600" %>
-  <% end %>
+  <%= render LinkComponent.new(
+    text: "Fix allocations",
+    variant: "secondary",
+    size: "sm",
+    icon: "pencil",
+    icon_position: "right",
+    href: budget_budget_categories_path(budget)
+  ) %>
 </div>

app/views/budgets/_picker.html.erb

@@ -1,17 +1,17 @@
 <%# locals: (family:, year:) %>
 
 <%= turbo_frame_tag "budget_picker" do %>
-  <div class="bg-container shadow-border-xs p-3 rounded-xl space-y-4">
+  <div class="p-3 space-y-4">
     <div class="flex items-center gap-2 justify-between">
       <% last_month_of_previous_year = Date.new(year - 1, 12, 1) %>
 
       <% if Budget.budget_date_valid?(last_month_of_previous_year, family: family) %>
         <%= link_to picker_budgets_path(year: year - 1), data: { turbo_frame: "budget_picker" }, class: "p-2 flex items-center justify-center hover:bg-alpha-black-25 rounded-md" do %>
-          <%= lucide_icon "chevron-left", class: "w-5 h-5 shrink-0 text-secondary" %>
+          <%= icon "chevron-left" %>
         <% end %>
       <% else %>
-        <span class="p-2 flex items-center justify-center text-gray-300 rounded-md">
-          <%= lucide_icon "chevron-left", class: "w-5 h-5 shrink-0 text-subdued" %>
+        <span class="p-2 flex items-center justify-center text-subdued rounded-md">
+          <%= icon "chevron-left", color: "current" %>
         </span>
       <% end %>
 
@@ -23,11 +23,11 @@
 
       <% if Budget.budget_date_valid?(first_month_of_next_year, family: family) %>
         <%= link_to picker_budgets_path(year: year + 1), data: { turbo_frame: "budget_picker" }, class: "p-2 flex items-center justify-center hover:bg-alpha-black-25 rounded-md" do %>
-          <%= lucide_icon "chevron-right", class: "w-5 h-5 shrink-0 text-secondary" %>
+          <%= icon "chevron-right" %>
         <% end %>
       <% else %>
-        <span class="p-2 flex items-center justify-center text-gray-300 rounded-md">
-          <%= lucide_icon "chevron-right", class: "w-5 h-5 shrink-0 text-subdued" %>
+        <span class="p-2 flex items-center justify-center text-subdued rounded-md">
+          <%= icon "chevron-right", color: "current" %>
         </span>
       <% end %>
     </div>
@@ -38,7 +38,13 @@
         <% param_key = Budget.date_to_param(date) %>
 
         <% if Budget.budget_date_valid?(date, family: family) %>
-          <%= link_to month_name, budget_path(param_key), data: { turbo_frame: "_top" }, class: "btn btn--ghost" %>
+          <%= render LinkComponent.new(
+            variant: "ghost",
+            text: month_name,
+            href: budget_path(param_key),
+            full_width: true,
+            frame: :_top
+          ) %>
         <% else %>
           <span class="px-3 py-2 text-subdued rounded-md"><%= month_name %></span>
         <% end %>

app/views/budgets/edit.html.erb

@@ -21,7 +21,7 @@
 
         <% if @budget.estimated_income && @budget.estimated_spending %>
           <div class="border border-tertiary rounded-lg p-3 flex">
-            <%= lucide_icon "sparkles", class: "w-5 h-5 text-secondary shrink-0" %>
+            <%= icon "sparkles" %>
             <div class="ml-2 space-y-1 text-sm">
               <h4 class="text-primary">Autosuggest income & spending budget</h4>
               <p class="text-secondary">
@@ -29,18 +29,18 @@
               </p>
             </div>
 
-            <div class="relative inline-block select-none ml-6">
-              <%= check_box_tag :auto_fill, "1", params[:auto_fill].present?, class: "sr-only peer", data: {
-                  action: "change->budget-form#toggleAutoFill",
-                  budget_form_income_param: { key: "budget_expected_income", value: sprintf("%.2f", @budget.estimated_income) },
-                  budget_form_spending_param: { key: "budget_budgeted_spending", value: sprintf("%.2f", @budget.estimated_spending) }
-                } %>
-              <label for="auto_fill" class="switch"></label>
-            </div>
+            <%= render ToggleComponent.new(
+              id: "auto_fill",
+              data: {
+                action: "change->budget-form#toggleAutoFill",
+                budget_form_income_param: { key: "budget_expected_income", value: sprintf("%.2f", @budget.estimated_income) },
+                budget_form_spending_param: { key: "budget_budgeted_spending", value: sprintf("%.2f", @budget.estimated_spending) }
+              }
+            ) %>
           </div>
         <% end %>
 
-        <%= f.submit "Continue", class: "btn btn--primary w-full" %>
+        <%= f.submit "Continue" %>
       <% end %>
     </div>
   </div>

app/views/budgets/show.html.erb

@@ -54,10 +54,12 @@
         <h2 class="text-lg font-medium">Categories</h2>
 
         <% if @budget.initialized? %>
-          <%= link_to budget_budget_categories_path(@budget), class: "btn btn--secondary flex items-center gap-2" do %>
-            <%= icon "settings-2", color: "gray" %>
-            <span>Edit</span>
-          <% end %>
+          <%= render LinkComponent.new(
+            text: "Edit",
+            variant: "secondary",
+            icon: "settings-2",
+            href: budget_budget_categories_path(@budget)
+          ) %>
         <% end %>
       </div>