fix: Fixed close button for modals positioning

25Ericcheong · May 18, 2024 · f234849 · f234849
1 parent 5128ce8
commit f234849
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/src/components/menu/bingsu-menu-modal.vue b/src/components/menu/bingsu-menu-modal.vue
@@ -135,9 +135,9 @@ function handleBingsuConfirmation() {
     ref="dialog"
     class="backdrop:bg-blackbq backdrop:opacity-50 h-full w-[390px] bg-creamyellowbq"
   >
-    <div class="fixed h-0">
+    <div class="fixed top-14 left-[50%] ml-[125px]">
       <button
-        class="w-[40px] h-[40px] bg-darkorangebq absolute top-5 left-[335px] rounded-full"
+        class="w-[40px] h-[40px] bg-darkorangebq rounded-full"
         @click="closeBinqsuMenuModal"
       >
         <img class="h-full w-full" src="../../assets/icons/cross.jpg" />
@@ -146,7 +146,7 @@ function handleBingsuConfirmation() {
     <img
       :src="getImageUrlForMenu(props.bingsuImageName, 'bingsus')"
       alt="Image of bingsu that Binq has specially created"
-      class="h-[40%] w-full mb-8"
+      class="h-[50%] w-full mb-8"
     />
     <section class="mx-3 text-darkorangebq">
       <div

diff --git a/src/components/menu/drinks-menu-modal.vue b/src/components/menu/drinks-menu-modal.vue
@@ -118,9 +118,9 @@ function handleDrinksConfirmation() {
     ref="dialog"
     class="backdrop:bg-blackbq backdrop:opacity-50 h-full w-[390px] bg-creamyellowbq"
   >
-    <div class="fixed h-0">
+    <div class="fixed top-14 left-[50%] ml-[125px]">
       <button
-        class="w-[40px] h-[40px] bg-darkorangebq absolute top-5 left-[335px] rounded-full"
+        class="w-[40px] h-[40px] bg-darkorangebq rounded-full"
         @click="closeDrinksMenuModal"
       >
         <img class="h-full w-full" src="../../assets/icons/cross.jpg" />