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/imports/_empty.html.erb

@@ -1,9 +1,13 @@
 <div class="flex justify-center items-center py-20">
   <div class="text-center flex flex-col items-center max-w-[300px] gap-4">
     <p class="text-primary mb-1 font-medium text-sm"><%= t(".message") %></p>
-    <%= link_to new_import_path, class: "btn btn--primary flex items-center gap-2", data: { turbo_frame: "modal" } do %>
-      <%= lucide_icon("plus", class: "w-5 h-5") %>
-      <span><%= t(".new") %></span>
-    <% end %>
+
+    <%= render LinkComponent.new(
+      text: t(".new"),
+      variant: "primary",
+      href: new_import_path,
+      icon: "plus",
+      frame: :modal
+    ) %>
   </div>
 </div>

app/views/imports/_failure.html.erb

@@ -3,7 +3,7 @@
 <div class="h-full flex flex-col justify-center items-center">
   <div class="space-y-6 max-w-sm">
     <div class="mx-auto bg-red-500/5 h-8 w-8 rounded-full flex items-center justify-center">
-      <%= lucide_icon "alert-octagon", class: "w-5 h-5 text-red-500" %>
+      <%= icon "alert-octagon", color: "destructive" %>
     </div>
 
     <div class="text-center space-y-2">
@@ -11,8 +11,6 @@
       <p class="text-sm text-secondary">Please check that your file format, for any errors and that all required fields are filled, then come back and try again.</p>
     </div>
 
-    <div>
-      <%= button_to "Try again", publish_import_path(import), class: "btn btn--primary text-center w-full" %>
-    </div>
+    <%= render ButtonComponent.new(text: "Try again", href: publish_import_path(import), full_width: true) %>
   </div>
 </div>

app/views/imports/_import.html.erb

@@ -36,34 +36,30 @@
     <% end %>
   </div>
 
-  <%= contextual_menu do %>
-    <div class="w-48 p-1 text-sm leading-6 text-primary bg-container shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
-      <%= link_to import_path(import),
-                    class: "block w-full py-2 px-3 space-x-2 text-primary hover:bg-gray-50 flex items-center rounded-lg" do %>
-        <%= lucide_icon "eye", class: "w-5 h-5 text-secondary" %>
+  <%= render MenuComponent.new do |menu| %>
+    <% menu.with_item(variant: "link", text: t(".view"), href: import_path(import), icon: "eye") %>
 
-        <span><%= t(".view") %></span>
-      <% end %>
+    <% if import.complete? || import.revert_failed? %>
+      <% menu.with_item(
+        variant: "button",
+        text: t(".revert"),
+        href: revert_import_path(import),
+        icon: "rotate-ccw",
+        method: :put,
+        confirm: CustomConfirm.new(
+          title: "Revert import?",
+          body: "This will delete transactions that were imported, but you will still be able to review and re-import your data at any time.",
+          btn_text: "Revert"
+        )) %>
 
-      <% if import.complete? || import.revert_failed? %>
-        <%= button_to revert_import_path(import),
-                      method: :put,
-                      class: "block w-full py-2 px-3 space-x-2 text-orange-600 hover:bg-orange-50 flex items-center rounded-lg",
-                      data: { turbo_confirm: true } do %>
-          <%= lucide_icon "rotate-ccw", class: "w-5 h-5" %>
-
-          <span>Revert</span>
-        <% end %>
-      <% else %>
-        <%= button_to import_path(import),
-                      method: :delete,
-                      class: "block w-full py-2 px-3 space-x-2 text-red-600 hover:bg-red-50 flex items-center rounded-lg",
-                      data: { turbo_confirm: true } do %>
-          <%= lucide_icon "trash-2", class: "w-5 h-5" %>
-
-          <span><%= t(".delete") %></span>
-        <% end %>
-      <% end %>
-    </div>
+    <% else %>
+      <% menu.with_item(
+        variant: "button",
+        text: t(".delete"),
+        href: import_path(import),
+        icon: "trash-2",
+        method: :delete,
+        confirm: CustomConfirm.for_resource_deletion("Import")) %>
+    <% end %>
   <% end %>
 </div>

app/views/imports/_importing.html.erb

@@ -3,7 +3,7 @@
 <div class="h-full flex flex-col justify-center items-center">
   <div class="space-y-6 max-w-sm">
     <div class="mx-auto bg-gray-500/5 h-8 w-8 rounded-full flex items-center justify-center">
-      <%= lucide_icon "loader", class: "animate-pulse w-5 h-5 text-secondary" %>
+      <%= icon "loader", class: "animate-pulse" %>
     </div>
 
     <div class="text-center space-y-2">
