feat: more changes and fixes

app/templates/cotton/amount/display.html

@@ -1,10 +1,15 @@
 {% load currency_display %}
 
+{% currency_display amount=amount prefix=prefix suffix=suffix decimal_places=decimal_places as formatted_amount %}
+
 {% if not divless %}
 <div class="{% if text_end %}text-end{% elif text_start %}text-start{% endif %}">
 {% endif %}
   <span class="amount{% if color == 'grey' or color == "gray" %} text-exchange-rate{% elif color == 'green' %} text-income {% elif color == 'red' %} text-expense{% endif %} font-medium {{ custom_class }}"
-       data-original-value="{% currency_display amount=amount prefix=prefix suffix=suffix decimal_places=decimal_places %}"
+       data-original-sign="{{ formatted_amount.sign }}"
+       data-original-prefix="{{ formatted_amount.prefix }}"
+       data-original-amount="{{ formatted_amount.amount }}"
+       data-original-suffix="{{ formatted_amount.suffix }}"
        data-amount="{{ amount|floatformat:"-40u" }}">
   </span><span>{{ slot }}</span>
 {% if not divless %}

app/templates/cotton/msg/empty.html

@@ -3,7 +3,7 @@
     <div class="text-center">
       <i class="{% if icon %}{{ icon }}{% else %}fa-solid fa-circle-xmark{% endif %} text-6xl"></i>
       <p class="text-lg mt-4 mb-0">{{ title }}</p>
-      <p class="text-gray-500">{{ subtitle }}</p>
+      <p class="text-subtle">{{ subtitle }}</p>
     </div>
   </div>
 </div>

app/templates/cotton/transaction/item.html

@@ -1,7 +1,7 @@
 {% load markdown %}
 {% load i18n %}
 <div
-    class="transaction {% if transaction.type == "EX" %}expense{% else %}income{% endif %} group/transaction relative group-hover/transaction:z-50 hover:z-50">
+    class="transaction {% if transaction.type == "EX" %}expense{% else %}income{% endif %} group/transaction relative">
   <div class="flex my-1">
     {% if not disable_selection or not dummy %}
       <label class="px-3 flex! items-center justify-center">
@@ -16,7 +16,7 @@
       <div class="flex flex-wrap font-mono text-sm items-center">
         <div class="lg:w-auto w-full flex items-center text-2xl lg:text-xl lg:text-center text-center p-0 cursor-pointer">
           {% if not transaction.deleted %}
-            <a class="no-underline p-3 text-gray-500!"
+            <a class="no-underline p-3 text-base-content/50"
                title="{% if transaction.is_paid %}{% trans 'Paid' %}{% else %}{% trans 'Projected' %}{% endif %}"
                role="button"
                 {% if not dummy %}
@@ -27,7 +27,7 @@
                   class="fa-regular fa-circle"></i>{% endif %}
             </a>
           {% else %}
-            <div class="no-underline p-3 text-gray-500!"
+            <div class="no-underline p-3 text-base-content/50"
                  title="{% if transaction.is_paid %}{% trans 'Paid' %}{% else %}{% trans 'Projected' %}{% endif %}">
               {% if transaction.is_paid %}<i class="fa-regular fa-circle-check"></i>{% else %}<i
                   class="fa-regular fa-circle"></i>{% endif %}
