From 6dff6fc9990bab20cf2042cab0010fac826e14e1 Mon Sep 17 00:00:00 2001
From: xiaodino <ruby@taiko.xyz>
Date: Thu, 21 Sep 2023 01:02:55 -0700
Subject: [PATCH] fix(bridge-ui-v2): Add z-index for close button on mobile
 (#14769)

---
 .../src/components/Bridge/ProcessingFee/ProcessingFee.svelte    | 2 +-
 packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte    | 2 +-
 .../src/components/ChainSelector/ChainSelector.svelte           | 2 +-
 .../src/components/TokenDropdown/AddCustomERC20.svelte          | 2 +-
 .../bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte | 2 +-
 .../src/components/Transactions/InsufficientFunds.svelte        | 2 +-
 .../src/components/Transactions/MobileDetailsDialog.svelte      | 2 +-
 .../src/components/Transactions/StatusInfoDialog.svelte         | 2 +-
 8 files changed, 8 insertions(+), 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
index 2a8b6c76df..14dbdf5a3a 100644
--- 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
index 5e3b92e02f..f406f92e1b 100644
--- 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
index cfaf50a836..8b8c8aefbc 100644
--- 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
index e00c3f5025..7ff2946702 100644
--- 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
index de82f7765c..dce02a75c0 100644
--- 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
index f19a30ba29..80b7f11bdf 100644
--- 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
index 7d6642abe4..e04107fed2 100644
--- 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
index 1febe5ae66..918fa36250 100644
--- 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>