Made changes to CSS and merged together.

web/vue-app/src/assets/global.css

@@ -52,4 +52,32 @@
   --info-image-bg: #eee;
   --info-points: #667eea;
   --loading-color: #fff;
+
+  /* ChildrenListView styles */
+  --card-bg: #fff;
+  --card-title: #333;
+  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+  --kebab-menu-bg: #f7fafc;
+  --kebab-menu-border: #bcc1c9;
+  --kebab-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 1.5px 6px rgba(102, 126, 234, 0.08);
+  --kebab-menu-blur: 11px;
+  --menu-item-color: #333;
+  --menu-item-hover-bg: rgba(0, 0, 0, 0.04);
+  --menu-item-danger: #ff4d4f;
+  --modal-bg: #fff;
+  --modal-text: #222;
+  --modal-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
+  --fab-bg: #667eea;
+  --fab-hover-bg: #5a67d8;
+  --fab-active-bg: #4c51bf;
+  --no-children-color: #fdfdfd;
+  --sub-message-color: #b5ccff;
+  --sign-in-btn-bg: #fff;
+  --sign-in-btn-color: #2563eb;
+  --sign-in-btn-border: #2563eb;
+  --sign-in-btn-hover-bg: #2563eb;
+  --sign-in-btn-hover-color: #fff;
+  --child-image-bg: #fff;
+  --age-color: #666;
+  --points-color: #444;
 }

web/vue-app/src/components/AssignTasksDialog.vue

@@ -1,170 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, watch } from 'vue'
-import { getCachedImageUrl } from '../common/imageCache'
-
-const props = defineProps<{ childId: string | number }>()
-const emit = defineEmits(['close'])
-
-interface Task {
-  id: string
-  name: string
-  is_good: boolean
-  points: number
-  image_id?: string | null
-  image_url?: string | null
-}
-
-const tasks = ref<Task[]>([])
-const loading = ref(true)
-const error = ref<string | null>(null)
-
-const fetchTasks = async () => {
-  loading.value = true
-  error.value = null
-  try {
-    const resp = await fetch(`/api/child/${props.childId}/list-assignable-tasks`)
-    if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
-    const data = await resp.json()
-    const taskList: Task[] = data.assignable_tasks || []
-
-    // Fetch images for each task if image_id is present
-    await Promise.all(
-      taskList.map(async (task) => {
-        if (task.image_id) {
-          try {
-            task.image_url = await getCachedImageUrl(task.image_id)
-          } catch (e) {
-            task.image_url = null
-          }
-        }
-      }),
-    )
-
-    tasks.value = taskList
-  } catch (err) {
-    error.value = err instanceof Error ? err.message : 'Failed to fetch tasks'
-  } finally {
-    loading.value = false
-  }
-}
-
-onMounted(fetchTasks)
-watch(() => props.childId, fetchTasks)
-</script>
-
-<template>
-  <div class="modal-backdrop">
-    <div class="modal">
-      <h3>Assign Tasks</h3>
-      <div v-if="loading" class="loading">Loading tasks...</div>
-      <div v-else-if="error" class="error">{{ error }}</div>
-      <div v-else class="task-listbox">
-        <div
-          v-for="task in tasks"
-          :key="task.id"
-          class="task-list-item"
-          :class="{ good: task.is_good, bad: !task.is_good }"
-        >
-          <img v-if="task.image_url" :src="task.image_url" alt="Task" class="task-image" />
-          <span class="task-name">{{ task.name }}</span>
-          <span class="task-points">
-            {{ task.is_good ? task.points : '-' + task.points }} pts
-          </span>
-        </div>
-      </div>
-      <button class="close-btn" @click="emit('close')">Close</button>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.modal-backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.45);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1200;
-}
-.modal {
-  background: #fff;
-  color: #222;
-  padding: 1.5rem 2rem;
-  border-radius: 12px;
-  min-width: 260px;
-  max-width: 95vw;
-  max-height: 90vh;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
-  text-align: center;
-  overflow-y: auto;
-}
-.task-listbox {
-  max-height: 320px;
-  min-width: 220px;
-  overflow-y: auto;
-  margin: 1.2rem 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.7rem;
-}
-.task-list-item {
-  display: flex;
-  align-items: center;
-  border: 2px solid #38c172;
-  border-radius: 8px;
-  padding: 0.6rem 1rem;
-  background: #f8fafc;
-  font-size: 1.05rem;
-  font-weight: 500;
-  transition: border 0.18s;
-}
-.task-list-item.bad {
-  border-color: #e53e3e;
-  background: #fff5f5;
-}
-.task-list-item.good {
-  border-color: #38c172;
-  background: #f0fff4;
-}
-.task-name {
-  flex: 1;
-  text-align: left;
-}
-.task-points {
-  min-width: 60px;
-  text-align: right;
-  font-weight: 600;
-}
-.close-btn {
-  margin-top: 1.2rem;
-  background: #f3f3f3;
-  color: #666;
-  border: none;
-  border-radius: 8px;
-  padding: 0.5rem 1.1rem;
-  font-weight: 600;
-  cursor: pointer;
-  font-size: 1rem;
-}
-.close-btn:hover {
-  background: #e2e8f0;
-}
-.loading,
-.error {
-  margin: 1.2rem 0;
-  color: #888;
-}
-.error {
-  color: #e53e3e;
-}
-.task-image {
-  width: 36px;
-  height: 36px;
-  object-fit: cover;
-  border-radius: 8px;
-  margin-right: 0.7rem;
-  background: #eee;
-  flex-shrink: 0;
-}
-</style>

