Made changes to CSS and merged together.

web/vue-app/src/components/notification/NotificationList.vue

@@ -3,6 +3,7 @@ import { ref, onMounted, onUnmounted } from 'vue'
 import { getCachedImageUrl } from '../../common/imageCache'
 import type { PendingReward, Event, ChildRewardRequestEventPayload } from '@/common/models'
 import { eventBus } from '@/common/eventBus'
+import '@/assets/list-shared.css'
 
 const emit = defineEmits(['item-clicked'])
 
@@ -70,19 +71,19 @@ function handleItemClick(item: PendingReward) {
 </script>
 
 <template>
-  <div>
+  <div class="centered-list-container">
     <div v-if="loading" class="loading">Loading notifications...</div>
     <div v-else-if="error" class="error">{{ error }}</div>
     <div v-else-if="notifications.length === 0" class="empty">No Notifications</div>
-    <div v-else class="notification-listbox">
+    <div v-else class="listbox">
       <div v-for="(item, idx) in notifications" :key="item.id">
-        <div class="notification-list-item" @click="handleItemClick(item)">
+        <div class="list-item notification-centered" @click="handleItemClick(item)">
           <div class="child-info">
             <img
               v-if="item.child_image_url"
               :src="item.child_image_url"
               alt="Child"
-              class="child-image"
+              class="list-image"
             />
             <span class="child-name">{{ item.child_name }}</span>
           </div>
@@ -93,61 +94,30 @@ function handleItemClick(item: PendingReward) {
               v-if="item.reward_image_url"
               :src="item.reward_image_url"
               alt="Reward"
-              class="reward-image"
+              class="list-image"
             />
           </div>
         </div>
-        <div v-if="idx < notifications.length - 1" class="notification-separator"></div>
+        <div v-if="idx < notifications.length - 1" class="list-separator"></div>
       </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-.notification-listbox {
-  flex: 1 1 auto;
-  width: auto;
-  max-width: 480px;
-  max-height: calc(100vh - 4.5rem);
-  overflow-y: auto;
-  margin: 0.2rem 0 0 0;
+.centered-list-container {
+  width: 100%;
   display: flex;
-  flex-direction: column;
-  gap: 0.7rem;
-  background: #fff5;
-  padding: 0.2rem 0.2rem 0.2rem;
-  border-radius: 12px;
+  justify-content: center;
 }
-.notification-list-item {
-  display: flex;
-  align-items: center;
-  border: 2px outset #ef4444;
-  border-radius: 8px;
-  padding: 0.2rem 1rem;
-  background: #f8fafc;
-  font-size: 1.05rem;
-  font-weight: 500;
-  transition: border 0.18s;
-  margin-bottom: 0.2rem;
-  margin-left: 0.2rem;
-  margin-right: 0.2rem;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
-  box-sizing: border-box;
-  justify-content: space-between;
+.notification-centered {
+  justify-content: center;
 }
 .child-info {
   display: flex;
   align-items: center;
   gap: 0.7rem;
 }
-.child-image {
-  width: 36px;
-  height: 36px;
-  object-fit: cover;
-  border-radius: 8px;
-  background: #eee;
-  flex-shrink: 0;
-}
 .child-name {
   font-weight: 600;
   color: #667eea;
@@ -161,37 +131,6 @@ function handleItemClick(item: PendingReward) {
   font-weight: 600;
   color: #ef4444;
 }
-.reward-image {
-  width: 36px;
-  height: 36px;
-  object-fit: cover;
-  border-radius: 8px;
-  background: #eee;
-  flex-shrink: 0;
-}
-.loading,
-.error,
-.empty {
-  margin: 2rem 0;
-  font-size: 1.15rem;
-  font-weight: 600;
-  text-align: center;
-  color: #fdfdfd;
-  line-height: 1.5;
-}
-.error {
-  color: #ef4444; /* Red-500 for errors */
-  background: #fff1f2; /* Red-50 for error background */
-}
-.notification-list-item:last-child {
-  margin-bottom: 0;
-}
-.notification-separator {
-  height: 0px;
-  background: #0000;
-  margin: 0rem 0.2rem;
-  border-radius: 0px;
-}
 .requested-text {
   margin: 0 0.7rem;
   font-weight: 500;