@@ -138,16 +138,16 @@
           <div class="z-1000">
             {#      Item actions#}
             <div
-                class="card transaction-actions absolute! left-1/2 -translate-x-1/2 -translate-y-1/2 top-0 invisible group-hover/transaction:visible! flex flex-row bg-base-300">
+                class="card card-border-base-100 transaction-actions absolute left-1/2 -translate-x-1/2 -translate-y-1/2 top-0 invisible group-hover/transaction:visible flex flex-row bg-base-200">
               <div class="card-body p-1 shadow-lg flex flex-row gap-1">
                 {% if not transaction.deleted %}
-                  <a class="btn btn-neutral btn-sm transaction-action"
+                  <a class="btn btn-soft btn-sm transaction-action"
                       role="button"
                       hx-get="{% url 'transaction_edit' transaction_id=transaction.id %}"
                       hx-target="#generic-offcanvas" hx-swap="innerHTML"
                       data-tippy-content="{% translate "Edit" %}">
                     <i class="fa-solid fa-pencil fa-fw"></i></a>
-                  <a class="btn btn-neutral btn-sm transaction-action"
+                  <a class="btn btn-error btn-soft btn-sm transaction-action"
                       role="button"
                       hx-delete="{% url 'transaction_delete' transaction_id=transaction.id %}"
                       hx-trigger='confirmed'
@@ -156,32 +156,32 @@
                       data-title="{% translate "Are you sure?" %}"
                       data-text="{% translate "You won't be able to revert this!" %}"
                       data-confirm-text="{% translate "Yes, delete it!" %}"
-                      _="install prompt_swal"><i class="fa-solid fa-trash fa-fw text-error"></i>
+                      _="install prompt_swal"><i class="fa-solid fa-trash fa-fw"></i>
                   </a>
-                    <button class="btn btn-neutral btn-sm transaction-action" data-bs-toggle="dropdown" data-bs-container="body" aria-expanded="false">
+                    <button class="btn btn-soft btn-sm transaction-action" data-bs-toggle="dropdown" data-bs-container="body" aria-expanded="false">
                       <i class="fa-solid fa-ellipsis fa-fw"></i>
                     </button>
                     <ul class="dropdown-menu dropdown-menu-end dropdown-menu-md-start menu w-max relative">
                       <div class="absolute inset-[0rem_-3rem_-3rem_-3rem] pointer-events-auto -z-10"></div>
                       {% if transaction.account.is_untracked_by %}
-                        <li>
-                          <a class="disabled flex items-center" aria-disabled="true">
+                        <li class="menu-disabled" aria-disabled="true">
+                          <a class="flex items-center">
                             <i class="fa-solid fa-eye fa-fw mr-2"></i>
                             <div>
                               {% translate 'Show on summaries' %}
                               <div
-                                  class="block text-gray-500 text-xs font-medium">{% translate 'Controlled by account' %}</div>
+                                  class="block text-base-content/60 text-xs font-medium">{% translate 'Controlled by account' %}</div>
                             </div>
                           </a>
                         </li>
                       {% elif transaction.category.mute %}
-                        <li>
-                          <a class="disabled flex items-center" aria-disabled="true">
+                        <li class="menu-disabled" aria-disabled="true">
+                          <a class="flex items-center">
                             <i class="fa-solid fa-eye fa-fw mr-2"></i>
                             <div>
                               {% translate 'Show on summaries' %}
                               <div
-                                  class="block text-gray-500 text-xs font-medium">{% translate 'Controlled by category' %}</div>
+                                  class="block text-base-content/60 text-xs font-medium">{% translate 'Controlled by category' %}</div>
                             </div>
                           </a>
                         </li>
@@ -218,13 +218,13 @@
                     </ul>
                 {% else %}
                   <div class="tooltip" data-tippy-content="{% translate "Restore" %}">
-                    <a class="btn btn-secondary btn-sm transaction-action"
+                    <a class="btn btn-success btn-soft btn-sm transaction-action"
                        role="button"
                        hx-get="{% url 'transaction_undelete' transaction_id=transaction.id %}"><i
                         class="fa-solid fa-trash-arrow-up"></i></a>
                   </div>
                   <div class="tooltip" data-tippy-content="{% translate "Delete" %}">
-                    <a class="btn btn-secondary btn-sm transaction-action"
+                    <a class="btn btn-error btn-soft btn-sm transaction-action"
                        role="button"
                        hx-delete="{% url 'transaction_delete' transaction_id=transaction.id %}"
                        hx-trigger='confirmed'

app/templates/cotton/ui/account_card.html

@@ -2,204 +2,165 @@
 {% load i18n %}
 <div class="card bg-base-100 shadow-md card-border border-base-300">
   <div class="card-body">
-    {% if account.account.group %}
-      <div class="text-sm mb-2">
-        <span class="badge badge-primary">{{ account.account.group }}</span>
-      </div>
-    {% endif %}
-    <h5 class="card-title">
-      {{ account.account.name }}
+    <h5 class="card-title mb-4">
+      {% if account.account.group %}<span class="badge badge-primary badge-outline">{{ account.account.group }}</span>{% endif %} {{ account.account.name }}
     </h5>
-    <div class="flex justify-between items-baseline mt-2">
-      <div class="text-end ">
-        <div class="text-subtle">{% translate 'projected income' %}</div>
+    <div class="card-data-section">
+      <div class="card-data-row">
+        <span class="card-data-label">{% translate 'projected income' %}</span>
+        <div class="card-data-values">
+          {% if account.income_projected != 0 %}
+            <c-amount.display
+                :amount="account.income_projected"
+                :prefix="account.currency.prefix"
+                :suffix="account.currency.suffix"
+                :decimal_places="account.currency.decimal_places"
+                color="green"></c-amount.display>
+            {% if account.exchanged and account.exchanged.income_projected %}
+              <c-amount.display
+                  :amount="account.exchanged.income_projected"
+                  :prefix="account.exchanged.currency.prefix"
+                  :suffix="account.exchanged.currency.suffix"
+                  :decimal_places="account.exchanged.currency.decimal_places"
+                  color="gray"></c-amount.display>
+            {% endif %}
+          {% else %}
+            <span class="font-semibold">-</span>
+          {% endif %}
+        </div>
       </div>
-      <div class="dotted-line grow"></div>
-      {% if account.income_projected != 0 %}
-      <div class="text-end">
-        <c-amount.display
-            :amount="account.income_projected"
-            :prefix="account.currency.prefix"
-            :suffix="account.currency.suffix"
-            :decimal_places="account.currency.decimal_places"
-            color="green"></c-amount.display>
+      <div class="card-data-row">
+        <span class="card-data-label">{% translate 'projected expenses' %}</span>
+        <div class="card-data-values">
+          {% if account.expense_projected != 0 %}
+            <c-amount.display
+                :amount="account.expense_projected"
+                :prefix="account.currency.prefix"
+                :suffix="account.currency.suffix"
+                :decimal_places="account.currency.decimal_places"
+                color="red"></c-amount.display>
+            {% if account.exchanged and account.exchanged.expense_projected %}
+              <c-amount.display
+                  :amount="account.exchanged.expense_projected"
+                  :prefix="account.exchanged.currency.prefix"
+                  :suffix="account.exchanged.currency.suffix"
+                  :decimal_places="account.exchanged.currency.decimal_places"
+                  color="gray"></c-amount.display>
+            {% endif %}
+          {% else %}
+            <span class="font-semibold">-</span>
+          {% endif %}
+        </div>
       </div>
-      {% else %}
-        <div class="text-end ">-</div>
-      {% endif %}
-    </div>
-    {% if account.exchanged and account.exchanged.income_projected %}
-      <div class="text-end">
-        <c-amount.display
-            :amount="account.exchanged.income_projected"
-            :prefix="account.exchanged.currency.prefix"
-            :suffix="account.exchanged.currency.suffix"
-            :decimal_places="account.exchanged.currency.decimal_places"
-            color="gray"></c-amount.display>
-      </div>
-    {% endif %}
-    <div class="flex justify-between items-baseline mt-2">
-      <div class="text-end ">
-        <div class="text-subtle">{% translate 'projected expenses' %}</div>
-      </div>
-      <div class="dotted-line grow"></div>
-      <div>
-        {% if account.expense_projected != 0 %}
-        <div class="text-end">
+      <div class="card-data-row">
+        <span class="card-data-label">{% translate 'projected total' %}</span>
+        <div class="card-data-values">
           <c-amount.display
-              :amount="account.expense_projected"
+              :amount="account.total_projected"
               :prefix="account.currency.prefix"
               :suffix="account.currency.suffix"
               :decimal_places="account.currency.decimal_places"
-              color="red"></c-amount.display>
+              color="{% if account.total_projected > 0 %}green{% elif account.total_projected < 0 %}red{% endif %}"></c-amount.display>
+          {% if account.exchanged.total_projected and account.exchanged.total_projected %}
+            <c-amount.display
+                :amount="account.exchanged.total_projected"
+                :prefix="account.exchanged.currency.prefix"
+                :suffix="account.exchanged.currency.suffix"
+                :decimal_places="account.exchanged.currency.decimal_places"
+                color="gray"></c-amount.display>
+          {% endif %}
         </div>
-        {% else %}
-          <div class="text-end ">-</div>
-        {% endif %}
       </div>
     </div>
-    {% if account.exchanged and account.exchanged.expense_projected %}
-      <div class="text-end">
-        <c-amount.display
-            :amount="account.exchanged.expense_projected"
-            :prefix="account.exchanged.currency.prefix"
-            :suffix="account.exchanged.currency.suffix"
-            :decimal_places="account.exchanged.currency.decimal_places"
-            color="gray"></c-amount.display>
-      </div>
-    {% endif %}
-    <div class="flex justify-between items-baseline mt-2">
-      <div class="text-end ">
-        <div class="text-subtle">{% translate 'projected total' %}</div>
-      </div>
-      <div class="dotted-line grow"></div>
-      <div
-          class="text-end ">
-        <c-amount.display
-            :amount="account.total_projected"
-            :prefix="account.currency.prefix"
-            :suffix="account.currency.suffix"
-            :decimal_places="account.currency.decimal_places"
-            color="{% if account.total_projected > 0 %}green{% elif account.total_projected < 0 %}red{% endif %}"></c-amount.display>
-      </div>
-    </div>
-    {% if account.exchanged.total_projected and account.exchanged.total_projected %}
-      <div class="text-end">
-        <c-amount.display
-            :amount="account.exchanged.total_projected"
-            :prefix="account.exchanged.currency.prefix"
-            :suffix="account.exchanged.currency.suffix"
-            :decimal_places="account.exchanged.currency.decimal_places"
-            color="gray"></c-amount.display>
-      </div>
-    {% endif %}
-    <hr class="my-3">
-    <div class="flex justify-between items-baseline mt-2">
-      <div class="text-end ">
-        <div class="text-subtle">{% translate 'current income' %}</div>
-      </div>
-      <div class="dotted-line grow"></div>
-      {% if account.income_current != 0 %}
-      <div class="text-end">
-        <c-amount.display
-            :amount="account.income_current"
-            :prefix="account.currency.prefix"
-            :suffix="account.currency.suffix"
-            :decimal_places="account.currency.decimal_places"
-            color="green"></c-amount.display>
-      </div>
-      {% else %}
-        <div class="text-end ">-</div>
-      {% endif %}
-    </div>
-    {% if account.exchanged and account.exchanged.income_current %}
-      <div class="text-end">
-        <c-amount.display
-            :amount="account.exchanged.income_current"
-            :prefix="account.exchanged.currency.prefix"
-            :suffix="account.exchanged.currency.suffix"
-            :decimal_places="account.exchanged.currency.decimal_places"
-            color="gray"></c-amount.display>
-      </div>
-    {% endif %}
-    <div class="flex justify-between items-baseline mt-2">
-      <div class="text-end ">
-        <div class="text-subtle">{% translate 'current expenses' %}</div>
-      </div>
-      <div class="dotted-line"></div>
-      {% if account.expense_current != 0 %}
-      <div class="text-end">
-        <c-amount.display
-            :amount="account.expense_current"
-            :prefix="account.currency.prefix"
-            :suffix="account.currency.suffix"
-            :decimal_places="account.currency.decimal_places"
-            color="red"></c-amount.display>
-      </div>
-      {% else %}
-        <div class="text-end ">-</div>
-      {% endif %}
-    </div>
-    {% if account.exchanged and account.exchanged.expense_current %}
-      <div class="text-end">
-        <c-amount.display
-            :amount="account.exchanged.expense_current"
-            :prefix="account.exchanged.currency.prefix"
-            :suffix="account.exchanged.currency.suffix"
-            :decimal_places="account.exchanged.currency.decimal_places"
-            color="gray"></c-amount.display>
-      </div>
-    {% endif %}
-    <div class="flex justify-between items-baseline mt-2">
-      <div class="text-end ">
-        <div class="text-subtle">{% translate 'current total' %}</div>
-      </div>
-      <div class="dotted-linegrow"></div>
-      <div class="text-end ">
-        <c-amount.display
-            :amount="account.total_current"
-            :prefix="account.currency.prefix"
-            :suffix="account.currency.suffix"
-            :decimal_places="account.currency.decimal_places"
-            color="{% if account.total_current > 0 %}green{% elif account.total_current < 0 %}red{% endif %}"></c-amount.display>
-      </div>
-    </div>
-    {% if account.exchanged and account.exchanged.total_current %}
-      <div class="text-end">
-        <c-amount.display
-            :amount="account.exchanged.total_current"
-            :prefix="account.exchanged.currency.prefix"
-            :suffix="account.exchanged.currency.suffix"
-            :decimal_places="account.exchanged.currency.decimal_places"
-            color="gray"></c-amount.display>
-      </div>
-    {% endif %}
-    <div>
-      <hr class="my-3">
-      <div class="flex justify-between items-baseline mt-2">
-        <div class="text-end ">
-          <div class="text-subtle">{% translate 'final total' %}</div>
+    <hr class="card-data-divider" />
+    <div class="card-data-section">
+      <div class="card-data-row">
+        <span class="card-data-label">{% translate 'current income' %}</span>
+        <div class="card-data-values">
+          {% if account.income_current != 0 %}
+            <c-amount.display
+                :amount="account.income_current"
+                :prefix="account.currency.prefix"
+                :suffix="account.currency.suffix"
+                :decimal_places="account.currency.decimal_places"
+                color="green"></c-amount.display>
+            {% if account.exchanged and account.exchanged.income_current %}
+              <c-amount.display
+                  :amount="account.exchanged.income_current"
+                  :prefix="account.exchanged.currency.prefix"
+                  :suffix="account.exchanged.currency.suffix"
+                  :decimal_places="account.exchanged.currency.decimal_places"
+                  color="gray"></c-amount.display>
+            {% endif %}
+          {% else %}
+            <span class="font-semibold">-</span>
+          {% endif %}
         </div>
-        <div class="dotted-line grow"></div>
-        <div class="text-end ">
+      </div>
+      <div class="card-data-row">
+        <span class="card-data-label">{% translate 'current expenses' %}</span>
+        <div class="card-data-values">
+          {% if account.expense_current != 0 %}
+            <c-amount.display
+                :amount="account.expense_current"
+                :prefix="account.currency.prefix"
+                :suffix="account.currency.suffix"
+                :decimal_places="account.currency.decimal_places"
+                color="red"></c-amount.display>
+            {% if account.exchanged and account.exchanged.expense_current %}
+              <c-amount.display
+                  :amount="account.exchanged.expense_current"
+                  :prefix="account.exchanged.currency.prefix"
+                  :suffix="account.exchanged.currency.suffix"
+                  :decimal_places="account.exchanged.currency.decimal_places"
+                  color="gray"></c-amount.display>
+            {% endif %}
+          {% else %}
+            <span class="font-semibold">-</span>
+          {% endif %}
+        </div>
+      </div>
+      <div class="card-data-row">
+        <span class="card-data-label">{% translate 'current total' %}</span>
+        <div class="card-data-values">
+          <c-amount.display
+              :amount="account.total_current"
+              :prefix="account.currency.prefix"
+              :suffix="account.currency.suffix"
+              :decimal_places="account.currency.decimal_places"
+              color="{% if account.total_current > 0 %}green{% elif account.total_current < 0 %}red{% endif %}"></c-amount.display>
+          {% if account.exchanged and account.exchanged.total_current %}
+            <c-amount.display
+                :amount="account.exchanged.total_current"
+                :prefix="account.exchanged.currency.prefix"
+                :suffix="account.exchanged.currency.suffix"
+                :decimal_places="account.exchanged.currency.decimal_places"
+                color="gray"></c-amount.display>
+          {% endif %}
+        </div>
+      </div>
+    </div>
+    <hr class="card-data-divider" />
+    <div class="card-data-section">
+      <div class="card-data-row">
+        <span class="card-data-label">{% translate 'final total' %}</span>
+        <div class="card-data-values">
           <c-amount.display
               :amount="account.total_final"
               :prefix="account.currency.prefix"
               :suffix="account.currency.suffix"
               :decimal_places="account.currency.decimal_places"
               color="{% if account.total_final > 0 %}green{% elif account.total_final < 0 %}red{% endif %}"></c-amount.display>
+          {% if account.exchanged and account.exchanged.total_final %}
+            <c-amount.display
+                :amount="account.exchanged.total_final"
+                :prefix="account.exchanged.currency.prefix"
+                :suffix="account.exchanged.currency.suffix"
+                :decimal_places="account.exchanged.currency.decimal_places"
+                color="gray"></c-amount.display>
+          {% endif %}
         </div>
       </div>
-      {% if account.exchanged and account.exchanged.total_final %}
-        <div class="text-end">
-          <c-amount.display
-              :amount="account.exchanged.total_final"
-              :prefix="account.exchanged.currency.prefix"
-              :suffix="account.exchanged.currency.suffix"
-              :decimal_places="account.exchanged.currency.decimal_places"
-              color="gray"></c-amount.display>
-        </div>
-      {% endif %}
     </div>
     {% with p=percentages|get_dict_item:account_id %}
       <div class="my-3">

app/templates/cotton/ui/currency_card.html

@@ -2,198 +2,165 @@
 {% load i18n %}
 <div class="col card bg-base-100 shadow card-border">
   <div class="card-body">
-    <h5 class="card-title">
+    <h5 class="card-title mb-4">
       {{ currency.currency.name }}
     </h5>
-    <div class="flex justify-between items-baseline mt-2">
-      <div class="text-end">
-        <div class="text-subtle">{% translate 'projected income' %}</div>
+    <div class="card-data-section">
+      <div class="card-data-row">
+        <span class="card-data-label">{% translate 'projected income' %}</span>
+        <div class="card-data-values">
+          {% if currency.income_projected != 0 %}
+            <c-amount.display
+                :amount="currency.income_projected"
+                :prefix="currency.currency.prefix"
+                :suffix="currency.currency.suffix"
+                :decimal_places="currency.currency.decimal_places"
+                color="green"></c-amount.display>
+            {% if currency.exchanged and currency.exchanged.income_projected %}
+              <c-amount.display
+                  :amount="currency.exchanged.income_projected"
+                  :prefix="currency.exchanged.currency.prefix"
+                  :suffix="currency.exchanged.currency.suffix"
+                  :decimal_places="currency.exchanged.currency.decimal_places"
+                  color="gray"></c-amount.display>
+            {% endif %}
+          {% else %}
+            <span class="font-semibold">-</span>
+          {% endif %}
+        </div>
       </div>
-      <div class="dotted-line grow"></div>
-      {% if currency.income_projected != 0 %}
-      <div class="text-end">
-        <c-amount.display
-            :amount="currency.income_projected"
-            :prefix="currency.currency.prefix"
-            :suffix="currency.currency.suffix"
-            :decimal_places="currency.currency.decimal_places"
-            color="green"></c-amount.display>
+      <div class="card-data-row">
+        <span class="card-data-label">{% translate 'projected expenses' %}</span>
+        <div class="card-data-values">
+          {% if currency.expense_projected != 0 %}
+            <c-amount.display
+                :amount="currency.expense_projected"
+                :prefix="currency.currency.prefix"
+                :suffix="currency.currency.suffix"
+                :decimal_places="currency.currency.decimal_places"
+                color="red"></c-amount.display>
+            {% if currency.exchanged and currency.exchanged.expense_projected %}
+              <c-amount.display
+                  :amount="currency.exchanged.expense_projected"
+                  :prefix="currency.exchanged.currency.prefix"
+                  :suffix="currency.exchanged.currency.suffix"
+                  :decimal_places="currency.exchanged.currency.decimal_places"
+                  color="gray"></c-amount.display>
+            {% endif %}
+          {% else %}
+            <span class="font-semibold">-</span>
+          {% endif %}
+        </div>
       </div>
-      {% else %}
-      <div class="text-end">-</div>
-      {% endif %}
-    </div>
-    {% if currency.exchanged and currency.exchanged.income_projected %}
-      <div class="text-end">
-        <c-amount.display
-            :amount="currency.exchanged.income_projected"
-            :prefix="currency.exchanged.currency.prefix"
-            :suffix="currency.exchanged.currency.suffix"
-            :decimal_places="currency.exchanged.currency.decimal_places"
-            color="gray"></c-amount.display>
-      </div>
-    {% endif %}
-    <div class="flex justify-between items-baseline mt-2">
-      <div class="text-end">
-        <div class="text-subtle">{% translate 'projected expenses' %}</div>
-      </div>
-      <div class="dotted-line grow"></div>
-      <div>
-        {% if currency.expense_projected != 0 %}
-        <div class="text-end">
+      <div class="card-data-row">
+        <span class="card-data-label">{% translate 'projected total' %}</span>
+        <div class="card-data-values">
           <c-amount.display
-              :amount="currency.expense_projected"
+              :amount="currency.total_projected"
               :prefix="currency.currency.prefix"
               :suffix="currency.currency.suffix"
               :decimal_places="currency.currency.decimal_places"
-              color="red"></c-amount.display>
+              color="{% if currency.total_projected > 0 %}green{% elif currency.total_projected < 0 %}red{% endif %}"></c-amount.display>
+          {% if currency.exchanged.total_projected and currency.exchanged.total_projected %}
+            <c-amount.display
+                :amount="currency.exchanged.total_projected"
+                :prefix="currency.exchanged.currency.prefix"
+                :suffix="currency.exchanged.currency.suffix"
+                :decimal_places="currency.exchanged.currency.decimal_places"
+                color="gray"></c-amount.display>
+          {% endif %}
         </div>
-        {% else %}
-          <div class="text-end">-</div>
-        {% endif %}
       </div>
     </div>
-    {% if currency.exchanged and currency.exchanged.expense_projected %}
-      <div class="text-end">
-        <c-amount.display
-            :amount="currency.exchanged.expense_projected"
-            :prefix="currency.exchanged.currency.prefix"
-            :suffix="currency.exchanged.currency.suffix"
-            :decimal_places="currency.exchanged.currency.decimal_places"
-            color="gray"></c-amount.display>
-      </div>
-    {% endif %}
-    <div class="flex justify-between items-baseline mt-2">
-      <div class="text-end">
-        <div class="text-subtle">{% translate 'projected total' %}</div>
-      </div>
-      <div class="dotted-linegrow"></div>
-      <div class="text-end">
-        <c-amount.display
-            :amount="currency.total_projected"
-            :prefix="currency.currency.prefix"
-            :suffix="currency.currency.suffix"
-            :decimal_places="currency.currency.decimal_places"
-            color="{% if currency.total_projected > 0 %}green{% elif currency.total_projected < 0 %}red{% endif %}"></c-amount.display>
-      </div>
-    </div>
-    {% if currency.exchanged.total_projected and currency.exchanged.total_projected %}
-      <div class="text-end">
-        <c-amount.display
-            :amount="currency.exchanged.total_projected"
-            :prefix="currency.exchanged.currency.prefix"
-            :suffix="currency.exchanged.currency.suffix"
-            :decimal_places="currency.exchanged.currency.decimal_places"
-            color="gray"></c-amount.display>
-      </div>
-    {% endif %}
-    <hr class="my-3 hr">
-    <div class="flex justify-between items-baseline mt-2">
-      <div class="text-end">
-        <div class="text-subtle">{% translate 'current income' %}</div>
-      </div>
-      <div class="dotted-line grow"></div>
-      {% if currency.income_current != 0 %}
-      <div class="text-end">
-        <c-amount.display
-            :amount="currency.income_current"
-            :prefix="currency.currency.prefix"
-            :suffix="currency.currency.suffix"
-            :decimal_places="currency.currency.decimal_places"
-            color="green"></c-amount.display>
-      </div>
-      {% else %}
-        <div class="text-end">-</div>
-      {% endif %}
-    </div>
-    {% if currency.exchanged and currency.exchanged.income_current %}
-      <div class="text-end">
-        <c-amount.display
-            :amount="currency.exchanged.income_current"
-            :prefix="currency.exchanged.currency.prefix"
-            :suffix="currency.exchanged.currency.suffix"
-            :decimal_places="currency.exchanged.currency.decimal_places"
-            color="gray"></c-amount.display>
-      </div>
-    {% endif %}
-    <div class="flex justify-between items-baseline mt-2">
-      <div class="text-end">
-        <div class="text-subtle">{% translate 'current expenses' %}</div>
-      </div>
-      <div class="dotted-line grow"></div>
-      {% if currency.expense_current != 0 %}
-      <div class="text-end">
-        <c-amount.display
-            :amount="currency.expense_current"
-            :prefix="currency.currency.prefix"
-            :suffix="currency.currency.suffix"
-            :decimal_places="currency.currency.decimal_places"
-            color="red"></c-amount.display>
-      </div>
-      {% else %}
-        <div class="text-end">-</div>
-      {% endif %}
-    </div>
-    {% if currency.exchanged and currency.exchanged.expense_current %}
-      <div class="text-end">
-        <c-amount.display
-            :amount="currency.exchanged.expense_current"
-            :prefix="currency.exchanged.currency.prefix"
-            :suffix="currency.exchanged.currency.suffix"
-            :decimal_places="currency.exchanged.currency.decimal_places"
-            color="gray"></c-amount.display>
-      </div>
-    {% endif %}
-    <div class="flex justify-between items-baseline mt-2">
-      <div class="text-end">
-        <div class="text-subtle">{% translate 'current total' %}</div>
-      </div>
-      <div class="dotted-line grow"></div>
-      <div class="text-end">
-        <c-amount.display
-            :amount="currency.total_current"
-            :prefix="currency.currency.prefix"
-            :suffix="currency.currency.suffix"
-            :decimal_places="currency.currency.decimal_places"
-            color="{% if currency.total_current > 0 %}green{% elif currency.total_current < 0 %}red{% endif %}"></c-amount.display>
-      </div>
-    </div>
-    {% if currency.exchanged and currency.exchanged.total_current %}
-      <div class="text-end">
-        <c-amount.display
-            :amount="currency.exchanged.total_current"
-            :prefix="currency.exchanged.currency.prefix"
-            :suffix="currency.exchanged.currency.suffix"
-            :decimal_places="currency.exchanged.currency.decimal_places"
-            color="gray"></c-amount.display>
-      </div>
-    {% endif %}
-    <div>
-      <hr class="my-3 hr">
-      <div class="flex justify-between items-baseline mt-2">
-        <div class="text-end">
-          <div class="text-subtle">{% translate 'final total' %}</div>
+    <hr class="card-data-divider" />
+    <div class="card-data-section">
+      <div class="card-data-row">
+        <span class="card-data-label">{% translate 'current income' %}</span>
+        <div class="card-data-values">
+          {% if currency.income_current != 0 %}
+            <c-amount.display
+                :amount="currency.income_current"
+                :prefix="currency.currency.prefix"
+                :suffix="currency.currency.suffix"
+                :decimal_places="currency.currency.decimal_places"
+                color="green"></c-amount.display>
+            {% if currency.exchanged and currency.exchanged.income_current %}
+              <c-amount.display
+                  :amount="currency.exchanged.income_current"
+                  :prefix="currency.exchanged.currency.prefix"
+                  :suffix="currency.exchanged.currency.suffix"
+                  :decimal_places="currency.exchanged.currency.decimal_places"
+                  color="gray"></c-amount.display>
+            {% endif %}
+          {% else %}
+            <span class="font-semibold">-</span>
+          {% endif %}
         </div>
-        <div class="dotted-line grow"></div>
-        <div class="text-end">
+      </div>
+      <div class="card-data-row">
+        <span class="card-data-label">{% translate 'current expenses' %}</span>
+        <div class="card-data-values">
+          {% if currency.expense_current != 0 %}
+            <c-amount.display
+                :amount="currency.expense_current"
+                :prefix="currency.currency.prefix"
+                :suffix="currency.currency.suffix"
+                :decimal_places="currency.currency.decimal_places"
+                color="red"></c-amount.display>
+            {% if currency.exchanged and currency.exchanged.expense_current %}
+              <c-amount.display
+                  :amount="currency.exchanged.expense_current"
+                  :prefix="currency.exchanged.currency.prefix"
+                  :suffix="currency.exchanged.currency.suffix"
+                  :decimal_places="currency.exchanged.currency.decimal_places"
+                  color="gray"></c-amount.display>
+            {% endif %}
+          {% else %}
+            <span class="font-semibold">-</span>
+          {% endif %}
+        </div>
+      </div>
+      <div class="card-data-row">
+        <span class="card-data-label">{% translate 'current total' %}</span>
+        <div class="card-data-values">
+          <c-amount.display
+              :amount="currency.total_current"
+              :prefix="currency.currency.prefix"
+              :suffix="currency.currency.suffix"
+              :decimal_places="currency.currency.decimal_places"
+              color="{% if currency.total_current > 0 %}green{% elif currency.total_current < 0 %}red{% endif %}"></c-amount.display>
+          {% if currency.exchanged and currency.exchanged.total_current %}
+            <c-amount.display
+                :amount="currency.exchanged.total_current"
+                :prefix="currency.exchanged.currency.prefix"
+                :suffix="currency.exchanged.currency.suffix"
+                :decimal_places="currency.exchanged.currency.decimal_places"
+                color="gray"></c-amount.display>
+          {% endif %}
+        </div>
+      </div>
+    </div>
+    <hr class="card-data-divider" />
+    <div class="card-data-section">
+      <div class="card-data-row">
+        <span class="card-data-label">{% translate 'final total' %}</span>
+        <div class="card-data-values">
           <c-amount.display
               :amount="currency.total_final"
               :prefix="currency.currency.prefix"
               :suffix="currency.currency.suffix"
               :decimal_places="currency.currency.decimal_places"
               color="{% if currency.total_final > 0 %}green{% elif currency.total_final < 0 %}red{% endif %}"></c-amount.display>
+          {% if currency.exchanged and currency.exchanged.total_final %}
+            <c-amount.display
+                :amount="currency.exchanged.total_final"
+                :prefix="currency.exchanged.currency.prefix"
+                :suffix="currency.exchanged.currency.suffix"
+                :decimal_places="currency.exchanged.currency.decimal_places"
+                color="gray"></c-amount.display>
+          {% endif %}
         </div>
       </div>
-      {% if currency.exchanged and currency.exchanged.total_final %}
-        <div class="text-end">
-          <c-amount.display
-              :amount="currency.exchanged.total_final"
-              :prefix="currency.exchanged.currency.prefix"
-              :suffix="currency.exchanged.currency.suffix"
-              :decimal_places="currency.exchanged.currency.decimal_places"
-              color="gray"></c-amount.display>
-        </div>
-      {% endif %}
     </div>
     {% with p=percentages|get_dict_item:currency_id %}
       <div class="my-3">

app/templates/cotton/ui/transactions_action_bar.html

@@ -80,7 +80,7 @@
                 data-tippy-content="{% translate 'Duplicate' %}">
           <i class="fa-solid fa-clone fa-fw"></i>
         </button>
-        <button class="btn btn-secondary btn-sm"
+        <button class="btn btn-error btn-sm"
                 hx-get="{% url 'transactions_bulk_delete' %}"
                 hx-include=".transaction"
                 hx-trigger="confirmed"
@@ -90,7 +90,7 @@
                 data-text="{% translate "You won't be able to revert this!" %}"
                 data-confirm-text="{% translate "Yes, delete them!" %}"
                 _="install prompt_swal">
-          <i class="fa-solid fa-trash text-error"></i>
+          <i class="fa-solid fa-trash"></i>
         </button>
         <div class="divider divider-horizontal m-0"></div>
         <div class="join"
@@ -139,7 +139,7 @@
                       wait 1s
                       put original_value into #real-total-front's innerText
                     end">
-            <i class="fa-solid fa-plus fa-fw me-md-2 text-primary"></i>
+            <i class="fa-solid fa-plus fa-fw me-md-2"></i>
             <span class="hidden md:inline-block" id="real-total-front">0</span>
           </button>
           <div class="dropdown dropdown-end dropdown-top">
@@ -147,7 +147,7 @@
               <i class="fa-solid fa-chevron-down fa-xs"></i>
             </button>
 
-            <ul tabindex="0" class="dropdown-content menu bg-base-300 rounded-box z-[1] w-full shadow fixed!">
+            <ul tabindex="0" class="dropdown-content menu bg-base-300 rounded-box w-full shadow fixed! flex flex-col gap-1">
               <li class="cursor-pointer"
                   _="on click
                         set original_value to #calc-menu-flat-total's innerText
@@ -156,13 +156,12 @@
                         wait 1s
                         put original_value into #calc-menu-flat-total
                       end">
-                <div class="p-0">
+                <div class="py-1 px-3">
                   <div>
-                    <div class="text-base-content/60 text-xs font-medium px-3">
+                    <div class="text-base-content/60 text-xs font-medium">
                       {% trans "Flat Total" %}
                     </div>
-                    <div class="px-3"
-                        id="calc-menu-flat-total">
+                    <div id="calc-menu-flat-total">
                       0
                     </div>
                   </div>
@@ -176,13 +175,12 @@
                         wait 1s
                         put original_value into #calc-menu-real-total
                       end">
-                <div class="p-0">
+                <div class="py-1 px-3">
                   <div>
-                    <div class="text-base-content/60 text-xs font-medium px-3">
+                    <div class="text-base-content/60 text-xs font-medium">
                       {% trans "Real Total" %}
                     </div>
-                    <div class="px-3"
-                        id="calc-menu-real-total">
+                    <div id="calc-menu-real-total">
                       0
                     </div>
                   </div>
@@ -196,13 +194,12 @@
                         wait 1s
                         put original_value into #calc-menu-mean
                       end">
-                <div class="p-0">
+                <div class="p-1 px-3">
                   <div>
-                    <div class="text-base-content/60 text-xs font-medium px-3">
+                    <div class="text-base-content/60 text-xs font-medium">
                       {% trans "Mean" %}
                     </div>
-                    <div class="px-3"
-                        id="calc-menu-mean">
+                    <div id="calc-menu-mean">
                       0
                     </div>
                   </div>
@@ -216,13 +213,12 @@
                         wait 1s
                         put original_value into #calc-menu-max
                       end">
-                <div class="p-0">
+                <div class="py-1 px-3">
                   <div>
-                    <div class="text-base-content/60 text-xs font-medium px-3">
+                    <div class="text-base-content/60 text-xs font-medium">
                       {% trans "Max" %}
                     </div>
-                    <div class="px-3"
-                        id="calc-menu-max">
+                    <div id="calc-menu-max">
                       0
                     </div>
                   </div>
@@ -236,13 +232,12 @@
                         wait 1s
                         put original_value into #calc-menu-min
                       end">
-                <div class="p-0">
+                <div class="py-1 px-3">
                   <div>
-                    <div class="text-base-content/60 text-xs font-medium px-3">
+                    <div class="text-base-content/60 text-xs font-medium">
                       {% trans "Min" %}
                     </div>
-                    <div class="px-3"
-                        id="calc-menu-min">
+                    <div id="calc-menu-min">
                       0
                     </div>
                   </div>
@@ -256,13 +251,12 @@
                         wait 1s
                         put original_value into #calc-menu-count
                       end">
-                <div class="p-0">
+                <div class="py-1 px-3">
                   <div>
-                    <div class="text-base-content/60 text-xs font-medium px-3">
+                    <div class="text-base-content/60 text-xs font-medium">
                       {% trans "Count" %}
                     </div>
-                    <div class="px-3"
-                        id="calc-menu-count">
+                    <div id="calc-menu-count">
                       0
                     </div>
                   </div>