feat: implement Priority 1 UI/UX improvements for enhanced user experience

- Convert heavy black buttons to clean outlined styles across all interfaces
- Improve table row spacing with better padding and hover states
- Enhance category pills with improved contrast and interactivity
- Add structured net worth display with proper breakdown formatting
- Implement responsive design improvements for mobile compatibility

Button improvements:
* btn-view: outlined blue for primary actions (View)
* btn-secondary: outlined gray for secondary actions (Edit)
* btn-danger: outlined red for destructive actions (Delete)
* btn-success: outlined green for success actions

Table enhancements:
* Increased row padding from py-4 to py-5 for better readability
* Added smooth hover transitions and zebra striping
* Responsive adjustments for mobile devices

Category pills:
* Changed to rounded-full design with borders
* Special dashed border styling for "Uncategorized" items
* Added hover indicators and improved click targets

Net worth display:
* Created dedicated net_worth_card component
* Clear visual hierarchy between total and breakdown
* Proper spacing and de-emphasized zero values

These changes significantly improve visual hierarchy and user experience
while maintaining the professional aesthetic and design consistency.

🤖 Generated with [Claude Code](https://claude.ai/code)

Author: mdstaff

.gitignore

@@ -39,5 +39,7 @@ npm-debug.log
 /data/*.db
 /data/*.db-*
 
-# Logs directory
-/logs/
+# Logs directory and log files
+/logs/
+*.log
+phoenix.log

assets/css/app.css

@@ -30,22 +30,58 @@
     @apply text-gray-600 font-medium;
   }
 
-  /* Table styling for holdings */
+  /* Table styling for holdings - improved spacing and hover states */
   .holdings-table {
     @apply min-w-full divide-y divide-gray-200;
   }
 
   .holdings-table th {
-    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50;
+    @apply px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50;
   }
 
   .holdings-table td {
-    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
+    @apply px-6 py-5 whitespace-nowrap text-sm text-gray-900;
+  }
+  
+  .holdings-table tbody tr {
+    @apply border-b border-gray-100 transition-all duration-150;
   }
 
   .holdings-table tbody tr:hover {
+    @apply bg-gray-50 shadow-sm;
+  }
+  
+  .holdings-table tbody tr:nth-child(even) {
+    @apply bg-gray-25;
+  }
+  
+  .holdings-table tbody tr:nth-child(even):hover {
+    @apply bg-gray-75;
+  }
+  
+  /* General table improvements */
+  .table-row {
+    @apply py-3 px-4 border-b border-gray-100 transition-all duration-150;
+  }
+  
+  .table-row:hover {
     @apply bg-gray-50;
   }
+  
+  /* Mobile responsive table improvements */
+  @media (max-width: 768px) {
+    .table-row {
+      @apply py-4 px-3;
+    }
+    
+    .holdings-table td {
+      @apply px-4 py-4;
+    }
+    
+    .holdings-table th {
+      @apply px-4 py-3;
+    }
+  }
 
   /* Currency formatting */
   .currency {
@@ -78,21 +114,29 @@
     @apply text-lg font-medium text-gray-900 mb-4;
   }
 
-  /* Button variants */
+  /* Button variants - Outlined styles for better visual hierarchy */
   .btn-primary {
     @apply bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200;
   }
 
+  /* View buttons - outlined blue (primary actions) */
+  .btn-view {
+    @apply bg-transparent border border-blue-500 text-blue-600 hover:bg-blue-500 hover:text-white font-medium py-2 px-4 rounded-md transition-all duration-200;
+  }
+  
+  /* Edit/Secondary buttons - outlined gray */
   .btn-secondary {
-    @apply bg-gray-200 hover:bg-gray-300 text-gray-900 font-medium py-2 px-4 rounded-md transition-colors duration-200;
+    @apply bg-transparent border border-gray-300 text-gray-700 hover:bg-gray-50 hover:border-gray-400 font-medium py-2 px-4 rounded-md transition-all duration-200;
   }
 
+  /* Delete buttons - outlined red (destructive actions) */
   .btn-danger {
-    @apply bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200;
+    @apply bg-transparent border border-red-300 text-red-600 hover:bg-red-50 hover:border-red-400 font-medium py-2 px-4 rounded-md transition-all duration-200;
   }
 
+  /* Success buttons - outlined green */
   .btn-success {
-    @apply bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200;
+    @apply bg-transparent border border-green-300 text-green-600 hover:bg-green-50 hover:border-green-400 font-medium py-2 px-4 rounded-md transition-all duration-200;
   }
 
   /* Status indicators */
@@ -178,6 +222,46 @@
     @apply bg-yellow-50 border-yellow-200;
   }
 
