From fcbce21cfabea0d1ea0d285cd56c434b5dc1ea0b Mon Sep 17 00:00:00 2001
From: Herculino Trotta <netotrotta@gmail.com>
Date: Fri, 1 Nov 2024 17:27:38 -0300
Subject: [PATCH] feat: color networth values based on sign

---
 app/templates/net_worth/net_worth.html | 38 +++++++++++++++-----------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/app/templates/net_worth/net_worth.html b/app/templates/net_worth/net_worth.html
index c5543d1..b9a9b0c 100644
--- a/app/templates/net_worth/net_worth.html
+++ b/app/templates/net_worth/net_worth.html
@@ -26,12 +26,14 @@
                   <div class="d-flex align-items-baseline w-100">
                       <div class="currency-name text-start font-monospace tw-text-gray-300">{{ currency.name }}</div>
                       <div class="dotted-line flex-grow-1"></div>
-                      <c-amount.display
-                            :amount="currency.amount"
-                            :prefix="currency.prefix"
-                            :suffix="currency.suffix"
-                            :decimal_places="currency.decimal_places"
-                            text-end></c-amount.display>
+                      <div class="{% if currency.amount > 0 %}tw-text-green-400{% elif currency.amount < 0 %}tw-text-red-400{% endif %}">
+                        <c-amount.display
+                              :amount="currency.amount"
+                              :prefix="currency.prefix"
+                              :suffix="currency.suffix"
+                              :decimal_places="currency.decimal_places"
+                              text-end></c-amount.display>
+                      </div>
                   </div>
               </div>
               {% endfor %}
@@ -60,11 +62,13 @@
                         <div class="text-start font-monospace tw-text-gray-300">
                           <span class="hierarchy-line-icon"></span>{{ account_data.name }}</div>
                         <div class="dotted-line flex-grow-1"></div>
-                        <c-amount.display
-                          :amount="account_data.balance"
-                          :prefix="account_data.currency.prefix"
-                          :suffix="account_data.currency.suffix"
-                          :decimal_places="account_data.currency.decimal_places"></c-amount.display>
+                        <div class="{% if account_data.balance > 0 %}tw-text-green-400{% elif account_data.balance < 0 %}tw-text-red-400{% endif %}">
+                          <c-amount.display
+                            :amount="account_data.balance"
+                            :prefix="account_data.currency.prefix"
+                            :suffix="account_data.currency.suffix"
+                            :decimal_places="account_data.currency.decimal_places"></c-amount.display>
+                        </div>
                     </div>
                   </div>
                   {% if account_data.exchange %}
@@ -83,11 +87,13 @@
                     <div class="d-flex align-items-baseline w-100">
                         <div class="currency-name text-start font-monospace tw-text-gray-300">{{ account_data.name }}</div>
                         <div class="dotted-line flex-grow-1"></div>
-                        <c-amount.display
-                          :amount="account_data.balance"
-                          :prefix="account_data.currency.prefix"
-                          :suffix="account_data.currency.suffix"
-                          :decimal_places="account_data.currency.decimal_places"></c-amount.display>
+                        <div class="{% if account_data.balance > 0 %}tw-text-green-400{% elif account_data.balance < 0 %}tw-text-red-400{% endif %}">
+                          <c-amount.display
+                            :amount="account_data.balance"
+                            :prefix="account_data.currency.prefix"
+                            :suffix="account_data.currency.suffix"
+                            :decimal_places="account_data.currency.decimal_places"></c-amount.display>
+                        </div>
                     </div>
                 </div>
                 {% if account_data.exchange %}