@@ -12,8 +12,8 @@
     </div>
 
     <div class="space-y-2">
-      <%= link_to "Check status", import_path(import), class: "block btn btn--primary text-center w-full" %>
-      <%= link_to "Back to dashboard", root_path, class: "block btn btn--secondary text-center w-full" %>
+      <%= render LinkComponent.new(text: "Check status", href: import_path(import), variant: "primary") %>
+      <%= render LinkComponent.new(text: "Back to dashboard", href: root_path, variant: "secondary") %>
     </div>
   </div>
 </div>

app/views/imports/_nav.html.erb

@@ -36,7 +36,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/imports/_ready.html.erb

@@ -18,9 +18,9 @@
 
         <div class="flex items-center justify-between gap-2 bg-container px-5 py-3 rounded-tl-lg rounded-tr-lg">
           <div class="flex items-center gap-3">
-            <div class="<%= resource.bg_class %> w-8 h-8 rounded-full flex justify-center items-center">
-              <%= lucide_icon resource.icon, class: "#{resource.text_class} w-5 h-5 shrink-0" %>
-            </div>
+            <%= tag.div class: class_names(resource.bg_class, resource.text_class, "w-8 h-8 rounded-full flex justify-center items-center") do %>
+              <%= icon resource.icon, color: "current" %>
+            <% end %>
 
             <p><%= resource.label %></p>
           </div>
@@ -35,5 +35,5 @@
     </div>
   </div>
 
-  <%= button_to "Publish import", publish_import_path(import), class: "btn btn--primary w-full" %>
+  <%= render ButtonComponent.new(text: "Publish import", href: publish_import_path(import), full_width: true) %>
 </div>

app/views/imports/_revert_failure.html.erb

@@ -3,7 +3,7 @@
 <div class="h-full flex flex-col justify-center items-center">
   <div class="space-y-6 max-w-sm">
     <div class="mx-auto bg-red-500/5 h-8 w-8 rounded-full flex items-center justify-center">
-      <%= lucide_icon "alert-octagon", class: "w-5 h-5 text-red-500" %>
+      <%= icon "alert-octagon", color: "destructive" %>
     </div>
 
     <div class="text-center space-y-2">
@@ -11,8 +11,10 @@
       <p class="text-sm text-secondary">Please try again or contact support.</p>
     </div>
 
-    <div>
-      <%= button_to "Try again", revert_import_path(import), class: "btn btn--primary text-center w-full" %>
-    </div>
+    <%= render ButtonComponent.new(
+      text: "Try again",
+      full_width: true,
+      href: revert_import_path(import)
+    ) %>
   </div>
 </div>

app/views/imports/_success.html.erb

@@ -3,7 +3,7 @@
 <div class="h-full flex flex-col justify-center items-center">
   <div class="space-y-6 max-w-sm">
     <div class="mx-auto bg-green-500/5 h-8 w-8 rounded-full flex items-center justify-center">
-      <%= lucide_icon "check", class: "w-5 h-5 text-green-500" %>
+      <%= icon "check", color: "success" %>
     </div>
 
     <div class="text-center space-y-2">
@@ -11,8 +11,11 @@
       <p class="text-sm text-secondary">Your imported data has been successfully added to the app and is now ready for use.</p>
     </div>
 
-    <div>
-      <%= link_to "Back to dashboard", root_path, class: "block btn btn--primary text-center w-full" %>
-    </div>
+    <%= render LinkComponent.new(
+      text: "Back to dashboard",
+      variant: "primary",
+      full_width: true,
+      href: root_path
+    ) %>
   </div>
 </div>

app/views/imports/index.html.erb

@@ -1,10 +1,13 @@
 <div class="flex items-center justify-between">
   <h1 class="text-xl font-medium text-primary"><%= t(".title") %></h1>
 
-  <%= link_to new_import_path, class: "btn btn--primary flex items-center gap-2", data: { turbo_frame: :modal } do %>
-    <%= lucide_icon("plus", class: "w-5 h-5") %>
-    <span><%= t(".new") %></span>
-  <% end %>
+  <%= render LinkComponent.new(
+    text: "New import",
+    href: new_import_path,
+    icon: "plus",
+    variant: "primary",
+    frame: :modal
+  ) %>
 </div>
 
 <div class="bg-container shadow-border-xs rounded-xl p-4">

app/views/imports/new.html.erb

@@ -1,16 +1,7 @@
-<%= modal do %>
-  <div class="p-4 space-y-4 max-w-[420px]">
-    <div class="space-y-2">
-      <div class="flex justify-between items-center">
-        <h2 class="font-medium text-primary"><%= t(".title") %></h2>
-        <button data-action="modal#close" tabindex="-1">
-          <%= lucide_icon("x", class: "w-5 h-5 text-primary") %>
-        </button>
-      </div>
-
-      <p class="text-secondary text-sm"><%= t(".description") %></p>
-    </div>
+<%= render DialogComponent.new do |dialog| %>
+  <% dialog.with_header(title: t(".title"), subtitle: t(".description")) %>
 
