padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update WalletPage styling for improved transaction display

Browse source 
- Increased spacing between transaction items for better visual separation.
- Changed tag badge variant to 'secondary' for enhanced visibility and updated its position.
- Adjusted icon size for improved consistency in transaction representation.

These changes enhance the overall clarity and aesthetics of the transaction display in the WalletPage.
This commit is contained in:
padreug 2025-09-15 00:39:40 +02:00
parent c2208ab5d7
commit a22864f7e0
1 changed files with 3 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/modules/wallet/views/WalletPage.vue
View file

@ -172,14 +172,14 @@ onMounted(() => {
<div v-for="(txs, date) in groupedTransactions" :key="date" class="mb-6">
<div class="text-sm font-medium text-muted-foreground mb-3">{{ date }}</div>
<div class="space-y-3">
<div class="space-y-4">
<div
v-for="tx in txs"
:key="tx.id"
class="relative p-3 rounded-lg border hover:bg-accent/50 transition-colors"
>
<!-- Tag badge in top-left corner -->
<Badge v-if="tx.tag" variant="outline" class="absolute -top-2.75 left-8 text-xs font-light z-10">
<Badge v-if="tx.tag" variant="secondary" class="absolute -top-2.75 left-11 text-xs font-medium z-10 bg-blue-100 text-blue-800 border-blue-200">
{{ tx.tag }}
</Badge>
<!-- Mobile Layout: Stack vertically -->
@ -193,7 +193,7 @@ onMounted(() => {
>
<component
:is="getTransactionIcon(tx.type, tx.status)"
class="h-3.5 w-3.5"
class="h-4 w-4"
/>
</div>
<span class="text-sm text-muted-foreground">{{