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.

This commit is contained in:
padreug 2025-06-22 20:47:48 +02:00
parent a292f48544
commit c3adc37d84

View file

@ -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