+  <% dialog.with_body do %>
     <div class="rounded-xl bg-container-inset p-1">
       <h3 class="uppercase text-secondary text-xs font-medium px-3 py-1.5"><%= t(".sources") %></h3>
       <ul class="bg-container shadow-border-xs rounded-lg">
@@ -19,13 +10,15 @@
             <%= link_to import_path(@pending_import), class: "flex items-center justify-between p-4 group cursor-pointer", data: { turbo: false } do %>
               <div class="flex items-center gap-2">
                 <div class="bg-orange-500/5 rounded-md w-8 h-8 flex items-center justify-center">
-                  <%= lucide_icon("loader", class: "w-5 h-5 text-orange-500") %>
+                  <span class="text-orange-500">
+                    <%= icon("loader", color: "current") %>
+                  </span>
                 </div>
                 <span class="text-sm text-primary group-hover:text-secondary">
                   <%= t(".resume", type: @pending_import.type.titleize) %>
                 </span>
               </div>
-              <%= lucide_icon("chevron-right", class: "w-5 h-5 text-secondary") %>
+              <%= icon("chevron-right") %>
             <% end %>
 
             <div class="pl-14 pr-3">
@@ -39,13 +32,15 @@
             <%= button_to imports_path(import: { type: "TransactionImport" }), class: "flex items-center justify-between p-4 group cursor-pointer w-full", data: { turbo: false } do %>
               <div class="flex items-center gap-2">
                 <div class="bg-indigo-500/5 rounded-md w-8 h-8 flex items-center justify-center">
-                  <%= lucide_icon("file-spreadsheet", class: "w-5 h-5 text-indigo-500") %>
+                  <span class="text-indigo-500">
+                    <%= icon("file-spreadsheet", color: "current") %>
+                  </span>
                 </div>
                 <span class="text-sm text-primary group-hover:text-secondary">
                   <%= t(".import_transactions") %>
                 </span>
               </div>
-              <%= lucide_icon("chevron-right", class: "w-5 h-5 text-secondary") %>
+              <%= icon("chevron-right") %>
             <% end %>
 
             <div class="pl-14 pr-3">
@@ -59,13 +54,15 @@
             <%= button_to imports_path(import: { type: "TradeImport" }), class: "flex items-center justify-between p-4 group cursor-pointer w-full", data: { turbo: false } do %>
               <div class="flex items-center gap-2">
                 <div class="bg-yellow-500/5 rounded-md w-8 h-8 flex items-center justify-center">
-                  <%= lucide_icon("square-percent", class: "w-5 h-5 text-yellow-500") %>
+                  <span class="text-yellow-500">
+                    <%= icon("square-percent", color: "current") %>
+                  </span>
                 </div>
                 <span class="text-sm text-primary group-hover:text-secondary">
                   <%= t(".import_portfolio") %>
                 </span>
               </div>
-              <%= lucide_icon("chevron-right", class: "w-5 h-5 text-secondary") %>
+              <%= icon("chevron-right") %>
             <% end %>
 
             <div class="pl-14 pr-3">
@@ -79,13 +76,15 @@
             <%= button_to imports_path(import: { type: "AccountImport" }), class: "flex items-center justify-between p-4 group cursor-pointer w-full", data: { turbo: false } do %>
               <div class="flex items-center gap-2">
                 <div class="bg-violet-500/5 rounded-md w-8 h-8 flex items-center justify-center">
-                  <%= lucide_icon("building", class: "w-5 h-5 text-violet-500") %>
+                  <span class="text-violet-500">
+                    <%= icon("building", color: "current") %>
+                  </span>
                 </div>
                 <span class="text-sm text-primary group-hover:text-secondary">
                   <%= t(".import_accounts") %>
                 </span>
               </div>
-              <%= lucide_icon("chevron-right", class: "w-5 h-5 text-secondary") %>
+              <%= icon("chevron-right") %>
             <% end %>
 
             <div class="pl-14 pr-3">
@@ -103,7 +102,7 @@
                   <%= t(".import_mint") %>
                 </span>
               </div>
-              <%= lucide_icon("chevron-right", class: "w-5 h-5 text-secondary") %>
+              <%= icon("chevron-right") %>
             <% end %>
 
             <div class="pl-14 pr-3">
@@ -113,5 +112,5 @@
         <% end %>
       </ul>
     </div>
-  </div>
+  <% end %>
 <% end %>