web/vue-app/src/components/ChildrenListView.vue

@@ -420,9 +420,9 @@ h1 {
 }
 
 .card {
-  background: white;
+  background: var(--card-bg);
+  box-shadow: var(--card-shadow);
   border-radius: 12px;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
   overflow: visible; /* allow menu to overflow */
   transition: all 0.3s ease;
   display: flex;
@@ -470,17 +470,14 @@ h1 {
   right: 0;
   margin: 0;
   min-width: 150px;
-  background: #f7fafcc7; /* subtle light gray for contrast */
+  background: var(--kebab-menu-bg);
-  border-radius: 10px;
+  border: 1.5px solid var(--kebab-menu-border);
-  border: 1.5px solid #bcc1c9; /* subtle border for definition */
+  box-shadow: var(--kebab-menu-shadow);
-  box-shadow:
+  backdrop-filter: blur(var(--kebab-menu-blur));
-    0 8px 24px rgba(0, 0, 0, 0.18),
-    0 1.5px 6px rgba(102, 126, 234, 0.08); /* stronger shadow for separation */
   display: flex;
   flex-direction: column;
   overflow: hidden;
   z-index: 30;
-  backdrop-filter: blur(11px); /* optional: adds a modern blur effect */
 }
 
 .menu-item {
@@ -490,7 +487,7 @@ h1 {
   text-align: left;
   cursor: pointer;
   font-weight: 600;
-  color: #333;
+  color: var(--menu-item-color);
   font-size: 1.1rem; /* Slightly larger text for readability */
 }
 
@@ -509,11 +506,11 @@ h1 {
 }
 
 .menu-item:hover {
-  background: rgba(0, 0, 0, 0.04);
+  background: var(--menu-item-hover-bg);
 }
 
 .menu-item.danger {
-  color: #ff4d4f;
+  color: var(--menu-item-danger);
 }
 
 /* card content */
@@ -528,7 +525,7 @@ h1 {
 
 .card h2 {
   font-size: 1.5rem;
-  color: #333;
+  color: var(--card-title);
   margin-bottom: 0.5rem;
   word-break: break-word;
   text-align: center;
@@ -536,7 +533,7 @@ h1 {
 
 .age {
   font-size: 1.1rem;
-  color: #666;
+  color: var(--age-color);
   font-weight: 500;
   text-align: center;
 }
@@ -547,6 +544,7 @@ h1 {
   object-fit: cover;
   border-radius: 50%;
   margin: 0 auto 1rem auto;
+  background: var(--child-image-bg);
 }
 
 /* modal */
@@ -561,13 +559,13 @@ h1 {
 }
 
 .modal {
-  background: #fff;
+  background: var(--modal-bg);
-  color: #222;
+  color: var(--modal-text);
   padding: 1.25rem;
   border-radius: 10px;
   width: 360px;
   max-width: calc(100% - 32px);
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--modal-shadow);
   text-align: center;
 }
 
@@ -578,7 +576,7 @@ h1 {
 
 .points {
   font-size: 1.05rem;
-  color: #444;
+  color: var(--points-color);
   margin-top: 0.4rem;
   font-weight: 600;
   text-align: center;
@@ -589,7 +587,7 @@ h1 {
   position: fixed;
   bottom: 2rem;
   right: 2rem;
-  background: #667eea;
+  background: var(--fab-bg);
   color: #fff;
   border: none;
   border-radius: 50%;
@@ -605,11 +603,11 @@ h1 {
 }
 
 .fab:hover {
-  background: #5a67d8;
+  background: var(--fab-hover-bg);
 }
 
 .fab:active {
-  background: #4c51bf;
+  background: var(--fab-active-bg);
 }
 
 .no-children-message {
@@ -617,19 +615,19 @@ h1 {
   font-size: 1.15rem;
   font-weight: 600;
   text-align: center;
-  color: #fdfdfd;
+  color: var(--no-children-color);
   line-height: 1.5;
 }
 .sub-message {
   margin-top: 0.3rem;
   font-size: 1rem;
   font-weight: 400;
-  color: #b5ccff;
+  color: var(--sub-message-color);
 }
 .sign-in-btn {
-  background: #fff;
+  background: var(--sign-in-btn-bg);
-  color: #2563eb;
+  color: var(--sign-in-btn-color);
-  border: 2px solid #2563eb;
+  border: 2px solid var(--sign-in-btn-border);
   border-radius: 6px;
   font-size: 0.85rem;
   font-weight: 600;
@@ -641,7 +639,7 @@ h1 {
     color 0.18s;
 }
 .sign-in-btn:hover {
-  background: #2563eb;
+  background: var(--sign-in-btn-hover-bg);
-  color: #fff;
+  color: var(--sign-in-btn-hover-color);
 }
 </style>