From b8fbdead07338e76c3e06360cd5ba2447de2eea9 Mon Sep 17 00:00:00 2001
From: dave | d1onys1us <dave@taiko.xyz>
Date: Tue, 13 Dec 2022 20:17:02 -0500
Subject: [PATCH] fix(bridge-ui): ios dropdown a11y and horizontal padding
 (#425)

---
 packages/bridge-ui/src/App.svelte                | 16 +++++++++-------
 .../src/components/AddressDropdown.svelte        |  4 ++--
 .../src/components/ChainDropdown.svelte          |  4 ++--
 .../src/components/buttons/SelectToken.svelte    | 12 +++++++++---
 .../src/components/form/SelectChain.svelte       | 12 ++++++++----
 .../src/components/icons/ArrowRight.svelte       |  3 ---
 .../src/components/icons/ArrowRightLeft.svelte   | 14 ++++++++++++++
 7 files changed, 44 insertions(+), 21 deletions(-)
 delete mode 100644 packages/bridge-ui/src/components/icons/ArrowRight.svelte
 create mode 100644 packages/bridge-ui/src/components/icons/ArrowRightLeft.svelte

diff --git a/packages/bridge-ui/src/App.svelte b/packages/bridge-ui/src/App.svelte
index 69f3435151b..50d2498a485 100644
--- a/packages/bridge-ui/src/App.svelte
+++ b/packages/bridge-ui/src/App.svelte
@@ -85,13 +85,15 @@
 </script>
 
 <QueryProvider>
-  <main>
-    <Navbar {transactioner} />
-    <Router {routes} />
-  </main>
-  <SvelteToast options={toastOptions} />
-
-  <SwitchEthereumChainModal />
+  <div class="lg:container lg:mx-auto lg:px-64">
+    <main>
+      <Navbar {transactioner} />
+      <Router {routes} />
+    </main>
+    <SvelteToast options={toastOptions} />
+
+    <SwitchEthereumChainModal />
+  </div>
 </QueryProvider>
 
 <style global lang="postcss">
diff --git a/packages/bridge-ui/src/components/AddressDropdown.svelte b/packages/bridge-ui/src/components/AddressDropdown.svelte
index e472abe3c68..0842b2646a4 100644
--- a/packages/bridge-ui/src/components/AddressDropdown.svelte
+++ b/packages/bridge-ui/src/components/AddressDropdown.svelte
@@ -42,7 +42,7 @@
 </script>
 
 <div class="dropdown dropdown-bottom dropdown-end">
-  <button tabindex="0" class="btn btn-md md:btn-wide justify-around">
+  <label tabindex="0" class="btn btn-md md:btn-wide justify-around">
     <span class="font-normal flex-1 text-left">
       {#if $pendingTransactions && $pendingTransactions.length}
         {$pendingTransactions.length} Pending
@@ -75,7 +75,7 @@
     </span>
 
     <ChevDown />
-  </button>
+  </label>
   <ul
     tabindex="0"
     class="dropdown-content menu p-2 shadow bg-dark-3 rounded-box w-[194px]"
diff --git a/packages/bridge-ui/src/components/ChainDropdown.svelte b/packages/bridge-ui/src/components/ChainDropdown.svelte
index 60d949acde3..f9eb01e7a1b 100644
--- a/packages/bridge-ui/src/components/ChainDropdown.svelte
+++ b/packages/bridge-ui/src/components/ChainDropdown.svelte
@@ -26,7 +26,7 @@
 </script>
 
 <div class="dropdown dropdown-bottom dropdown-end mr-4">
-  <button tabindex="0" class="btn btn-md md:btn-wide justify-around">
+  <label tabindex="0" class="btn btn-md md:btn-wide justify-around">
     <span class="font-normal flex-1 text-left mr-2">
       {#if $fromChain}
         <svelte:component this={$fromChain.icon} />
@@ -37,7 +37,7 @@
     </span>
 
     <ChevDown />
-  </button>
+  </label>
   <ul
     tabindex="0"
     class="dropdown-content flex menu p-2 shadow bg-dark-3 rounded-box w-[194px]"
diff --git a/packages/bridge-ui/src/components/buttons/SelectToken.svelte b/packages/bridge-ui/src/components/buttons/SelectToken.svelte
index 747ae517a1b..95902a3d15a 100644
--- a/packages/bridge-ui/src/components/buttons/SelectToken.svelte
+++ b/packages/bridge-ui/src/components/buttons/SelectToken.svelte
@@ -20,12 +20,18 @@
 </script>
 
 <div class="dropdown dropdown-bottom">
-  <button tabindex="0" class="flex items-center justify-center">
+  <label
+    tabindex="0"
+    class="flex items-center justify-center hover:cursor-pointer"
+  >
     <svelte:component this={$token.logoComponent} class="inline-block" />
     <p class="px-2 text-sm">{$token.symbol.toUpperCase()}</p>
     <ChevDown />
-  </button>
-  <ul class="dropdown-content menu py-2 shadow-xl bg-base-100 rounded-box">
+  </label>
+  <ul
+    tabindex="0"
+    class="dropdown-content menu py-2 shadow-xl bg-base-100 rounded-box"
+  >
     {#each tokens as t}
       <li class="cursor-pointer w-full hover:bg-dark-3 px-7 py-3">
         <button
diff --git a/packages/bridge-ui/src/components/form/SelectChain.svelte b/packages/bridge-ui/src/components/form/SelectChain.svelte
index b291a564aa6..8e9588befcd 100644
--- a/packages/bridge-ui/src/components/form/SelectChain.svelte
+++ b/packages/bridge-ui/src/components/form/SelectChain.svelte
@@ -1,5 +1,5 @@
 <script>
-  import ArrowRight from "../icons/ArrowRight.svelte";
+  import ArrowRightLeft from "../icons/ArrowRightLeft.svelte";
   import { fromChain, toChain } from "../../store/chain";
   import { CHAIN_MAINNET, CHAIN_TKO } from "../../domain/chain";
   import { ethereum } from "../../store/ethereum";
@@ -27,7 +27,9 @@
   };
 </script>
 
-<div class="flex items-center justify-between w-full px-4 md:px-8 py-6 text-sm md:text-lg">
+<div
+  class="flex items-center justify-between w-full px-4 md:px-8 py-6 text-sm md:text-lg"
+>
   <div class="flex items-center w-2/5 justify-center">
     {#if $fromChain}
       <svelte:component this={$fromChain.icon} />
@@ -38,8 +40,10 @@
     {/if}
   </div>
 
-  <button on:click={toggleChains} class="btn btn-square btn-xs" disabled={!$signer}
-    ><ArrowRight /></button
+  <button
+    on:click={toggleChains}
+    class="btn btn-square btn-xs"
+    disabled={!$signer}><ArrowRightLeft /></button
   >
   <div class="flex items-center w-2/5 justify-center">
     {#if $toChain}
diff --git a/packages/bridge-ui/src/components/icons/ArrowRight.svelte b/packages/bridge-ui/src/components/icons/ArrowRight.svelte
deleted file mode 100644
index 92ef71ce36c..00000000000
--- a/packages/bridge-ui/src/components/icons/ArrowRight.svelte
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="14" height="9" viewBox="0 0 14 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9.09094 8.73479C9.49676 9.1094 10.1294 9.0841 10.504 8.67828L13.7348 5.17832C14.0884 4.79526 14.0884 4.20482 13.7348 3.82176L10.504 0.321718C10.1294 -0.0841045 9.49677 -0.109414 9.09095 0.265187C8.68513 0.639789 8.65982 1.27245 9.03442 1.67827L10.716 3.50003L1 3.50003C0.447715 3.50003 -3.22473e-07 3.94775 -3.934e-07 4.50003C-4.64327e-07 5.05232 0.447715 5.50003 1 5.50003L10.716 5.50003L9.03443 7.32171C8.65982 7.72753 8.68513 8.36019 9.09094 8.73479Z" fill="white"/>
-</svg>
diff --git a/packages/bridge-ui/src/components/icons/ArrowRightLeft.svelte b/packages/bridge-ui/src/components/icons/ArrowRightLeft.svelte
new file mode 100644
index 00000000000..40bd70eed1c
--- /dev/null
+++ b/packages/bridge-ui/src/components/icons/ArrowRightLeft.svelte
@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 24 24"
+  stroke-width="1.5"
+  stroke="currentColor"
+  class="w-6 h-6"
+>
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"
+  />
+</svg>