Made changes to CSS and merged together.

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;
-  color: #2563eb;
-  border: 2px solid #2563eb;
+  background: var(--task-create-btn-bg);
+  color: var(--task-create-btn-color);
+  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;
-  color: #fff;
+  background: var(--task-create-btn-hover-bg);
+  color: var(--task-create-btn-hover-color);
 }
 </style>