fix(bridge-ui): ios dropdown a11y and horizontal padding (#425)

taikoxyz · Dec 14, 2022 · b8fbdea · b8fbdea
1 parent d42b953
commit b8fbdea
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/packages/bridge-ui/src/components/icons/ArrowRightLeft.svelte 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>