Enhance ChoresPage and GroupDetailPage with improved styling and UI updates

This commit introduces the following changes:

- Updated styling for overdue and due-today chore statuses in ChoresPage, replacing border styles with box shadows for better visibility.
- Adjusted opacity for completed chores to enhance UI clarity.
- Minor formatting fixes in GroupDetailPage for improved button and text alignment.

These updates aim to enhance the user experience by providing clearer visual cues and a more polished interface.
This commit is contained in:
mohamad 2025-06-08 11:03:32 +02:00
parent 26f589751d
commit 8afeda1df7
2 changed files with 17 additions and 17 deletions

View File

@ -718,6 +718,19 @@ const getDueDateStatus = (chore: ChoreWithCompletion) => {
overflow: hidden; overflow: hidden;
} }
/* Status-based styling */
.schedule-group:has(.status-overdue) .neo-item-list-container {
box-shadow: 6px 6px 0 #c72d2d;
}
.schedule-group:has(.status-due-today) .neo-item-list-container {
box-shadow: 6px 6px 0 #b37814;
}
.status-completed {
opacity: 0.7;
}
/* Neo-style list items from ListDetailPage */ /* Neo-style list items from ListDetailPage */
.neo-item-list { .neo-item-list {
list-style: none; list-style: none;
@ -940,19 +953,6 @@ const getDueDateStatus = (chore: ChoreWithCompletion) => {
font-style: italic; font-style: italic;
} }
/* Status-based styling */
.status-overdue {
border-left: 4px solid #ef4444;
}
.status-due-today {
border-left: 4px solid #f59e0b;
}
.status-completed {
opacity: 0.7;
}
/* Modal styles */ /* Modal styles */
.detail-modal .modal-container, .detail-modal .modal-container,
.history-modal .modal-container { .history-modal .modal-container {

View File

@ -83,7 +83,7 @@
<div class="flex justify-between items-center w-full mb-2"> <div class="flex justify-between items-center w-full mb-2">
<VHeading :level="3" class="neo-section-header">{{ t('groupDetailPage.chores.title') }}</VHeading> <VHeading :level="3" class="neo-section-header">{{ t('groupDetailPage.chores.title') }}</VHeading>
<VButton @click="showGenerateScheduleModal = true">{{ t('groupDetailPage.chores.generateScheduleButton') <VButton @click="showGenerateScheduleModal = true">{{ t('groupDetailPage.chores.generateScheduleButton')
}} }}
</VButton> </VButton>
</div> </div>
<div v-if="upcomingChores.length > 0" class="enhanced-chores-list"> <div v-if="upcomingChores.length > 0" class="enhanced-chores-list">
@ -299,10 +299,10 @@
<template #footer> <template #footer>
<VButton variant="neutral" @click="closeSettleShareModal">{{ <VButton variant="neutral" @click="closeSettleShareModal">{{
t('groupDetailPage.settleShareModal.cancelButton') t('groupDetailPage.settleShareModal.cancelButton')
}}</VButton> }}</VButton>
<VButton variant="primary" @click="handleConfirmSettle" :disabled="isSettlementLoading">{{ <VButton variant="primary" @click="handleConfirmSettle" :disabled="isSettlementLoading">{{
t('groupDetailPage.settleShareModal.confirmButton') t('groupDetailPage.settleShareModal.confirmButton')
}}</VButton> }}</VButton>
</template> </template>
</VModal> </VModal>
@ -324,7 +324,7 @@
<div class="meta-item"> <div class="meta-item">
<span class="label">Created by:</span> <span class="label">Created by:</span>
<span class="value">{{ selectedChore.creator?.name || selectedChore.creator?.email || 'Unknown' <span class="value">{{ selectedChore.creator?.name || selectedChore.creator?.email || 'Unknown'
}}</span> }}</span>
</div> </div>
<div class="meta-item"> <div class="meta-item">
<span class="label">Created:</span> <span class="label">Created:</span>