feat: update reward version to 1.0.13 and modify dialog button labels for clarity

frontend/src/components/child/RewardConfirmDialog.vue

@@ -1,20 +1,22 @@
 <template>
-  <ModalDialog
-    v-if="reward"
-    :imageUrl="reward.image_url"
-    :title="reward.name"
-    :subtitle="reward.points_needed === 0 ? 'Reward Ready!' : reward.points_needed + ' more points'"
-    dialogMaxWidth="760px"
-    @backdrop-click="$emit('cancel')"
-  >
-    <div class="modal-message">
-      Redeem this reward for <span class="child-name">{{ childName }}</span
-      >?
-    </div>
-    <div class="modal-actions">
-      <button @click="$emit('confirm')" class="btn btn-primary">Yes</button>
-      <button v-if="reward?.redeeming" @click="$emit('deny')" class="btn btn-danger">Deny</button>
-      <button @click="$emit('cancel')" class="btn btn-secondary">Cancel</button>
+  <ModalDialog v-if="reward" @backdrop-click="$emit('cancel')">
+    <div class="approve-dialog">
+      <img v-if="reward.image_url" :src="reward.image_url" alt="Reward" class="reward-image" />
+      <p class="item-label">{{ reward.name }}</p>
+      <p class="subtitle">
+        {{ reward.points_needed === 0 ? 'Reward Ready!' : reward.points_needed + ' more points' }}
+      </p>
+      <p class="message">
+        Redeem this reward for <strong>{{ childName }}</strong
+        >?
+      </p>
+      <div class="actions">
+        <button @click="$emit('confirm')" class="btn btn-primary">Yes</button>
+        <button v-if="reward.redeeming" @click="$emit('deny')" class="btn btn-secondary">
+          Reject
+        </button>
+        <button v-else @click="$emit('cancel')" class="btn btn-secondary">No</button>
+      </div>
     </div>
   </ModalDialog>
 </template>
@@ -36,14 +38,54 @@ defineEmits<{
 </script>
 
 <style scoped>
-.modal-message {
-  margin-bottom: 1.2rem;
-  font-size: 1rem;
-  color: var(--modal-message-color, #333);
+.approve-dialog {
+  text-align: center;
+  padding: 0.5rem;
 }
 
-.child-name {
+.reward-image {
+  width: 72px;
+  height: 72px;
+  object-fit: cover;
+  border-radius: 8px;
+  background: var(--info-image-bg);
+  margin-bottom: 0.75rem;
+}
+
+.item-label {
+  font-size: 1.2rem;
+  font-weight: 700;
+  color: var(--dialog-child-name);
+  margin-bottom: 0.15rem;
+}
+
+.subtitle {
+  font-size: 1rem;
   font-weight: 600;
-  color: var(--text-primary, #333);
+  color: var(--dialog-child-name);
+  margin-bottom: 1rem;
+}
+
+.message {
+  font-size: 1rem;
+  color: var(--dialog-message);
+  margin-bottom: 1.5rem;
+}
+
+.actions {
+  display: flex;
+  gap: 1.5rem;
+  justify-content: center;
+}
+
+.actions button {
+  padding: 0.7rem 1.8rem;
+  border-radius: 10px;
+  border: 0;
+  cursor: pointer;
+  font-weight: 700;
+  font-size: 1.05rem;
+  transition: background 0.18s;
+  min-width: 100px;
 }
 </style>