some frontend changes

resources/js/components/WishPanel.vue

@@ -1,10 +1,17 @@
-<script setup lang="ts">
+<script setup>
 import { onMounted } from 'vue';
 
-const panelOn = defineModel({default: false});
+const emit = defineEmits(['closeWish']);
+const props = defineProps({
+    selected: {
+        type: Boolean,
+        default: false,
+    },
+    wish: Object,
+});
 
-function handleClose(event:KeyboardEvent) {
-    if (panelOn.value) if (event.key == 'Escape') panelOn.value = false;;
+function handleClose(event) {
+   if (event.key == 'Escape') emit('closeWish');
 }
 
 onMounted(() => {
@@ -12,47 +19,30 @@ onMounted(() => {
 });
 </script>
 
-<template >
-    <template v-if="panelOn">
-        <div class="panel-container background" >
-
-        </div>
+<template>
         <div class="panel-container main-panel">
-
+            <h1>{{ wish.title }}</h1>
 
         </div>
-    </template>
 </template>
 
 <style lang="css" scoped>
 
-.background {
-    height: 100%;
-    width: 100%;
-
-    filter: opacity(30%);
-
-    background-color: black;
-    z-index: 90;
-}
-
 .main-panel {
-    height: 90%;
-    width: 90%;
-
-    filter: opacity(85%);
+    width: 100%;
+    margin: 30px;
 
     border-radius: 10px;
-
-    background-color: black;
 }
 
-.panel-container {
-    position: absolute;
+h1 {
+    font-size: 2vh;
+}
 
+
+.panel-container {
     top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%);
 
     z-index: 100;
 }