+  /* Net Worth Display Improvements */
+  .net-worth-display {
+    @apply flex flex-col gap-2;
+  }
+
+  .net-worth-breakdown {
+    @apply flex items-center gap-3 text-sm text-gray-600;
+  }
+
+  .breakdown-item {
+    @apply flex gap-1;
+  }
+
+  .breakdown-label {
+    @apply font-medium;
+  }
+
+  .breakdown-value {
+    @apply font-mono;
+  }
+
+  .cash-zero {
+    @apply opacity-60;
+  }
+
+  .separator {
+    @apply text-gray-300;
+  }
+
+  /* Responsive adjustments */
+  @media (max-width: 640px) {
+    .net-worth-breakdown {
+      @apply flex-col items-start gap-1;
+    }
+    
+    .separator {
+      @apply hidden;
+    }
+  }
+
   /* SymbolAutocomplete component styles */
   .symbol-autocomplete-dropdown {
     /* Smooth transitions for dropdown */

lib/ashfolio_web/components/category_tag.ex

@@ -57,13 +57,14 @@ defmodule AshfolioWeb.Components.CategoryTag do
     ~H"""
     <span
       class={[
-        "inline-flex items-center rounded font-medium select-none",
+        "inline-flex items-center rounded-full font-medium select-none border transition-all duration-150",
         size_classes(@size),
-        @clickable && "cursor-pointer hover:opacity-80 transition-opacity",
+        category_style_classes(assigns),
+        @clickable && "cursor-pointer hover:shadow-sm",
         "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500",
         @class
       ]}
-      style={"background-color: #{@background_color}; color: #{@text_color}"}
+      style={category_style(assigns)}
       title={@tooltip}
       role={(@clickable && "button") || "text"}
       tabindex={(@clickable && "0") || nil}
@@ -73,7 +74,7 @@ defmodule AshfolioWeb.Components.CategoryTag do
       {@rest}
     >
       <span
-        class="w-2 h-2 rounded-full mr-1 flex-shrink-0"
+        class="w-2 h-2 rounded-full mr-1.5 flex-shrink-0"
         style={"background-color: #{@category_color}"}
         aria-hidden="true"
       >
@@ -86,6 +87,9 @@ defmodule AshfolioWeb.Components.CategoryTag do
       ]}>
         {@category_name}
       </span>
+      <%= if @clickable do %>
+        <span class="ml-1 opacity-0 group-hover:opacity-50 transition-opacity text-xs" aria-hidden="true">→</span>
+      <% end %>
     </span>
     """
   end
@@ -138,9 +142,25 @@ defmodule AshfolioWeb.Components.CategoryTag do
     assign(assigns, :aria_label, aria_label)
   end
 
-  defp size_classes(:small), do: "text-xs px-1 py-0.5"
-  defp size_classes(:normal), do: "text-sm px-2 py-1"
-  defp size_classes(:large), do: "text-base px-3 py-1.5"
+  defp size_classes(:small), do: "text-xs px-2 py-1 min-h-6"
+  defp size_classes(:normal), do: "text-sm px-3 py-1.5 min-h-7"
+  defp size_classes(:large), do: "text-base px-4 py-2 min-h-8"
+  
+  defp category_style_classes(assigns) do
+    if assigns.category_name == "Uncategorized" do
+      "border-dashed hover:border-solid"
+    else
+      ""
+    end
+  end
+  
+  defp category_style(assigns) do
+    if assigns.category_name == "Uncategorized" do
+      "background-color: #F3F4F6; color: #1F2937; border-color: #9CA3AF;"
+    else
+      "background-color: #{assigns.background_color}; color: #{assigns.text_color}; border-color: #{assigns.category_color};"
+    end
+  end
 
   defp normalize_color(color) when is_binary(color) do
     case Regex.match?(~r/^#[0-9A-Fa-f]{6}$/, color) do

lib/ashfolio_web/components/core_components.ex

@@ -231,8 +231,8 @@ defmodule AshfolioWeb.CoreComponents do
     <button
       type={@type}
       class={[
-        "phx-submit-loading:opacity-75 rounded-lg bg-zinc-900 hover:bg-zinc-700 py-2 px-3",
-        "text-sm font-semibold leading-6 text-white active:text-white/80",
+        "phx-submit-loading:opacity-75 rounded-lg border border-gray-300 bg-transparent hover:bg-gray-50 hover:border-gray-400 py-2 px-3",
+        "text-sm font-semibold leading-6 text-gray-700 transition-all duration-200",
         @class
       ]}
       {@rest}
@@ -841,4 +841,50 @@ defmodule AshfolioWeb.CoreComponents do
     </div>
     """
   end
+
+  @doc """
+  Renders a specialized net worth card with proper breakdown display.
+
+  ## Examples
+
+      <.net_worth_card
+        title="Net Worth"
+        value="$265,750.00"
+        investment_value="$265,750.00"
+        cash_balance="$0.00"
+        data_testid="net-worth-total" />
+  """
+  attr :title, :string, required: true
+  attr :value, :string, required: true
+  attr :investment_value, :string, required: true
+  attr :cash_balance, :string, required: true
+  attr :class, :string, default: nil
+  attr :data_testid, :string, default: nil
+
+  def net_worth_card(assigns) do
+    ~H"""
+    <div class={["bg-white rounded-lg shadow p-6", @class]} data-testid={@data_testid}>
+      <div class="net-worth-display">
+        <div class="net-worth-total">
+          <p class="text-sm font-medium text-gray-600">{@title}</p>
+          <p class="text-2xl font-semibold text-gray-900">{@value}</p>
+        </div>
+        <div class="net-worth-breakdown">
+          <div class="breakdown-item">
+            <span class="breakdown-label">Investment</span>
+            <span class="breakdown-value">{@investment_value}</span>
+          </div>
+          <span class="separator">•</span>
+          <div class="breakdown-item">
+            <span class="breakdown-label">Cash</span>
+            <span class={[
+              "breakdown-value",
+              @cash_balance == "$0.00" && "cash-zero"
+            ]}>{@cash_balance}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    """
+  end
 end

lib/ashfolio_web/live/account_live/index.ex

@@ -453,7 +453,7 @@ defmodule AshfolioWeb.AccountLive.Index do
                     <!-- View Button -->
                     <.link
                       navigate={~p"/accounts/#{account.id}"}
-                      class="btn-secondary text-xs sm:text-sm px-2 sm:px-3 py-1 inline-flex items-center"
+                      class="btn-view text-xs sm:text-sm px-2 sm:px-3 py-1 inline-flex items-center"
                       title="View account details"
                       aria-label={"View account details for #{account.name}"}
                     >

lib/ashfolio_web/live/dashboard_live.ex

@@ -175,11 +175,11 @@ defmodule AshfolioWeb.DashboardLive do
           change={"#{@holdings_count} positions"}
           data_testid="holdings-count"
         />
-        <.stat_card
+        <.net_worth_card
           title="Net Worth"
           value={@net_worth_total}
-          change={"Inv: #{@net_worth_investment_value} • Cash: #{@net_worth_cash_balance}"}
-          positive={true}
+          investment_value={@net_worth_investment_value}
+          cash_balance={@net_worth_cash_balance}
           data_testid="net-worth-total"
         />
       </div>