From eb6bbb754dfe8c0fe1983d8257700660726d82ab Mon Sep 17 00:00:00 2001
From: Alessio Cappa <104093777+alessiocappa@users.noreply.github.com>
Date: Fri, 12 Dec 2025 10:43:10 +0100
Subject: [PATCH] Outlfows UI adjustments (#443)

* feat: combine icon + color in outflows section to optimize space on mobile

* fix: adjust spacing in outflows table

* fix: adjust padding and icon sizing
---
 .../pages/dashboard/_outflows_donut.html.erb  | 30 ++++++++++++++-----
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/app/views/pages/dashboard/_outflows_donut.html.erb b/app/views/pages/dashboard/_outflows_donut.html.erb
index 7751fa743..2657662c7 100644
--- a/app/views/pages/dashboard/_outflows_donut.html.erb
+++ b/app/views/pages/dashboard/_outflows_donut.html.erb
@@ -13,11 +13,10 @@
   <div class="px-4">
     <div class="flex flex-col lg:flex-row gap-8 items-center">
       <!-- Donut Chart -->
-      <div class="w-full lg:w-1/3 max-w-[300px]">
+      <div class="w-full lg:w-1/3 max-w-[300px] p-4">
         <div class="h-[300px] relative"
           data-controller="donut-chart"
           data-donut-chart-segments-value="<%= outflows_data[:categories].to_json %>"
-          data-donut-chart-segment-height-value="5"
           data-donut-chart-segment-opacity-value="0.9"
           data-donut-chart-extended-hover-value="true"
           data-donut-chart-hover-extension-value="3"
@@ -69,23 +68,38 @@
             </div>
           </div>
         </div>
-        <div class="py-3 shadow-border-xs rounded-lg bg-container font-medium text-sm min-w-fit max-w-full">
+        <div class="py-3 shadow-border-xs rounded-lg bg-container font-medium text-sm max-w-full">
           <% outflows_data[:categories].each_with_index do |category, idx| %>
             <%= link_to transactions_path(q: { categories: [category[:name]], start_date: period.date_range.first, end_date: period.date_range.last }),
-                class: "flex items-center justify-between mx-3 p-3 rounded-lg cursor-pointer group",
+                class: "flex items-center justify-between mx-3 p-3 rounded-lg cursor-pointer group gap-3",
                 data: {
                   turbo_frame: "_top",
                   category_id: category[:id],
                   action: "mouseenter->donut-chart#highlightSegment mouseleave->donut-chart#unhighlightSegment"
                 } do %>
               <div class="flex items-center gap-3 flex-1 min-w-0">
-                <div class="w-3 h-3 rounded-full flex-shrink-0" style="background-color: <%= category[:color] %>"></div>
-                <%= icon(category[:icon], class: "w-4 h-4 text-primary flex-shrink-0") %>
+                <div class="h-6 w-6 flex-shrink-0 group-hover:scale-105 transition-all duration-300 rounded-full flex justify-center items-center" 
+                  style="
+                    background-color: color-mix(in oklab, <%= category[:color] %> 10%, transparent);
+                    border-color: color-mix(in oklab, <%= category[:color] %> 10%, transparent);
+                    color: <%= category[:color] %>;">
+                  <% if category[:icon] %>
+                    <%= icon(category[:icon], color: "current", size: "sm") %>
+                  <% else %>
+                    <%= render DS::FilledIcon.new(
+                      variant: :text,
+                      hex_color: category[:color],
+                      text: category[:name],
+                      size: "sm",
+                      rounded: true
+                    ) %>
+                  <% end %>
+                </div>
                 <span class="text-sm font-medium text-primary truncate"><%= category[:name] %></span>
               </div>
-              <div class="flex items-center gap-4 flex-shrink-0">
+              <div class="flex items-center gap-4 flex-shrink-0 text-right">
                 <span class="text-sm font-medium text-primary whitespace-nowrap"><%= format_money Money.new(category[:amount], category[:currency]) %></span>
-                <span class="text-sm text-secondary whitespace-nowrap"><%= category[:percentage] %>%</span>
+                <span class="text-sm text-secondary whitespace-nowrap w-10 lg:w-15"><%= category[:percentage] %>%</span>
               </div>
             <% end %>
             <% if idx < outflows_data[:categories].size - 1 %>