From c96eb7cdea17bfa59d5c742cd2b961a568fa5988 Mon Sep 17 00:00:00 2001
From: void-57 <ruddhaani60@gmail.com>
Date: Fri, 5 Dec 2025 14:23:09 +0530
Subject: [PATCH] feat: Add icons to transaction filter buttons and enhance
 their responsive styling.

---
 index.html | 17 ++++++++++-------
 style.css  | 25 ++++++++++++++++++++++---
 2 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index fc26444..f069165 100644
--- a/index.html
+++ b/index.html
@@ -267,16 +267,19 @@
               <!-- Transaction History Section -->
               <div id="transactionFilterSection" class="transaction-section" style="display: none;">
                 <div class="transaction-header">
-                  <h3><i class="fas fa-history"></i> Transactions</h3>
+                  <h3>Transactions</h3>
                   <div class="transaction-filters">
-                    <button class="filter-btn active" data-filter="all" onclick="filterTransactions('all')">
-                      All
+                    <button class="filter-btn active" data-filter="all" onclick="filterTransactions('all')" title="All Transactions">
+                      <i class="fas fa-exchange-alt"></i>
+                      <span class="filter-text">All</span>
                     </button>
-                    <button class="filter-btn" data-filter="received" onclick="filterTransactions('received')">
-                      Received
+                    <button class="filter-btn" data-filter="received" onclick="filterTransactions('received')" title="Received">
+                      <i class="fas fa-arrow-down"></i>
+                      <span class="filter-text">Received</span>
                     </button>
-                    <button class="filter-btn" data-filter="sent" onclick="filterTransactions('sent')">
-                      Sent
+                    <button class="filter-btn" data-filter="sent" onclick="filterTransactions('sent')" title="Sent">
+                      <i class="fas fa-arrow-up"></i>
+                      <span class="filter-text">Sent</span>
                     </button>
                   </div>
                 </div>
diff --git a/style.css b/style.css
index 5d49042..ba8fde8 100644
--- a/style.css
+++ b/style.css
@@ -3175,6 +3175,13 @@ body:has(.header) .container {
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.filter-btn i {
+  font-size: 0.9rem;
 }
 
 .filter-btn:hover {
@@ -3200,12 +3207,24 @@ body:has(.header) .container {
   }
   
   .transaction-filters {
-    gap: 0.35rem;
+    gap: 0.5rem;
   }
   
   .filter-btn {
-    padding: 0.4rem 0.6rem;
-    font-size: 0.75rem;
+    padding: 0.5rem 0.6rem;
+    font-size: 0.85rem;
     border-radius: 0.35rem;
+    gap: 0;
+    min-width: 38px;
+    justify-content: center;
+  }
+  
+  .filter-btn i {
+    font-size: 0.85rem;
+  }
+  
+  /* Hide text on mobile, show only icons */
+  .filter-btn .filter-text {
+    display: none;
   }
 }