add back button

resources/js/components/WishPanel.vue

@@ -26,28 +26,42 @@ onMounted(() => {
         <p>
             {{ wish.description }}
         </p>
-
+        <br>
+        <div class="button-container">
+            <button>
+                Promise
+            </button><br>
+            <button  @click="emit('closeWish')">
+                Back
+            </button>
+        </div>
     </div>
 </template>
 
 <style lang="css" scoped>
+.button-container {
+    text-align: center;
+}
+button {
+    font-size: 3.5vh;
+}
 
 .main-panel {
     width: 100%;
-    margin: 30px;
+    padding: 30px;
     border-radius: 10px;
 }
 
 h1 {
     font-size: 3vh;
-    margin-right: 40px;
     text-wrap: wrap;
+    padding-right: 40px;
 }
 
 p {
     font-size: 2vh;
     color: rgb(200,200,200);
-    margin-right: 50px;
+    padding-right: 40px;
     margin-top: 40px;
     text-wrap: wrap;
 }

resources/js/pages/HomeView.vue

@@ -45,7 +45,7 @@ onMounted(() => {
         </Transition>
         <Transition>
             <div v-if="selected!=-1">
-                <Wish :wish="wishes[selected]" selected :index="selected"  @selectedWish="selectedWish"/>
+                <Wish :wish="wishes[selected]" selected :index="selected" @selectedWish="selectedWish"/>
                 <WishPanel :wish="wishes[selected]" @closeWish="selected = -1"></WishPanel>
             </div>
         </Transition>
@@ -64,13 +64,11 @@ onMounted(() => {
 .push{
     height: 50px;
 }
-.v-enter-active,
+.v-enter-active {
-.v-leave-active {
   transition: opacity 0.5s ease;
 }
 
-.v-enter-from,
+.v-enter-from {
-.v-leave-to {
   opacity: 0;
 }
 </style>