Update WalletPage styling for improved transaction display

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

src/modules/wallet/views/WalletPage.vue

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