Made changes to CSS and merged together.

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

@@ -355,7 +355,7 @@ onBeforeUnmount(() => {
         <p>Are you sure you want to permanently delete this child?</p>
         <div class="actions">
           <button
-            class="btn cancel"
+            class="btn btn-secondary"
             @click="
               () => {
                 confirmDeleteVisible = false
@@ -365,8 +365,8 @@ onBeforeUnmount(() => {
           >
             Cancel
           </button>
-          <button class="btn delete" @click="performDelete" :disabled="deleting">
-            {{ deleting ? 'Deleting…' : 'Confirm Delete' }}
+          <button class="btn btn-danger" @click="performDelete" :disabled="deleting">
+            {{ deleting ? 'Deleting…' : 'Delete' }}
           </button>
         </div>
       </div>
@@ -402,7 +402,6 @@ h1 {
 }
 
 .loading,
-.error,
 .empty {
   display: flex;
   align-items: center;
@@ -413,13 +412,6 @@ h1 {
   text-align: center;
 }
 
-.error {
-  color: #ff6b6b;
-  background: rgba(255, 107, 107, 0.1);
-  border-radius: 8px;
-  padding: 1rem;
-}
-
 .grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
@@ -462,6 +454,7 @@ h1 {
   color: #666;
   border-radius: 6px;
   box-sizing: border-box;
+  font-size: 1.5rem;
 }
 
 /* consistent focus ring without changing layout */
@@ -473,27 +466,46 @@ h1 {
 /* Menu overlays the card and does NOT alter flow */
 .kebab-menu {
   position: absolute;
-  top: 44px; /* place below the button */
-  right: 0; /* align to kebab button's right edge */
+  top: 44px;
+  right: 0;
   margin: 0;
   min-width: 150px;
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  background: #f7fafcc7; /* subtle light gray for contrast */
+  border-radius: 10px;
+  border: 1.5px solid #bcc1c9; /* subtle border for definition */
+  box-shadow:
+    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 {
-  padding: 0.6rem 0.9rem;
+  padding: 1.1rem 0.9rem; /* Increase vertical padding for bigger touch area */
   background: transparent;
   border: 0;
   text-align: left;
   cursor: pointer;
   font-weight: 600;
   color: #333;
+  font-size: 1.1rem; /* Slightly larger text for readability */
+}
+
+.menu-item + .menu-item {
+  margin-top: 0.5rem; /* Add space between menu items */
+}
+
+@media (max-width: 600px) {
+  .menu-item {
+    padding: 0.85rem 0.7rem;
+    font-size: 1rem;
+  }
+  .menu-item + .menu-item {
+    margin-top: 0.35rem;
+  }
 }
 
 .menu-item:hover {
@@ -564,31 +576,6 @@ h1 {
   font-size: 1.05rem;
 }
 
-.actions {
-  display: flex;
-  gap: 0.5rem;
-  justify-content: center;
-  margin-top: 1rem;
-}
-
-.btn {
-  padding: 0.5rem 0.8rem;
-  border-radius: 8px;
-  border: 0;
-  cursor: pointer;
-  font-weight: 700;
-}
-
-.btn.cancel {
-  background: #f3f3f3;
-  color: #666;
-}
-
-.btn.delete {
-  background: #ff4d4f;
-  color: white;
-}
-
 .points {
   font-size: 1.05rem;
   color: #444;