Update dashboard card styles: Change background colors and text classes for current value and unrealized gain/loss sections to enhance visual clarity and user experience.

This commit is contained in:
padreug 2025-06-22 16:08:22 +02:00
parent 591036aa54
commit fdf41c016a

View file

@ -60,22 +60,22 @@
<!-- Current Value Row -->
<div class="row q-col-gutter-md q-mt-sm">
<div class="col-12 col-md-6">
<q-card flat class="bg-green-1">
<q-card flat class="bg-orange-1">
<q-card-section class="text-center">
<div class="text-h5 text-green-8">${formatCurrencyWithCode(dashboardData.current_sats_fiat_value, dashboardData.currency)}</div>
<div class="text-caption text-green-7">Current Value of Bitcoin Holdings</div>
<div class="text-h5 text-orange-8">${formatCurrencyWithCode(dashboardData.current_sats_fiat_value, dashboardData.currency)}</div>
<div class="text-caption text-orange-7">Current Value of Bitcoin Holdings</div>
<div class="text-caption text-grey">at today's ${dashboardData.currency} exchange rate</div>
</q-card-section>
</q-card>
</div>
<div class="col-12 col-md-6">
<q-card flat class="bg-blue-1">
<q-card flat :class="(dashboardData.current_sats_fiat_value + dashboardData.current_fiat_balance) > dashboardData.total_fiat_invested ? 'bg-green-1' : 'bg-red-1'">
<q-card-section class="text-center">
<div class="text-h6 text-blue-8">
<div class="text-h6" :class="(dashboardData.current_sats_fiat_value + dashboardData.current_fiat_balance) > dashboardData.total_fiat_invested ? 'text-green-8' : 'text-red-8'">
${(dashboardData.current_sats_fiat_value + dashboardData.current_fiat_balance) > dashboardData.total_fiat_invested ? '+' : ''}
${formatCurrencyWithCode((dashboardData.current_sats_fiat_value + dashboardData.current_fiat_balance) - dashboardData.total_fiat_invested, dashboardData.currency)}
</div>
<div class="text-caption text-blue-7">
<div class="text-caption" :class="(dashboardData.current_sats_fiat_value + dashboardData.current_fiat_balance) > dashboardData.total_fiat_invested ? 'text-green-7' : 'text-red-7'">
${(dashboardData.current_sats_fiat_value + dashboardData.current_fiat_balance) > dashboardData.total_fiat_invested ? 'Unrealized Gain' : 'Unrealized Loss'}
</div>
<div class="text-caption text-grey">vs total invested</div>