🔀 Merge #1989 into deploy/rinkeby

likecoin · Dec 20, 2024 · 243c874 · 243c874
2 parents fa14de9 + 85a0a83
commit 243c874
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/src/components/BottomDialog.vue b/src/components/BottomDialog.vue
@@ -1,7 +1,11 @@
 <template>
-  <div class="fixed inset-0 z-50 bg-black bg-opacity-[30%]">
+  <div
+    class="fixed inset-0 z-[1000001] bg-opacity-25 backdrop-filter bg-dark-gray backdrop-blur-sm"
+    @click="close"
+  >
     <div
       class="fixed left-0 bottom-0 flex flex-col items-center gap-[8px] w-full bg-white rounded-t-[16px]"
+      @click.stop
     >
       <div class="relative w-full">
         <ButtonV2
@@ -18,11 +22,11 @@
       <div
         class="flex items-center justify-center w-full pt-[12px] pb-[8px] px-[20px]"
       >
-        <h5 class="text-[18px] font-600 text-black" v-text="title" />
+        <p class="block text-[18px] font-600 text-black" v-text="title" />
       </div>
       <div class="w-full h-[1px] bg-shade-gray" />
 
-      <div class="px-[20px] pt-[18px] pb-[24px]">
+      <div class="px-[20px] pt-[18px] pb-[48px]">
         <slot name="content" />
       </div>
     </div>
@@ -37,9 +41,17 @@ export default {
       default: undefined,
     },
   },
+  mounted() {
+    // Prevent scrolling on the body when the dialog is open
+    document.body.classList.add('overflow-hidden');
+  },
+  beforeUnmount() {
+    document.body.classList.remove('overflow-hidden');
+  },
   methods: {
     close() {
       this.$emit('close');
+      document.body.classList.remove('overflow-hidden');
     },
   },
 };

diff --git a/src/components/NFTBook/SpecTableValue.vue b/src/components/NFTBook/SpecTableValue.vue
@@ -3,7 +3,7 @@
     <div :class="['font-[600]', textStyle]" v-text="text" />
     <div
       v-if="tooltipText"
-      class="relative hidden group laptop:block"
+      class="relative z-[300] hidden group laptop:block"
       @mouseenter="hoverTooltips"
     >
       <IconInfo />

diff --git a/src/components/NFTBook/Tooltips.vue b/src/components/NFTBook/Tooltips.vue
@@ -20,8 +20,11 @@
       'shadow-md',
     ]"
   >
-    <h4 class="font-600 text-dark-gray">{{ tooltipTitle }}</h4>
-    <p>{{ tooltipText }}</p>
+    <p
+      class="block text-[14px] font-600 text-dark-gray"
+      v-text="tooltipTitle"
+    />
+    <p v-text="tooltipText" />
   </div>
 </template>