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:
parent
591036aa54
commit
fdf41c016a
1 changed files with 6 additions and 6 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue