From c3adc37d84d2403eb60489f94aa4ca11488965c7 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sun, 22 Jun 2025 20:47:48 +0200
Subject: [PATCH] Enhance DCA dashboard styling: Update text styles for
 improved emphasis on transaction data and milestones, including bolding key
 metrics and adjusting font sizes for better visual hierarchy.

---
 templates/satmachineclient/index.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/templates/satmachineclient/index.html b/templates/satmachineclient/index.html
index f922706..03fcd7c 100644
--- a/templates/satmachineclient/index.html
+++ b/templates/satmachineclient/index.html
@@ -37,7 +37,7 @@
               </div>
               <div class="text-h6 text-grey-7 q-mb-xs">stacked and growing!</div>
               <div class="text-caption text-grey-6">
-                ${dashboardData.total_transactions} DCA ${dashboardData.total_transactions === 1 ? 'purchase' : 'purchases'} • ${dashboardData.dca_mode} mode
+                ${dashboardData.total_transactions} DCA ${dashboardData.total_transactions === 1 ? 'purchase' : 'purchases'} • <span class="text-weight-bold text-blue-8">${dashboardData.dca_mode}</span> mode
               </div>
             </div>
             <div class="col-12 col-md-4 q-mt-md">
@@ -49,11 +49,11 @@
                 track-color="orange-1"
                 class="q-ma-md"
               >
-                <div class="text-caption text-orange-8">
+                <div class="text-body2 text-weight-bold text-orange-8">
                   ${Math.round(getMilestoneProgress())}%
                 </div>
               </q-circular-progress>
-              <div class="text-caption text-grey-6">to ${getNextMilestone().name}</div>
+              <div class="text-body2 text-weight-medium text-grey-7">to ${getNextMilestone().name}</div>
             </div>
           </div>
         </q-card-section>
@@ -80,7 +80,7 @@
         <div class="col-6 col-md-3">
           <q-card class="text-center bg-green-1" style="min-height: 100px;">
             <q-card-section class="q-pa-md">
-              <div class="text-h6 text-green-8">${dashboardData.total_transactions}</div>
+              <div class="text-h5 text-weight-bold text-green-8">${dashboardData.total_transactions}</div>
               <div class="text-caption text-green-7 text-weight-medium">DCA Purchases</div>
             </q-card-section>
           </q-card>
@@ -188,7 +188,7 @@
             <div class="col-12 col-md-6">
               <q-card flat class="bg-blue-1">
                 <q-card-section class="q-pa-md">
-                  <div class="text-body2 text-blue-8">
+                  <div class="text-h6 text-blue-8">
                     <strong>${dashboardData.dca_mode}</strong> Mode
                   </div>
                   <div class="text-caption text-blue-7 q-mt-xs">
@@ -201,7 +201,7 @@
               <q-card flat class="bg-purple-1">
                 <q-card-section class="q-pa-md">
                   <div class="text-body2 text-purple-8">
-                    <strong>${Math.round(dashboardData.average_cost_basis)}</strong> sats/GTQ
+                    <span class="text-h6"><strong>${Math.round(dashboardData.average_cost_basis)}</strong></span> sats/GTQ
                   </div>
                   <div class="text-caption text-purple-7 q-mt-xs">
                     Average cost basis over time