From 147c8b350d4ffd53d7abc6ccdaf5963fc64768eb Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Wed, 9 Jul 2025 15:00:32 -0400
Subject: [PATCH] fix: Improve text readability in expense cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ **Fixed Text Legibility Issues:**
- Changed icon colors from text-grey-darken-2 to text-grey-darken-3 for better visibility
- Updated date and payer text colors from light grey to darker rgba(--v-theme-on-surface, 0.8)
- Improved contents preview text color to rgba(--v-theme-on-surface, 0.7)
- Enhanced overall text contrast for better accessibility

� **User Experience Improvements:**
- All text in expense cards is now clearly readable
- Better visual hierarchy with appropriate contrast ratios
- Improved accessibility for users with vision difficulties
- Maintains professional appearance while ensuring legibility
---
 components/ExpenseList.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/ExpenseList.vue b/components/ExpenseList.vue
index 0fbb901..30934a3 100644
--- a/components/ExpenseList.vue
+++ b/components/ExpenseList.vue
@@ -131,13 +131,13 @@
             
             <!-- Date and Time -->
             <div class="date-display">
-              <v-icon size="small" class="mr-1 text-grey-darken-2">mdi-calendar-clock</v-icon>
+              <v-icon size="small" class="mr-1 text-grey-darken-3">mdi-calendar-clock</v-icon>
               {{ formatDateTime(expense.Time) }}
             </div>
             
             <!-- Payer -->
             <div v-if="expense.Payer" class="payer-display">
-              <v-icon size="small" class="mr-1 text-grey-darken-2">mdi-account</v-icon>
+              <v-icon size="small" class="mr-1 text-grey-darken-3">mdi-account</v-icon>
               {{ expense.Payer }}
             </div>
             
@@ -408,7 +408,7 @@ const openReceipt = (receipt: any) => {
   display: flex;
   align-items: center;
   font-size: 0.875rem;
-  color: rgb(var(--v-theme-on-surface-variant));
+  color: rgba(var(--v-theme-on-surface), 0.8);
   margin-bottom: 4px;
 }
 
@@ -416,13 +416,13 @@ const openReceipt = (receipt: any) => {
   display: flex;
   align-items: center;
   font-size: 0.875rem;
-  color: rgb(var(--v-theme-on-surface-variant));
+  color: rgba(var(--v-theme-on-surface), 0.8);
   margin-bottom: 8px;
 }
 
 .contents-preview {
   font-size: 0.875rem;
-  color: rgb(var(--v-theme-on-surface-variant));
+  color: rgba(var(--v-theme-on-surface), 0.7);
   line-height: 1.3;
   overflow: hidden;
   display: -webkit-box;