fix: Improve text readability in expense cards

 **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
This commit is contained in:
Matt 2025-07-09 15:00:32 -04:00
parent 438312c469
commit 147c8b350d
1 changed files with 5 additions and 5 deletions

View File

@ -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;