Made changes to CSS and merged together.

web/vue-app/src/App.vue

@@ -12,17 +12,4 @@ body {
   margin: 0;
   padding: 0;
 }
-
-:root {
-  --primary: #667eea;
-  --secondary: #7257b3;
-  --accent: #cbd5e1;
-  --header-bg: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
-  --button-bg: #fff;
-  --button-active-bg: var(--secondary);
-  --button-hover-bg: #e6eaff;
-  --button-text: var(--primary);
-  --button-active-text: #fff;
-  --app-version: var(--accent);
-}
 </style>

web/vue-app/src/assets/actions-shared.css

@@ -17,10 +17,10 @@
 
 /* Unified error style */
 .error {
-  color: #e53e3e;
+  color: var(--error);
   margin-top: 0.7rem;
   text-align: center;
-  background: rgba(255, 107, 107, 0.1);
+  background: var(--error-bg);
   border-radius: 8px;
   padding: 1rem;
 }
@@ -34,3 +34,4 @@
     font-size: 1.05rem;
     min-width: 90px;
   }
+}

web/vue-app/src/assets/button-shared.css

@@ -15,40 +15,40 @@
 
 /* Primary button (e.g., Save, Confirm) */
 .btn-primary {
-  background: #667eea;
+  background: var(--btn-primary);
   color: #fff;
 }
 .btn-primary:hover,
 .btn-primary:focus {
-  background: #5a67d8;
+  background: var(--btn-primary-hover);
 }
 
 /* Secondary button (e.g., Cancel) */
 .btn-secondary {
-  background: #f3f3f3;
+  background: var(--btn-secondary);
-  color: #666;
+  color: var(--btn-secondary-text);
 }
 .btn-secondary:hover,
 .btn-secondary:focus {
-  background: #e2e8f0;
+  background: var(--btn-secondary-hover);
 }
 
 /* Danger button (e.g., Delete) */
 .btn-danger {
-  background: #ef4444;
+  background: var(--btn-danger);
   color: #fff;
 }
 .btn-danger:hover,
 .btn-danger:focus {
-  background: #dc2626;
+  background: var(--btn-danger-hover);
 }
 
 /* Green button (e.g., Confirm) */
 .btn-green {
-  background: #22c55e;
+  background: var(--btn-green);
   color: #fff;
 }
 .btn-green:hover,
 .btn-green:focus {
-  background: #16a34a;
+  background: var(--btn-green-hover);
 }

web/vue-app/src/assets/edit-forms.css

@@ -4,9 +4,9 @@
 .task-edit-view {
   max-width: 400px;
   margin: 2rem auto;
-  background: #fff;
+  background: var(--form-bg);
   border-radius: 12px;
-  box-shadow: 0 4px 24px #667eea22;
+  box-shadow: 0 4px 24px var(--form-shadow);
   padding: 2rem 2.2rem 1.5rem 2.2rem;
 }
 
@@ -16,7 +16,7 @@
 .task-edit-view h2 {
   text-align: center;
   margin-bottom: 1.5rem;
-  color: #667eea;
+  color: var(--form-heading);
 }
 
 .form-group,
@@ -25,7 +25,7 @@
   display: block;
   margin-bottom: 1.1rem;
   font-weight: 500;
-  color: #444;
+  color: var(--form-label);
   width: 100%;
 }
 
@@ -40,14 +40,14 @@ input[type='number'],
   margin-top: 0.4rem;
   padding: 0.5rem;
   border-radius: 7px;
-  border: 1px solid #cbd5e1;
+  border: 1px solid var(--form-input-border);
   font-size: 1rem;
-  background: #f8fafc;
+  background: var(--form-input-bg);
   box-sizing: border-box;
 }
 
 .loading-message {
   text-align: center;
-  color: #666;
+  color: var(--form-loading);
   margin-bottom: 1.2rem;
 }

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

