From 59981970e17e146ca09afbea1964409372d954d2 Mon Sep 17 00:00:00 2001
From: shadab-taiko <108871478+shadab-taiko@users.noreply.github.com>
Date: Fri, 23 Dec 2022 04:33:14 +0530
Subject: [PATCH] fix(bridge): minor ui fixes (#474)

* fix(bridge): align pending text and loader

* fix(bridge): data and memo overflow

* fix(bridge): clear memo field after transaction success

* fix(bridge): add transition duration to memo toggle

* fix(bridge): minor faucet button adjustment
---
 .../src/components/AddressDropdown.svelte          |  6 +++---
 .../bridge-ui/src/components/ERC20Faucet.svelte    | 14 +++++++++-----
 .../src/components/TransactionDetail.svelte        |  6 +++---
 .../src/components/form/BridgeForm.svelte          |  1 +
 packages/bridge-ui/src/components/form/Memo.svelte |  2 +-
 5 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/packages/bridge-ui/src/components/AddressDropdown.svelte b/packages/bridge-ui/src/components/AddressDropdown.svelte
index 3308f227e8e..3efc80d23fa 100644
--- a/packages/bridge-ui/src/components/AddressDropdown.svelte
+++ b/packages/bridge-ui/src/components/AddressDropdown.svelte
@@ -56,10 +56,10 @@
 
 <div class="dropdown dropdown-bottom dropdown-end">
   <label tabindex="0" class="btn btn-md justify-around">
-    <span class="font-normal flex-1 text-left">
+    <span class="font-normal flex-1 text-left flex items-center">
       {#if $pendingTransactions && $pendingTransactions.length}
-        {$pendingTransactions.length} Pending
-        <div class="inline-block">
+        <span>{$pendingTransactions.length} Pending</span>
+        <div class="inline-block ml-2">
           <LottiePlayer
             src="/lottie/loader.json"
             autoplay={true}
diff --git a/packages/bridge-ui/src/components/ERC20Faucet.svelte b/packages/bridge-ui/src/components/ERC20Faucet.svelte
index a8f260d3332..372eac1aa34 100644
--- a/packages/bridge-ui/src/components/ERC20Faucet.svelte
+++ b/packages/bridge-ui/src/components/ERC20Faucet.svelte
@@ -48,17 +48,21 @@
   }
 </script>
 
-<button class="btn" on:click={mint}>
-  <Funnel class="mr-2" /> Faucet
-</button>
-<Tooltip />
+<div class="flex items-start">
+  <button class="btn" on:click={mint}>
+    <Funnel class="mr-2" /> Faucet
+  </button>
+  <button class="inline-block ml-2" on:click={() => (tooltipOpen = true)}>
+    <Tooltip />
+  </button>
+</div>
 
 <TooltipModal title="{$token.symbol} Faucet" bind:isOpen={tooltipOpen}>
   <span slot="body">
     <p class="text-left">
       You can request 1000 {$token.symbol}. {$token.symbol} is only available to
       be minted on Ethereum A1. If you are on Taiko A1, your network will be changed
-      first. You must have a small amount of ether in your Ethereum A1 wallet to
+      first. You must have a small amount of ETH in your Ethereum A1 wallet to
       send the transaction.
     </p>
   </span>
diff --git a/packages/bridge-ui/src/components/TransactionDetail.svelte b/packages/bridge-ui/src/components/TransactionDetail.svelte
index 40c6aa3fef4..3e9d064a1f3 100644
--- a/packages/bridge-ui/src/components/TransactionDetail.svelte
+++ b/packages/bridge-ui/src/components/TransactionDetail.svelte
@@ -8,7 +8,7 @@
   export let transaction;
 </script>
 <Modal onClose={() => $showTransactionDetails = null} isOpen={!!transaction} title="Transaction Detail">
-  <table class="table table-normal w-2/3 m-auto">
+  <table class="table table-normal w-2/3 m-auto table-fixed border-spacing-0">
     <tr>
       <td>Tx Hash</td>
       <td class="text-right">
@@ -61,13 +61,13 @@
     </tr>
     <tr>
       <td>Data</td>
-      <td class="text-right">
+      <td class="text-right overflow-auto">
         {transaction.message.data}
       </td>
     </tr>
     <tr>
       <td>Memo</td>
-      <td class="text-right">
+      <td class="text-right overflow-auto">
         {transaction.message.memo}
       </td>
     </tr>
diff --git a/packages/bridge-ui/src/components/form/BridgeForm.svelte b/packages/bridge-ui/src/components/form/BridgeForm.svelte
index 98d81603d30..926a1be70d3 100644
--- a/packages/bridge-ui/src/components/form/BridgeForm.svelte
+++ b/packages/bridge-ui/src/components/form/BridgeForm.svelte
@@ -228,6 +228,7 @@
 
       successToast($_("toast.transactionSent"));
       await $signer.provider.waitForTransaction(tx.hash, 1);
+      memo = "";
     } catch (e) {
       console.log(e);
       errorToast($_("toast.errorSendingTransaction"));
diff --git a/packages/bridge-ui/src/components/form/Memo.svelte b/packages/bridge-ui/src/components/form/Memo.svelte
index ac6e1d8c063..b4d7ada2f4a 100644
--- a/packages/bridge-ui/src/components/form/Memo.svelte
+++ b/packages/bridge-ui/src/components/form/Memo.svelte
@@ -19,7 +19,7 @@
   </span>
   <input
     type="checkbox"
-    class="toggle rounded-full"
+    class="toggle rounded-full duration-300"
     on:click={() => {
       showMemo = !showMemo;
     }}