fix(bridge-ui-v2): Add z-index for close button on mobile (#14769)

taikoxyz · Sep 21, 2023 · 6dff6fc · 6dff6fc · vercel · Sep 21, 2023
1 parent a37797a
commit 6dff6fc
Show file tree

Hide file tree

Showing 8 changed files with 8 additions and 8 deletions.
diff --git a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte
@@ -157,7 +157,7 @@
 
   <dialog id={dialogId} class="modal" class:modal-open={modalOpen}>
     <div class="modal-box relative px-6 py-[35px] md:rounded-[20px] bg-neutral-background">
-      <button class="absolute right-6 top-[35px]" on:click={cancelModal}>
+      <button class="absolute right-6 top-[35px] z-50" on:click={cancelModal}>
         <Icon type="x-close" fillClass="fill-primary-icon" size={24} />
       </button>
 

diff --git a/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte b/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte
@@ -109,7 +109,7 @@
 
   <dialog id={dialogId} class="modal" class:modal-open={modalOpen}>
     <div class="modal-box relative px-6 md:rounded-[20px] bg-neutral-background">
-      <button class="absolute right-6" on:click={closeModal}>
+      <button class="absolute right-6 z-50" on:click={closeModal}>
         <Icon type="x-close" fillClass="fill-primary-icon" size={24} />
       </button>
 

diff --git a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte
@@ -148,7 +148,7 @@
         <LoadingMask spinnerClass="border-white" text={$t('messages.network.switching')} />
       {/if}
 
-      <button class="absolute right-6 top-[35px] md:top-[20px]" on:click={closeModal}>
+      <button class="absolute right-6 top-[35px] md:top-[20px] z-50" on:click={closeModal}>
         <Icon type="x-close" fillClass="fill-primary-icon" size={24} />
       </button>
       <div class="w-full">

diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/AddCustomERC20.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/AddCustomERC20.svelte
@@ -162,7 +162,7 @@
 
 <dialog id={dialogId} class="modal modal-bottom md:modal-middle" class:modal-open={modalOpen}>
   <div class="modal-box relative px-6 py-[35px] md:rounded-[20px] bg-neutral-background">
-    <button class="absolute right-6 top-[35px]" on:click={closeModal}>
+    <button class="absolute right-6 top-[35px] z-50" on:click={closeModal}>
       <Icon type="x-close" fillClass="fill-primary-icon" size={24} />
     </button>
 

diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte
@@ -58,7 +58,7 @@
 <!-- Mobile view -->
 <dialog {id} class="modal modal-bottom" class:modal-open={menuOpen}>
   <div class="modal-box relative px-6 py-[35px] w-full bg-neutral-background">
-    <button class="absolute right-6 top-[35px]" on:click={closeMenu}>
+    <button class="absolute right-6 top-[35px] z-50" on:click={closeMenu}>
       <Icon type="x-close" fillClass="fill-primary-icon" size={24} />
     </button>
 

diff --git a/packages/bridge-ui-v2/src/components/Transactions/InsufficientFunds.svelte b/packages/bridge-ui-v2/src/components/Transactions/InsufficientFunds.svelte
@@ -44,7 +44,7 @@
 
 <dialog id={dialogId} class="modal" class:modal-open={modalOpen}>
   <div class="modal-box relative px-6 py-[35px] md:rounded-[20px] bg-neutral-background">
-    <button class="absolute right-6 top-[35px]" on:click={closeModal}>
+    <button class="absolute right-6 top-[35px] z-50" on:click={closeModal}>
       <Icon type="x-close" fillClass="fill-primary-icon" size={24} />
     </button>
     <div class="w-full space-y-6">

diff --git a/packages/bridge-ui-v2/src/components/Transactions/MobileDetailsDialog.svelte b/packages/bridge-ui-v2/src/components/Transactions/MobileDetailsDialog.svelte
@@ -41,7 +41,7 @@
 <dialog id={dialogId} class="modal modal-bottom" class:modal-open={detailsOpen}>
   <div
     class="modal-box relative border border-neutral-background px-6 py-[30px] dark:glassy-gradient-card dark:glass-background-gradient">
-    <button class="absolute right-6" on:click={closeDetails}>
+    <button class="absolute right-6 z-50" on:click={closeDetails}>
       <Icon type="x-close" fillClass="fill-primary-icon" size={24} />
     </button>
 

diff --git a/packages/bridge-ui-v2/src/components/Transactions/StatusInfoDialog.svelte b/packages/bridge-ui-v2/src/components/Transactions/StatusInfoDialog.svelte
@@ -50,7 +50,7 @@
     class="modal-box
  bg-neutral-background text-primary-content text-center max-w-[565px]">
     <div class="w-full flex justify-end">
-      <button class="right-6" on:click={closeModal}>
+      <button class="right-6 z-50" on:click={closeModal}>
         <Icon type="x-close" fillClass="fill-primary-content" size={24} />
       </button>
     </div>