Dashboard design fixes (#1898)

* Dashboard design fixes

* Update dashboard greeting

* Remove sidebar toggle from settings breadcrumbs

* Autofocus and outlines for category dropdowns

* Lint fixes

app/views/accounts/_account_sidebar_tabs.html.erb

@@ -8,21 +8,21 @@
   data-tabs-inactive-class="text-secondary"
   data-tabs-default-tab-value="assets-tab">
   <div class="bg-surface-inset rounded-lg p-1 flex">
-    <button type="button" data-id="assets-tab" class="w-1/3 px-2 py-1 rounded-md text-sm text-secondary" data-tabs-target="btn" data-action="click->tabs#select">
+    <button type="button" data-id="assets-tab" class="w-1/3 px-2 py-1 rounded-md text-sm text-secondary font-medium" data-tabs-target="btn" data-action="click->tabs#select">
       Assets
     </button>
 
-    <button type="button" data-id="debts-tab" class="w-1/3 px-2 py-1 rounded-md text-secondary text-sm" data-tabs-target="btn" data-action="click->tabs#select">
+    <button type="button" data-id="debts-tab" class="w-1/3 px-2 py-1 rounded-md text-secondary text-sm font-medium" data-tabs-target="btn" data-action="click->tabs#select">
       Debts
     </button>
 
-    <button type="button" data-id="all-tab" class="w-1/3 px-2 py-1 rounded-md text-secondary text-sm" data-tabs-target="btn" data-action="click->tabs#select">
+    <button type="button" data-id="all-tab" class="w-1/3 px-2 py-1 rounded-md text-secondary text-sm font-medium" data-tabs-target="btn" data-action="click->tabs#select">
       All
     </button>
   </div>
 
   <div data-tabs-target="tab" id="assets-tab">
-    <%= link_to new_account_path(step: "method_select"),
+    <%= link_to new_account_path(step: "method_select", classification: "asset"),
               class: "flex items-center gap-3 btn btn--ghost text-secondary mb-1",
               data: { turbo_frame: "modal" } do %>
       <%= icon("plus") %>
@@ -37,7 +37,7 @@
   </div>
 
   <div data-tabs-target="tab" id="debts-tab" class="hidden">
-    <%= link_to new_account_path(step: "method_select"),
+    <%= link_to new_account_path(step: "method_select", classification: "liability"),
               class: "flex items-center gap-3 btn btn--ghost text-secondary mb-1",
               data: { turbo_frame: "modal" } do %>
       <%= icon("plus") %>

app/views/accounts/_accountable_group.html.erb

@@ -19,12 +19,12 @@
 
   <div class="space-y-1">
     <% account_group.accounts.each do |account| %>
-      <%= link_to account_path(account), class: "block flex items-center gap-2 btn btn--ghost" do %>
+      <%= link_to account_path(account), class: "block flex items-center gap-2 btn btn--ghost", title: account.name do %>
         <%= render "accounts/logo", account: account, size: "sm", color: account_group.color %>
 
-        <div>
-          <%= tag.p account.name, class: "text-sm font-medium mb-0.5" %>
-          <%= tag.p account.subtype&.humanize.presence || account_group.name, class: "text-sm text-secondary" %>
+        <div class="min-w-0 grow">
+          <%= tag.p account.name, class: "text-sm font-medium mb-0.5 truncate" %>
+          <%= tag.p account.subtype&.humanize.presence || account_group.name, class: "text-sm text-secondary truncate" %>
         </div>
 
         <div class="ml-auto text-right grow h-10">

app/views/accounts/_logo.html.erb

@@ -8,9 +8,9 @@
 } %>
 
 <% if account.plaid_account_id? && account.institution_domain.present? %>
-  <%= image_tag "https://logo.synthfinance.com/#{account.institution_domain}", class: "rounded-full #{size_classes[size]}" %>
+  <%= image_tag "https://logo.synthfinance.com/#{account.institution_domain}", class: "shrink-0 rounded-full #{size_classes[size]}" %>
 <% elsif account.logo.attached? %>
-  <%= image_tag account.logo, class: "rounded-full #{size_classes[size]}" %>
+  <%= image_tag account.logo, class: "shrink-0 rounded-full #{size_classes[size]}" %>
 <% else %>
   <%= circle_logo(account.name, hex: color || account.accountable.color, size: size) %>
 <% end %>

app/views/accounts/chart.html.erb

@@ -16,7 +16,7 @@
     <%= tag.span period.comparison_label, class: "text-secondary" %>
   </div>
 
-  <div class="h-64">
+  <div class="h-64 pb-4">
     <% if series.any? %>
       <div
         id="lineChart"

app/views/accounts/new.html.erb

@@ -1,14 +1,25 @@
 <%= render layout: "accounts/new/container", locals: { title: t(".title") } do %>
   <div class="text-sm">
-    <%= render "account_type", accountable: Depository.new %>
-    <%= render "account_type", accountable: Investment.new %>
-    <%= render "account_type", accountable: Crypto.new %>
-    <%= render "account_type", accountable: Property.new %>
-    <%= render "account_type", accountable: Vehicle.new %>
-    <%= render "account_type", accountable: CreditCard.new %>
-    <%= render "account_type", accountable: Loan.new %>
-    <%= render "account_type", accountable: OtherAsset.new %>
-    <%= render "account_type", accountable: OtherLiability.new %>
+    <% unless params[:classification] == "liability" %>
+      <%= render "account_type", accountable: Depository.new %>
+      <%= render "account_type", accountable: Investment.new %>
+      <%= render "account_type", accountable: Crypto.new %>
+      <%= render "account_type", accountable: Property.new %>
+      <%= render "account_type", accountable: Vehicle.new %>
+    <% end %>
+
+    <% unless params[:classification] == "asset" %>
+      <%= render "account_type", accountable: CreditCard.new %>
+      <%= render "account_type", accountable: Loan.new %>
+    <% end %>
+
+    <% unless params[:classification] == "liability" %>
+      <%= render "account_type", accountable: OtherAsset.new %>
+    <% end %>
+
+    <% unless params[:classification] == "asset" %>
+      <%= render "account_type", accountable: OtherLiability.new %>
+    <% end %>
 
     <% unless params[:return_to].present? %>
       <%= button_to imports_path(import: { type: "AccountImport" }),

app/views/accounts/sparkline.html.erb

@@ -6,6 +6,6 @@
 
     <%= tag.p @account.sparkline_series.trend.percent_formatted,
               style: "color: #{@account.sparkline_series.trend.color}",
-              class: "text-right text-xs font-medium text-primary" %>
+              class: "font-mono text-right text-xs font-medium text-primary" %>
   </div>
 <% end %>