From 8afeda1df7d80b577e84adf4a60a801b6bf85049 Mon Sep 17 00:00:00 2001
From: mohamad <mohamad>
Date: Sun, 8 Jun 2025 11:03:32 +0200
Subject: [PATCH] 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.
---
 fe/src/pages/ChoresPage.vue      | 26 +++++++++++++-------------
 fe/src/pages/GroupDetailPage.vue |  8 ++++----
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/fe/src/pages/ChoresPage.vue b/fe/src/pages/ChoresPage.vue
index 2952a03..2619853 100644
--- a/fe/src/pages/ChoresPage.vue
+++ b/fe/src/pages/ChoresPage.vue
@@ -718,6 +718,19 @@ const getDueDateStatus = (chore: ChoreWithCompletion) => {
   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-item-list {
   list-style: none;
@@ -940,19 +953,6 @@ const getDueDateStatus = (chore: ChoreWithCompletion) => {
   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 */
 .detail-modal .modal-container,
 .history-modal .modal-container {
diff --git a/fe/src/pages/GroupDetailPage.vue b/fe/src/pages/GroupDetailPage.vue
index 7d4eb8f..9b974f0 100644
--- a/fe/src/pages/GroupDetailPage.vue
+++ b/fe/src/pages/GroupDetailPage.vue
@@ -83,7 +83,7 @@
             <div class="flex justify-between items-center w-full mb-2">
               <VHeading :level="3" class="neo-section-header">{{ t('groupDetailPage.chores.title') }}</VHeading>
               <VButton @click="showGenerateScheduleModal = true">{{ t('groupDetailPage.chores.generateScheduleButton')
-              }}
+                }}
               </VButton>
             </div>
             <div v-if="upcomingChores.length > 0" class="enhanced-chores-list">
@@ -299,10 +299,10 @@
         <template #footer>
           <VButton variant="neutral" @click="closeSettleShareModal">{{
             t('groupDetailPage.settleShareModal.cancelButton')
-          }}</VButton>
+            }}</VButton>
           <VButton variant="primary" @click="handleConfirmSettle" :disabled="isSettlementLoading">{{
             t('groupDetailPage.settleShareModal.confirmButton')
-          }}</VButton>
+            }}</VButton>
         </template>
       </VModal>
 
@@ -324,7 +324,7 @@
                   <div class="meta-item">
                     <span class="label">Created by:</span>
                     <span class="value">{{ selectedChore.creator?.name || selectedChore.creator?.email || 'Unknown'
-                    }}</span>
+                      }}</span>
                   </div>
                   <div class="meta-item">
                     <span class="label">Created:</span>