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:
parent
26f589751d
commit
8afeda1df7
@ -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 {
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user