Refactor dashboard icons: Replace icon components with emoji representations for improved visual appeal and clarity in the DCA dashboard, enhancing user engagement.
This commit is contained in:
parent
272041f8bb
commit
35060b01d7
1 changed files with 10 additions and 24 deletions
|
|
@ -125,7 +125,6 @@
|
|||
<div class="col-12 col-md-6">
|
||||
<q-card flat class="bg-orange-1">
|
||||
<q-card-section class="text-center q-pa-md">
|
||||
<q-icon name="account_balance" size="2em" class="text-orange-6 q-mb-sm" />
|
||||
<div class="text-h5 text-orange-8">${formatCurrencyWithCode(dashboardData.current_sats_fiat_value, dashboardData.currency)}</div>
|
||||
<div class="text-caption text-orange-7 q-mb-xs">Current Bitcoin Value</div>
|
||||
<div class="text-caption text-grey">at today's ${dashboardData.currency} rate</div>
|
||||
|
|
@ -135,14 +134,8 @@
|
|||
<div class="col-12 col-md-6">
|
||||
<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 q-pa-md">
|
||||
<q-icon
|
||||
:name="(dashboardData.current_sats_fiat_value + dashboardData.current_fiat_balance) > dashboardData.total_fiat_invested ? 'trending_up' : 'trending_down'"
|
||||
size="2em"
|
||||
:class="(dashboardData.current_sats_fiat_value + dashboardData.current_fiat_balance) > dashboardData.total_fiat_invested ? 'text-green-6' : 'text-red-6'"
|
||||
class="q-mb-sm"
|
||||
/>
|
||||
<div class="text-h5" :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 ? '+' : ''}
|
||||
${(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" :class="(dashboardData.current_sats_fiat_value + dashboardData.current_fiat_balance) > dashboardData.total_fiat_invested ? 'text-green-7' : 'text-red-7'">
|
||||
|
|
@ -261,7 +254,6 @@
|
|||
<template v-slot:body-cell-amount_sats="props">
|
||||
<q-td :props="props" class="text-center">
|
||||
<div class="text-weight-bold text-orange-8">
|
||||
<q-icon name="currency_bitcoin" size="xs" class="q-mr-xs" />
|
||||
${formatSats(props.row.amount_sats)}
|
||||
</div>
|
||||
</q-td>
|
||||
|
|
@ -381,10 +373,8 @@
|
|||
<q-list dense>
|
||||
<q-item>
|
||||
<q-item-section avatar>
|
||||
<q-icon
|
||||
:name="dashboardData.total_sats_accumulated >= 10000 ? 'check_circle' : 'radio_button_unchecked'"
|
||||
:color="dashboardData.total_sats_accumulated >= 10000 ? 'positive' : 'grey-5'"
|
||||
/>
|
||||
<div v-if="dashboardData.total_sats_accumulated >= 10000" class="text-positive text-h6">✅</div>
|
||||
<div v-else class="text-grey-5 text-h6">⭕</div>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label class="text-body2">10,000 sats</q-item-label>
|
||||
|
|
@ -394,10 +384,8 @@
|
|||
|
||||
<q-item>
|
||||
<q-item-section avatar>
|
||||
<q-icon
|
||||
:name="dashboardData.total_sats_accumulated >= 100000 ? 'check_circle' : 'radio_button_unchecked'"
|
||||
:color="dashboardData.total_sats_accumulated >= 100000 ? 'positive' : 'grey-5'"
|
||||
/>
|
||||
<div v-if="dashboardData.total_sats_accumulated >= 100000" class="text-positive text-h6">✅</div>
|
||||
<div v-else class="text-grey-5 text-h6">⭕</div>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label class="text-body2">100,000 sats</q-item-label>
|
||||
|
|
@ -407,10 +395,8 @@
|
|||
|
||||
<q-item>
|
||||
<q-item-section avatar>
|
||||
<q-icon
|
||||
:name="dashboardData.total_sats_accumulated >= 1000000 ? 'check_circle' : 'radio_button_unchecked'"
|
||||
:color="dashboardData.total_sats_accumulated >= 1000000 ? 'positive' : 'grey-5'"
|
||||
/>
|
||||
<div v-if="dashboardData.total_sats_accumulated >= 1000000" class="text-positive text-h6">✅</div>
|
||||
<div v-else class="text-grey-5 text-h6">⭕</div>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label class="text-body2">1,000,000 sats</q-item-label>
|
||||
|
|
@ -430,7 +416,7 @@
|
|||
<q-list dense>
|
||||
<q-item>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="trending_up" color="orange" size="sm" />
|
||||
<div class="text-orange text-weight-bold">📈</div>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label class="text-caption">
|
||||
|
|
@ -441,7 +427,7 @@
|
|||
|
||||
<q-item>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="schedule" color="blue" size="sm" />
|
||||
<div class="text-blue text-weight-bold">⏰</div>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label class="text-caption">
|
||||
|
|
@ -452,7 +438,7 @@
|
|||
|
||||
<q-item>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="security" color="green" size="sm" />
|
||||
<div class="text-green text-weight-bold">🔐</div>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label class="text-caption">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue