add new button type

resources/js/App.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import Footer from "./components/BottomFleur.vue/index.js";
 </script>
 
 <template>

resources/js/components/SButton.vue

@@ -0,0 +1,48 @@
+<script setup>
+import {ref, Transition} from 'vue';
+
+const hover = ref(false);
+</script>
+
+<template>
+    <div class="flex-container">
+        <Transition>
+            <img :src="'/skonk/main_menu_pointer.png'" class="cursor" v-if="hover">
+        </Transition>
+        <button @click="$emit('click')" @mouseover="hover = true" @mouseleave="hover = false">
+            <slot>
+
+            </slot>
+        </button>
+        <Transition>
+            <img :src="'/skonk/main_menu_pointer.png'" class="cursor flipped" v-if="hover">
+        </Transition>
+    </div>
+</template>
+
+<style scoped>
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.15s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+.flex-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+}
+button {
+    font-size: 3.5vh;
+}
+.cursor {
+    height: 30px;
+}
+.flipped {
+    rotate: 180deg;
+}
+</style>

resources/js/components/Wish.vue

@@ -88,9 +88,6 @@ img.cursor{
     right: 10px;
     bottom: 0px;
 }
-.large-container:hover {
-    scale: 1.01;
-}
 .cursor {
     position: absolute;
     width: 100%;

resources/js/components/WishPanel.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { onMounted } from 'vue';
+import SButton from './SButton.vue';
 
 const emit = defineEmits(['closeWish']);
 const props = defineProps({
@@ -28,12 +29,12 @@ onMounted(() => {
         </p>
         <br>
         <div class="button-container">
-            <button>
+            <SButton @click="emit('closeWish')">
                 Promise
-            </button><br>
-            <button  @click="emit('closeWish')">
+            </SButton>
+            <SButton @click="emit('closeWish')">
                 Back
-            </button>
+            </SButton>
         </div>
     </div>
 </template>