From 0358addf37186294fa2a452321d6f642762abde7 Mon Sep 17 00:00:00 2001
From: shadab-taiko <108871478+shadab-taiko@users.noreply.github.com>
Date: Sat, 10 Dec 2022 01:49:58 +0530
Subject: [PATCH] fix(bridge): minor responsiveness fixes (#407)

* fix: minor responsiveness fixes

* fix(bridge): remove console logs

Co-authored-by: Roger <50648015+RogerLamTd@users.noreply.github.com>
Co-authored-by: jeff <113397187+cyberhorsey@users.noreply.github.com>
---
 packages/bridge-ui/src/app.css                           | 7 +++++++
 packages/bridge-ui/src/components/ChainDropdown.svelte   | 2 +-
 packages/bridge-ui/src/components/Navbar.svelte          | 3 +--
 packages/bridge-ui/src/components/TaikoBanner.svelte     | 2 +-
 .../bridge-ui/src/components/form/ProcessingFee.svelte   | 9 +++++----
 .../bridge-ui/src/components/form/SelectChain.svelte     | 4 ++--
 packages/bridge-ui/src/pages/home/Home.svelte            | 8 ++------
 7 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/packages/bridge-ui/src/app.css b/packages/bridge-ui/src/app.css
index 19e2582bc91..8e836461a0e 100644
--- 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
index 30b939c08b6..60d949acde3 100644
--- 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
index c907cc36977..44bfadc31f4 100644
--- 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
index 02d44c4f6f6..ca8af097ffe 100644
--- 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
index e48353a1c43..d25187cf0e4 100644
--- 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,7 +32,7 @@
 
   {#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"
@@ -40,9 +40,10 @@
         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
index fbc2cf4515d..b291a564aa6 100644
--- 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
index 3e2d71dbc08..21cb618cdd8 100644
--- 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>