Made changes to CSS and merged together.

web/vue-app/src/components/child/ChildView.vue

@@ -5,6 +5,7 @@ import ChildDetailCard from './ChildDetailCard.vue'
 import ChildTaskList from '../task/ChildTaskList.vue'
 import ChildRewardList from '../reward/ChildRewardList.vue'
 import { eventBus } from '@/common/eventBus'
+import '@/assets/view-shared.css'
 import type {
   Child,
   Event,
@@ -252,7 +253,7 @@ function resetInactivityTimer() {
   if (inactivityTimer) clearTimeout(inactivityTimer)
   inactivityTimer = setTimeout(() => {
     router.push({ name: 'ChildrenListView' })
-  }, 15000) // 15 seconds
+  }, 60000) // 60 seconds
 }
 
 function setupInactivityListeners() {
@@ -310,7 +311,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="container">
+  <div>
     <div v-if="loading" class="loading">Loading...</div>
     <div v-else-if="error" class="error">Error: {{ error }}</div>
 
@@ -363,8 +364,8 @@ onUnmounted(() => {
           Would you like to redeem this reward?
         </div>
         <div class="actions">
-          <button @click="confirmRedeemReward">Yes</button>
-          <button @click="cancelRedeemReward">No</button>
+          <button @click="confirmRedeemReward" class="btn btn-primary">Yes</button>
+          <button @click="cancelRedeemReward" class="btn btn-secondary">No</button>
         </div>
       </div>
     </div>
@@ -388,8 +389,8 @@ onUnmounted(() => {
           Would you like to cancel the pending reward request?
         </div>
         <div class="actions">
-          <button @click="cancelPendingReward">Yes</button>
-          <button @click="closeCancelDialog">No</button>
+          <button @click="cancelPendingReward" class="btn btn-primary">Yes</button>
+          <button @click="closeCancelDialog" class="btn btn-secondary">No</button>
         </div>
       </div>
     </div>
@@ -397,15 +398,6 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
-.container {
-  width: 100%;
-  max-width: 1200px;
-  margin: 0 auto;
-  min-height: 100vh;
-  padding: 0.5rem;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  box-sizing: border-box;
-}
 .back-btn {
   background: white;
   border: 0;
@@ -416,153 +408,42 @@ onUnmounted(() => {
   color: #667eea;
   font-weight: 600;
 }
-.loading,
-.error {
-  color: white;
-  min-height: 200px;
+
+.assign-buttons {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-}
-.error {
-  color: #ff6b6b;
-  background: rgba(255, 107, 107, 0.1);
-  border-radius: 8px;
-  padding: 1rem;
-}
-.layout {
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  /* Remove grid styles */
-  /* grid-template-columns: 1fr 320px; */
-  /* gap: 1.5rem; */
-}
-.main {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1.5rem;
-  width: 100%;
-}
-.side {
-  display: flex;
-  flex-direction: column;
   gap: 1rem;
-}
-.placeholder {
-  background: rgba(255, 255, 255, 0.08);
-  color: white;
-  padding: 1rem;
-  border-radius: 8px;
-  min-height: 120px;
-  display: flex;
-  align-items: center;
   justify-content: center;
-  text-align: center;
+  margin: 2rem 0;
 }
-.modal-backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.35);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-.modal {
-  background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 4px 24px #667eea22;
-  padding: 2rem 2.2rem 1.5rem 2.2rem;
-  min-width: 320px;
-  max-width: 90vw;
-}
-.reward-info {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  margin-bottom: 1rem;
-}
-.reward-image {
-  width: 72px;
-  height: 72px;
-  object-fit: cover;
-  border-radius: 8px;
-  background: #eee;
-}
-.reward-details {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-.reward-name {
+.assign-task-btn,
+.assign-bad-btn,
+.assign-reward-btn {
   font-weight: 600;
-  font-size: 1.1rem;
-}
-.reward-points {
-  color: #667eea;
-  font-weight: 500;
-  font-size: 1rem;
-}
-.dialog-message {
-  font-size: 1.05rem;
-  margin-bottom: 1.2rem;
-  text-align: center;
-}
-.actions {
-  display: flex;
-  gap: 0.7rem;
-  justify-content: center;
-  margin-top: 0.5rem;
-}
-.actions button {
-  padding: 0.5rem 1.1rem;
+  border: none;
   border-radius: 8px;
-  border: 0;
+  padding: 0.7rem 1.5rem;
+  font-size: 1.1rem;
   cursor: pointer;
-  font-weight: 700;
-  font-size: 1rem;
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.08);
   transition: background 0.18s;
-}
-.actions button:first-child {
+  color: #fff;
   background: #667eea;
-  color: white;
 }
-.actions button:last-child {
-  background: #f3f3f3;
-  color: #666;
+.assign-task-btn:hover,
+.assign-bad-btn:hover,
+.assign-reward-btn:hover {
+  background: #5a67d8;
 }
-.actions button:last-child:hover {
-  background: #e2e8f0;
+.assign-bad-btn {
+  background: #ef4444;
 }
-
-/* Mobile adjustments */
-@media (max-width: 900px) {
-  .layout {
-    grid-template-columns: 1fr;
-  }
+.assign-bad-btn:hover {
+  background: #dc2626;
 }
-
-@media (max-width: 480px) {
-  .container {
-    padding: 1rem;
-  }
-  .back-btn {
-    padding: 0.45rem 0.75rem;
-    font-size: 0.95rem;
-    margin-bottom: 1rem;
-  }
-  .main {
-    gap: 1rem;
-  }
-  .placeholder {
-    padding: 0.75rem;
-    min-height: 80px;
-  }
+.assign-reward-btn {
+  background: #38c172;
+}
+.assign-reward-btn:hover {
+  background: #2f855a;
 }
 </style>