Made changes to CSS and merged together.

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

@@ -173,4 +173,11 @@
   --toggle-btn-bad-color: #fff;
   --toggle-btn-bad-shadow: #e53e3e33;
   --toggle-btn-bad-border: #e53e3e;
+
+  /*TaskView and RewardView styles*/
+  --create-btn-bg: #fff;
+  --create-btn-color: #2563eb;
+  --create-btn-border: #2563eb;
+  --create-btn-hover-bg: #2563eb;
+  --create-btn-hover-color: #fff;
 }

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

@@ -94,6 +94,49 @@
   font-size: 1rem;
 }
 
+.no-message {
+  margin: 2rem 0;
+  font-size: 1.15rem;
+  font-weight: 600;
+  text-align: center;
+  color: #fdfdfd;
+  line-height: 1.5;
+}
+.sub-message {
+  margin-top: 0.3rem;
+  font-size: 1rem;
+  font-weight: 400;
+  color: #b5ccff;
+}
+
+/* Floating Action Button (FAB) */
+.fab {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  background: var(--fab-bg);
+  color: #fff;
+  border: none;
+  border-radius: 50%;
+  width: 56px;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+  font-size: 24px;
+  z-index: 1300;
+}
+
+.fab:hover {
+  background: var(--fab-hover-bg);
+}
+
+.fab:active {
+  background: var(--fab-active-bg);
+}
+
 /* Responsive Adjustments */
 @media (max-width: 900px) {
   .layout {

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

@@ -273,7 +273,7 @@ onBeforeUnmount(() => {
 
 <template>
   <div>
-    <div v-if="children.length === 0" class="no-children-message">
+    <div v-if="children.length === 0" class="no-message">
       <div>No children</div>
       <div class="sub-message">
         <template v-if="!isParentAuthenticated">
@@ -582,48 +582,6 @@ h1 {
   text-align: center;
 }
 
-/* Floating Action Button (FAB) */
-.fab {
-  position: fixed;
-  bottom: 2rem;
-  right: 2rem;
-  background: var(--fab-bg);
-  color: #fff;
-  border: none;
-  border-radius: 50%;
-  width: 56px;
-  height: 56px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  cursor: pointer;
-  font-size: 24px;
-  z-index: 1300;
-}
-
-.fab:hover {
-  background: var(--fab-hover-bg);
-}
-
-.fab:active {
-  background: var(--fab-active-bg);
-}
-
-.no-children-message {
-  margin: 2rem 0;
-  font-size: 1.15rem;
-  font-weight: 600;
-  text-align: center;
-  color: var(--no-children-color);
-  line-height: 1.5;
-}
-.sub-message {
-  margin-top: 0.3rem;
-  font-size: 1rem;
-  font-weight: 400;
-  color: var(--sub-message-color);
-}
 .sign-in-btn {
   background: var(--sign-in-btn-bg);
   color: var(--sign-in-btn-color);

web/vue-app/src/components/reward/RewardView.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="task-view">
+  <div class="reward-view">
-    <div v-if="rewardCountRef == 0" class="no-rewards-message">
+    <div v-if="rewardCountRef == 0" class="no-message">
       <div>No Rewards</div>
       <div class="sub-message">
         <button class="create-btn" @click="createReward">Create</button> a reward
@@ -87,93 +87,11 @@ const createReward = () => {
   padding: 0;
   min-height: 0;
 }
-.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: 240px;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
-  text-align: center;
-}
-.actions {
-  display: flex;
-  gap: 3rem; /* Increased gap for more space between buttons */
-  justify-content: center;
-  margin-top: 0.5rem;
-}
-.actions button {
-  padding: 1rem 2.2rem; /* Bigger touch area */
-  border-radius: 12px;
-  border: 0;
-  cursor: pointer;
-  font-weight: 700;
-  font-size: 1.25rem; /* Larger text */
-  transition: background 0.18s;
-  min-width: 120px; /* Ensures buttons are wide enough */
-}
-.actions button:first-child {
-  background: #ef4444;
-  color: #fff;
-}
-.actions button:last-child {
-  background: #f3f3f3;
-  color: #666;
-}
-.actions button:last-child:hover {
-  background: #e2e8f0;
-}
 
-/* Floating Action Button styles */
-.fab {
-  position: fixed;
-  bottom: 2rem;
-  right: 2rem;
-  background: #667eea;
-  color: #fff;
-  border: none;
-  border-radius: 50%;
-  width: 56px;
-  height: 56px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  cursor: pointer;
-  font-size: 24px;
-  z-index: 1300;
-}
-.fab:hover {
-  background: #5a67d8;
-}
-
-.no-rewards-message {
-  margin: 2rem 0;
-  font-size: 1.15rem;
-  font-weight: 600;
-  text-align: center;
-  color: #fdfdfd;
-  line-height: 1.5;
-}
-.sub-message {
-  margin-top: 0.3rem;
-  font-size: 1rem;
-  font-weight: 400;
-  color: #b5ccff;
-}
 .create-btn {
-  background: #fff;
+  background: var(--task-create-btn-bg);
-  color: #2563eb;
+  color: var(--task-create-btn-color);
-  border: 2px solid #2563eb;
+  border: 2px solid var(--task-create-btn-border);
   border-radius: 6px;
   font-size: 0.85rem;
   font-weight: 600;
@@ -185,7 +103,7 @@ const createReward = () => {
     color 0.18s;
 }
 .create-btn:hover {
-  background: #2563eb;
+  background: var(--task-create-btn-hover-bg);
-  color: #fff;
+  color: var(--task-create-btn-hover-color);
 }
 </style>

web/vue-app/src/components/task/TaskView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="task-view">
-    <div v-if="taskCountRef === 0" class="no-tasks-message">
+    <div v-if="taskCountRef === 0" class="no-message">
       <div>No Tasks</div>
       <div class="sub-message">
         <button class="create-btn" @click="createTask">Create</button> a task
@@ -89,93 +89,11 @@ const createTask = () => {
   padding: 0;
   min-height: 0;
 }
-.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: 240px;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
-  text-align: center;
-}
-.actions {
-  display: flex;
-  gap: 3rem; /* Increased gap for more space between buttons */
-  justify-content: center;
-  margin-top: 0.5rem;
-}
-.actions button {
-  padding: 1rem 2.2rem; /* Bigger touch area */
-  border-radius: 12px;
-  border: 0;
-  cursor: pointer;
-  font-weight: 700;
-  font-size: 1.25rem; /* Larger text */
-  transition: background 0.18s;
-  min-width: 120px; /* Ensures buttons are wide enough */
-}
-.actions button:first-child {
-  background: #ef4444;
-  color: #fff;
-}
-.actions button:last-child {
-  background: #f3f3f3;
-  color: #666;
-}
-.actions button:last-child:hover {
-  background: #e2e8f0;
-}
 
-/* Floating Action Button styles */
-.fab {
-  position: fixed;
-  bottom: 2rem;
-  right: 2rem;
-  background: #667eea;
-  color: #fff;
-  border: none;
-  border-radius: 50%;
-  width: 56px;
-  height: 56px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  cursor: pointer;
-  font-size: 24px;
-  z-index: 1300;
-}
-.fab:hover {
-  background: #5a67d8;
-}
-
-.no-tasks-message {
-  margin: 2rem 0;
-  font-size: 1.15rem;
-  font-weight: 600;
-  text-align: center;
-  color: #fdfdfd;
-  line-height: 1.5;
-}
-.sub-message {
-  margin-top: 0.3rem;
-  font-size: 1rem;
-  font-weight: 400;
-  color: #b5ccff;
-}
 .create-btn {
-  background: #fff;
+  background: var(--task-create-btn-bg);
-  color: #2563eb;
+  color: var(--task-create-btn-color);
-  border: 2px solid #2563eb;
+  border: 2px solid var(--task-create-btn-border);
   border-radius: 6px;
   font-size: 0.85rem;
   font-weight: 600;
@@ -187,7 +105,7 @@ const createTask = () => {
     color 0.18s;
 }
 .create-btn:hover {
-  background: #2563eb;
+  background: var(--task-create-btn-hover-bg);
-  color: #fff;
+  color: var(--task-create-btn-hover-color);
 }
 </style>

web/vue-app/src/main.ts

@@ -5,6 +5,7 @@ import router from './router'
 import '@/assets/actions-shared.css'
 import '@/assets/layout-shared.css'
 import '@/assets/button-shared.css'
+import '@/assets/view-shared.css'
 
 const app = createApp(App)