Refactor components to use ModalDialog and StatusMessage; update styles and remove unused files

- Replaced inline modal dialogs in ParentView with a reusable ModalDialog component.
- Introduced StatusMessage component for loading and error states in ParentView.
- Updated styles to use new colors.css and styles.css for consistent theming.
- Removed ChildRewardList.vue and ChildTaskList.vue components as they were no longer needed.
- Adjusted RewardAssignView and TaskAssignView to use new styles and shared button styles.
- Cleaned up imports across components to reflect the new styles and removed unused CSS files.

frontend/vue-app/src/components/child/ParentView.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { ref, onMounted, computed, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
+import ModalDialog from '../shared/ModalDialog.vue'
 import { useRoute, useRouter } from 'vue-router'
 import ChildDetailCard from './ChildDetailCard.vue'
 import ScrollingList from '../shared/ScrollingList.vue'
 import { eventBus } from '@/common/eventBus'
+import '@/assets/styles.css'
 import '@/assets/view-shared.css'
 import type {
   Task,
@@ -338,10 +340,9 @@ function goToAssignRewards() {
 
 <template>
   <div>
-    <div v-if="loading" class="loading">Loading...</div>
-    <div v-else-if="error" class="error">Error: {{ error }}</div>
+    <StatusMessage :loading="loading" :error="error" />
 
-    <div v-else class="layout">
+    <div v-if="!loading && !error" class="layout">
       <div class="main">
         <ChildDetailCard :child="child" />
         <ScrollingList
@@ -431,98 +432,74 @@ function goToAssignRewards() {
     </div>
 
     <!-- Pending Reward Dialog -->
-    <div v-if="showPendingRewardDialog" class="modal-backdrop">
-      <div class="modal">
-        <div class="dialog-message" style="margin-bottom: 1.2rem">
-          There is a pending reward request. The reward must be cancelled before triggering a new
-          task.<br />
-          Would you like to cancel the pending reward?
-        </div>
-        <div class="actions">
-          <button @click="cancelPendingReward" class="btn btn-primary">Yes</button>
-          <button @click="showPendingRewardDialog = false" class="btn btn-secondary">No</button>
-        </div>
+    <ModalDialog v-if="showPendingRewardDialog" :title="'Warning!'">
+      <div class="modal-message">
+        There is a pending reward request. The reward must be cancelled before triggering a new
+        task.<br />
+        Would you like to cancel the pending reward?
       </div>
-    </div>
+      <div class="modal-actions">
+        <button @click="cancelPendingReward" class="btn btn-primary">Yes</button>
+        <button @click="showPendingRewardDialog = false" class="btn btn-secondary">No</button>
+      </div>
+    </ModalDialog>
 
-    <div v-if="showConfirm && selectedTask" class="modal-backdrop">
-      <div class="modal">
-        <div class="task-info">
-          <img
-            v-if="selectedTask.image_url"
-            :src="selectedTask.image_url"
-            alt="Task Image"
-            class="task-image"
-          />
-          <div class="task-details">
-            <div class="task-name">{{ selectedTask.name }}</div>
-            <div class="task-points" :class="selectedTask.is_good ? 'good' : 'bad'">
-              {{ selectedTask.points }} points
-            </div>
-          </div>
-        </div>
-        <div class="dialog-message" style="margin-bottom: 1.2rem">
-          {{ selectedTask.is_good ? 'Add' : 'Subtract' }} these points
-          {{ selectedTask.is_good ? 'to' : 'from' }}
-          <span class="child-name">{{ child?.name }}</span>
-        </div>
-        <div class="actions">
-          <button @click="confirmTriggerTask" class="btn btn-primary">Yes</button>
-          <button
-            @click="
-              () => {
-                showConfirm = false
-                selectedTask = null
-              }
-            "
-            class="btn btn-secondary"
-          >
-            Cancel
-          </button>
-        </div>
+    <ModalDialog
+      v-if="showConfirm && selectedTask"
+      :title="'Confirm Task'"
+      :subtitle="selectedTask.name"
+      :imageUrl="selectedTask.image_url"
+    >
+      <div class="modal-message">
+        {{ selectedTask.is_good ? 'Add' : 'Subtract' }} these points
+        {{ selectedTask.is_good ? 'to' : 'from' }}
+        <span class="child-name">{{ child?.name }}</span>
       </div>
-    </div>
+      <div class="modal-actions">
+        <button @click="confirmTriggerTask" class="btn btn-primary">Yes</button>
+        <button
+          @click="
+            () => {
+              showConfirm = false
+              selectedTask = null
+            }
+          "
+          class="btn btn-secondary"
+        >
+          Cancel
+        </button>
+      </div>
+    </ModalDialog>
 
-    <div v-if="showRewardConfirm && selectedReward" class="modal-backdrop">
-      <div class="modal">
-        <div class="reward-info">
-          <img
-            v-if="selectedReward.image_url"
-            :src="selectedReward.image_url"
-            alt="Reward Image"
-            class="reward-image"
-          />
-          <div class="reward-details">
-            <div class="reward-name">{{ selectedReward.name }}</div>
-            <div class="reward-points">
-              {{
-                selectedReward.points_needed === 0
-                  ? 'Reward Ready!'
-                  : selectedReward.points_needed + ' more points'
-              }}
-            </div>
-          </div>
-        </div>
-        <div class="dialog-message" style="margin-bottom: 1.2rem">
-          Redeem this reward for <span class="child-name">{{ child?.name }}</span
-          >?
-        </div>
-        <div class="actions">
-          <button @click="confirmTriggerReward" class="btn btn-primary">Yes</button>
-          <button
-            @click="
-              () => {
-                showRewardConfirm = false
-                selectedReward = null
-              }
-            "
-            class="btn btn-secondary"
-          >
-            Cancel
-          </button>
-        </div>
+    <ModalDialog
+      v-if="showRewardConfirm && selectedReward"
+      :imageUrl="selectedReward?.image_url"
+      :title="selectedReward?.name"
+      :subtitle="
+        selectedReward.points_needed === 0
+          ? 'Reward Ready!'
+          : selectedReward?.points_needed + ' more points'
+      "
+    >
+      <div class="modal-message">
+        Redeem this reward for <span class="child-name">{{ child?.name }}</span
+        >?
       </div>
-    </div>
+      <div class="modal-actions">
+        <button @click="confirmTriggerReward" class="btn btn-primary">Yes</button>
+        <button
+          @click="
+            () => {
+              showRewardConfirm = false
+              selectedReward = null
+            }
+          "
+          class="btn btn-secondary"
+        >
+          Cancel
+        </button>
+      </div>
+    </ModalDialog>
   </div>
 </template>
 
@@ -534,17 +511,6 @@ function goToAssignRewards() {
   margin: 2rem 0;
 }
 
-.back-btn {
-  background: var(--back-btn-bg);
-  border: 0;
-  padding: 0.6rem 1rem;
-  border-radius: 8px;
-  cursor: pointer;
-  margin-bottom: 1.5rem;
-  color: var(--back-btn-color);
-  font-weight: 600;
-}
-
 .item-points {
   color: var(--item-points-color, #ffd166);
   font-size: 1rem;