fix(bridge): minor responsiveness fixes (#407)

* fix: minor responsiveness fixes * fix(bridge): remove console logs Co-authored-by: Roger <[email protected]> Co-authored-by: jeff <[email protected]>
taikoxyz · Dec 9, 2022 · 0358add · 0358add
1 parent f97db8f
commit 0358add
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 16 deletions.
diff --git a/packages/bridge-ui/src/app.css b/packages/bridge-ui/src/app.css
@@ -3,6 +3,13 @@
   height: 56px;
 }
 
+@media (min-width: 768px) {
+  .btn.md\:btn-wide {
+    width: 194px;
+    height: 56px;
+  }
+}
+
 .btn.btn-token-select {
   width: 140px;
   height: 60px;

diff --git a/packages/bridge-ui/src/components/ChainDropdown.svelte b/packages/bridge-ui/src/components/ChainDropdown.svelte
@@ -27,7 +27,7 @@
 
 <div class="dropdown dropdown-bottom dropdown-end mr-4">
   <button tabindex="0" class="btn btn-md md:btn-wide justify-around">
-    <span class="font-normal flex-1 text-left">
+    <span class="font-normal flex-1 text-left mr-2">
       {#if $fromChain}
         <svelte:component this={$fromChain.icon} />
         <span class="ml-2 hidden md:inline-block">{$fromChain.name}</span>

diff --git a/packages/bridge-ui/src/components/Navbar.svelte b/packages/bridge-ui/src/components/Navbar.svelte
@@ -14,7 +14,6 @@
 
   export let transactioner: Transactioner;
   let transactions: BridgeTransaction[];
-
   $: getTransactions($signer, $fromChain);
 
   async function getTransactions(signer: Signer, chain: Chain) {
@@ -26,7 +25,7 @@
   }
 </script>
 
-<nav class="navbar mb-4 md:h-[125px] pt-4 md:pt-0 md:px-4">
+<nav class="navbar mb-4 md:h-[125px] pt-4 md:pt-0 md:px-4 w-full">
   <div class="navbar-end justify-start">
     <Logo />
   </div>

diff --git a/packages/bridge-ui/src/components/TaikoBanner.svelte b/packages/bridge-ui/src/components/TaikoBanner.svelte
@@ -3,7 +3,7 @@
   import SelectChain from "./form/SelectChain.svelte";
 </script>
 
-<div class="taiko-banner bg-cover bg-center bg-no-repeat w-full h-36 rounded-lg py-4 flex flex-col items-center justify-center">
+<div class="taiko-banner bg-cover bg-center bg-no-repeat h-36 rounded-lg py-4 flex flex-col items-center justify-center md:w-[450px]">
   <h1 class="text-2xl font-bold">
     {$_("home.title")}
   </h1>

diff --git a/packages/bridge-ui/src/components/form/ProcessingFee.svelte b/packages/bridge-ui/src/components/form/ProcessingFee.svelte
@@ -14,11 +14,11 @@
   }
 </script>
 
-<div class="my-10">
+<div class="my-10 w-full">
   <h4 class="text-sm font-medium text-left mb-4">
     {$_("bridgeForm.processingFeeLabel")}
   </h4>
-  <div class="flex items-center justify-around px-8 py-4">
+  <div class="grid grid-rows-3 md:grid-rows-1 md:grid-cols-3 py-4 gap-y-2 gap-x-1">
     {#each Array.from(PROCESSING_FEE_META) as fee}
       <button
         class="{$processingFee === fee[0]
@@ -32,17 +32,18 @@
 
   {#if $processingFee === ProcessingFeeMethod.CUSTOM}
     <label
-      class="mt-2 input-group relative rounded-lg bg-dark-4 justify-between items-center pr-4"
+      class="mt-2 input-group relative"
     >
       <input
         type="number"
         step="0.01"
         placeholder="0.01"
         min="0"
         on:input={updateAmount}
-        class="input input-primary bg-dark-4 input-lg flex-1"
+        class="input input-primary md:input-lg flex-1 rounded-l-lg !rounded-r-none bg-dark-4"
         name="amount"
       />
+      <span class="!rounded-r-lg bg-dark-4">ETH</span>
     </label>
   {:else if $processingFee === ProcessingFeeMethod.RECOMMENDED}
     <div class="flex items-left justify-between">

diff --git a/packages/bridge-ui/src/components/form/SelectChain.svelte b/packages/bridge-ui/src/components/form/SelectChain.svelte
@@ -27,7 +27,7 @@
   };
 </script>
 
-<div class="flex items-center justify-between w-full p-8 py-6 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,7 +38,7 @@
     {/if}
   </div>
 
-  <button on:click={toggleChains} class="btn btn-square btn-xs"
+  <button on:click={toggleChains} class="btn btn-square btn-xs" disabled={!$signer}
     ><ArrowRight /></button
   >
   <div class="flex items-center w-2/5 justify-center">

diff --git a/packages/bridge-ui/src/pages/home/Home.svelte b/packages/bridge-ui/src/pages/home/Home.svelte
@@ -5,14 +5,10 @@
   import TaikoBanner from "../../components/TaikoBanner.svelte";
 </script>
 
-<div class="hero bg-base-100 w-full">
-  <div class="hero-content text-center w-full">
+<div class="hero bg-base-100">
+  <div class="hero-content text-center">
     <div class="">
       <TaikoBanner />
-      <!-- <div class="mt-8 flex items-center justify-center px-2">
-        <span class="font-bold mr-2">{$_("home.selectToken")}</span>
-        <SelectToken />
-      </div> -->
       <div class="px-4">
         <BridgeForm />
       </div>