@@ -0,0 +1,55 @@
+:root {
+  --primary: #667eea;
+  --secondary: #7257b3;
+  --accent: #cbd5e1;
+  --header-bg: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+  --button-bg: #fff;
+  --button-active-bg: var(--secondary);
+  --button-hover-bg: #e6eaff;
+  --button-text: var(--primary);
+  --button-active-text: #fff;
+  --app-version: var(--accent);
+
+  /* Add these: */
+  --btn-primary: #667eea;
+  --btn-primary-hover: #5a67d8;
+  --btn-secondary: #f3f3f3;
+  --btn-secondary-hover: #e2e8f0;
+  --btn-secondary-text: #666;
+  --btn-danger: #ef4444;
+  --btn-danger-hover: #dc2626;
+  --btn-green: #22c55e;
+  --btn-green-hover: #16a34a;
+
+  --error: #e53e3e;
+  --error-bg: rgba(255, 107, 107, 0.1);
+
+  --form-bg: #fff;
+  --form-shadow: #667eea22;
+  --form-heading: #667eea;
+  --form-label: #444;
+  --form-input-bg: #f8fafc;
+  --form-input-border: #cbd5e1;
+  --form-loading: #666;
+
+  --list-bg: #fff5;
+  --list-item-bg: #f8fafc;
+  --list-item-border-good: #38c172;
+  --list-item-border-bad: #e53e3e;
+  --list-item-bg-good: #f0fff4;
+  --list-item-bg-bad: #fff5f5;
+  --list-image-bg: #eee;
+  --delete-btn-hover-bg: #ffeaea;
+  --delete-btn-hover-shadow: #ef444422;
+  --checkbox-accent: #667eea;
+  --list-loading-color: #888;
+
+  --modal-bg: #fff;
+  --modal-text: #222;
+  --modal-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
+  --dialog-message: #444;
+  --dialog-child-name: #667eea;
+  --info-image-bg: #eee;
+  --info-points: #667eea;
+  --loading-color: #fff;
+}

web/vue-app/src/assets/list-shared.css

@@ -9,7 +9,7 @@
   display: flex;
   flex-direction: column;
   gap: 0.7rem;
-  background: #fff5;
+  background: var(--list-bg);
   padding: 0.2rem 0.2rem 0.2rem;
   border-radius: 12px;
 }
@@ -18,10 +18,10 @@
 .list-item {
   display: flex;
   align-items: center;
-  border: 2px outset #38c172;
+  border: 2px outset var(--list-item-border-good);
   border-radius: 8px;
   padding: 0.2rem 1rem;
-  background: #f8fafc;
+  background: var(--list-item-bg);
   font-size: 1.05rem;
   font-weight: 500;
   transition: border 0.18s;
@@ -32,12 +32,12 @@
   box-sizing: border-box;
 }
 .list-item.bad {
-  border-color: #e53e3e;
+  border-color: var(--list-item-border-bad);
-  background: #fff5f5;
+  background: var(--list-item-bg-bad);
 }
 .list-item.good {
-  border-color: #38c172;
+  border-color: var(--list-item-border-good);
-  background: #f0fff4;
+  background: var(--list-item-bg-good);
 }
 
 /* Image styles */
@@ -47,7 +47,7 @@
   object-fit: cover;
   border-radius: 8px;
   margin-right: 0.7rem;
-  background: #eee;
+  background: var(--list-image-bg);
   flex-shrink: 0;
 }
 
@@ -83,8 +83,8 @@
   opacity: 0.92;
 }
 .delete-btn:hover {
-  background: #ffeaea;
+  background: var(--delete-btn-hover-bg);
-  box-shadow: 0 0 0 2px #ef444422;
+  box-shadow: 0 0 0 2px var(--delete-btn-hover-shadow);
   opacity: 1;
 }
 .delete-btn svg {
@@ -96,7 +96,7 @@
   margin-left: 1rem;
   width: 1.2em;
   height: 1.2em;
-  accent-color: #667eea;
+  accent-color: var(--checkbox-accent);
   cursor: pointer;
 }
 
@@ -104,7 +104,7 @@
 .loading,
 .empty {
   margin: 1.2rem 0;
-  color: #888;
+  color: var(--list-loading-color);
   font-size: 1.15rem;
   font-weight: 600;
   text-align: center;

web/vue-app/src/assets/view-shared.css

@@ -13,7 +13,7 @@
 }
 
 .loading {
-  color: white;
+  color: var(--loading-color);
   min-height: 200px;
   display: flex;
   align-items: center;
@@ -32,25 +32,25 @@
   z-index: 1200;
 }
 .modal {
-  background: #fff;
+  background: var(--modal-bg);
-  color: #222;
+  color: var(--modal-text);
   padding: 1.5rem 2rem;
   border-radius: 12px;
   min-width: 240px;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--modal-shadow);
   text-align: center;
 }
 
 /* Dialog Message */
 .dialog-message {
   font-size: 1.08rem;
-  color: #444;
+  color: var(--dialog-message);
   font-weight: 500;
   margin-bottom: 1.2rem;
   text-align: center;
 }
 .dialog-message .child-name {
-  color: #667eea;
+  color: var(--dialog-child-name);
   font-weight: 700;
   margin-left: 2px;
 }
@@ -71,7 +71,7 @@
   height: 72px;
   object-fit: cover;
   border-radius: 8px;
-  background: #eee;
+  background: var(--info-image-bg);
 }
 .details,
 .reward-details,
@@ -89,7 +89,7 @@
 .points,
 .reward-points,
 .task-points {
-  color: #667eea;
+  color: var(--info-points);
   font-weight: 500;
   font-size: 1rem;
 }

web/vue-app/src/main.ts

@@ -1,3 +1,4 @@
+import '@/assets/global.css'
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'