From f2f7d599bd7da346912cd306b201c111336ad56f Mon Sep 17 00:00:00 2001
From: Korbinian Kasberger <korbi@taiko.xyz>
Date: Fri, 4 Aug 2023 11:40:06 +0200
Subject: [PATCH] feat(bridge-ui-v2): align inputs and paddings closer to the
 design

---
 .../src/components/Bridge/Amount.svelte       |  2 +-
 .../src/components/Bridge/Bridge.svelte       |  4 ++--
 .../src/components/Bridge/BridgeTabs.svelte   | 15 ++++++++------
 .../src/components/Bridge/Recipient.svelte    |  4 ++--
 .../Bridge/SwitchChainsButton.svelte          |  2 +-
 .../ChainSelector/ChainSelector.svelte        |  4 +++-
 .../src/components/Faucet/Faucet.svelte       |  2 +-
 .../src/components/Header/Header.svelte       | 20 +++++++++++--------
 .../src/components/Icon/Icon.svelte           | 16 +++++++++++++++
 .../src/components/InputBox/InputBox.svelte   | 12 +++++++++--
 .../components/LinkButton/LinkButton.svelte   |  4 ++++
 .../src/components/Page/Page.svelte           |  2 +-
 .../SideNavigation/SideNavigation.svelte      |  2 +-
 .../TokenDropdown/TokenDropdown.svelte        |  2 +-
 14 files changed, 64 insertions(+), 27 deletions(-)

diff --git a/packages/bridge-ui-v2/src/components/Bridge/Amount.svelte b/packages/bridge-ui-v2/src/components/Bridge/Amount.svelte
index af138a5a45..725b3819ba 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/Amount.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/Amount.svelte
@@ -235,7 +235,7 @@
         error={$insufficientBalance}
         on:input={inputAmount}
         bind:this={inputBox}
-        class="w-full input-box outline-none py-6 pr-16 px-[26px] title-subsection-bold placeholder:text-tertiary-content" />
+        class="py-6 pr-16 px-[26px] title-subsection-bold" />
       <!-- TODO: talk to Jane about the MAX button and its styling -->
       <button
         class="absolute right-6 uppercase hover:font-bold"
diff --git a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte
index 4b82adc64d..56ad2592da 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte
@@ -245,10 +245,10 @@
   }
 </script>
 
-<Card class="md:w-[524px]" title={$t('bridge.title.default')} text={$t('bridge.description')}>
+<Card class="w-full md:w-[524px]" title={$t('bridge.title.default')} text={$t('bridge.description')}>
   <div class="space-y-[35px]">
     <div class="f-between-center gap-4">
-      <ChainSelector class="flex-1" value={$network} switchWallet />
+      <ChainSelector class="flex-1 " value={$network} switchWallet />
 
       <SwitchChainsButton />
 
diff --git a/packages/bridge-ui-v2/src/components/Bridge/BridgeTabs.svelte b/packages/bridge-ui-v2/src/components/Bridge/BridgeTabs.svelte
index 9541eb57ba..16707e241c 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/BridgeTabs.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/BridgeTabs.svelte
@@ -3,17 +3,20 @@
 
   import { page } from '$app/stores';
   import { LinkButton } from '$components/LinkButton';
-  $: isERC20Bridge = $page.route.id === '/' ? true : false;
-  $: isNFTBridge = $page.route.id === '/nft' ? true : false;
-  $: classes = `flex-basis-0 mr-2 p-3 rounded-full flex justify-center items-center  w-auto sm:w-20 2xl:w-32`;
+  import { classNames } from '$libs/util/classNames';
+
+  let classes = classNames('space-x-2', $$props.class);
+
+  $: isERC20Bridge = $page.route.id === '/';
+  $: isNFTBridge = $page.route.id === '/nft';
 </script>
 
-<div class="flex w-full ml-2">
-  <LinkButton class={classes} href="/" active={isERC20Bridge}>
+<div class={classes}>
+  <LinkButton class="py-2 px-[20px]" href="/" active={isERC20Bridge}>
     <span> {$t('nav.token')}</span>
   </LinkButton>
 
-  <LinkButton class={classes} href="/nft" active={isNFTBridge}>
+  <LinkButton class="py-2 px-[20px]" href="/nft" active={isNFTBridge}>
     <span> {$t('nav.nft')}</span>
   </LinkButton>
 </div>
diff --git a/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte b/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte
index e4bf8f1c62..245fa4ec0c 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte
@@ -69,11 +69,11 @@
   $: displayedRecipient = $recipientAddress || $account?.address;
 </script>
 
-<div class="Recipient">
+<div class="Recipient f-col space-y-2">
   <div class="f-between-center">
     <div class="flex space-x-2">
       <span class="body-small-bold text-primary-content">{$t('recipient.title')}</span>
-      <Tooltip>TODO: add description about processing fee</Tooltip>
+      <Tooltip>{$t('recipient.tooltip')}</Tooltip>
     </div>
     <button class="link" on:click={openModal} on:focus={openModal}>{$t('common.edit')}</button>
   </div>
diff --git a/packages/bridge-ui-v2/src/components/Bridge/SwitchChainsButton.svelte b/packages/bridge-ui-v2/src/components/Bridge/SwitchChainsButton.svelte
index 0341142228..0322f1a1ef 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/SwitchChainsButton.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/SwitchChainsButton.svelte
@@ -25,7 +25,7 @@
 </script>
 
 <button
-  class="f-center rounded-full bg-secondary-icon w-[30px] h-[30px]"
+  class="f-center rounded-full bg-secondary-icon w-[30px] h-[30px] hover:bg-primary-interactive-hover"
   disabled={!$destNetwork}
   on:click={switchToDestChain}>
   <Icon type="up-down" class="rotate-90" />
diff --git a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte
index 717238869b..e67e919e40 100644
--- a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte
+++ b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { type Chain, type GetNetworkResult, switchNetwork } from '@wagmi/core';
-  import { type ComponentType,onDestroy } from 'svelte';
+  import { type ComponentType, onDestroy } from 'svelte';
   import { t } from 'svelte-i18n';
   import { UserRejectedRequestError } from 'viem';
 
@@ -25,6 +25,8 @@
     small ? 'px-2 py-[6px]' : 'px-6 py-[10px]',
     small ? 'rounded-md' : 'rounded-[10px]',
     small ? 'w-auto' : 'w-full',
+    readOnly ? '' : 'hover:bg-primary-interactive-hover',
+    'flex justify-start content-center body-bold py-2 px-[20px]',
   );
 
   let chainToIconMap: Record<string, ComponentType> = {
diff --git a/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte b/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte
index 7beabb0f4e..6d55eefa41 100644
--- a/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte
+++ b/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte
@@ -147,7 +147,7 @@
   $: updateMintButtonState(selectedToken, $network);
 </script>
 
-<Card class="md:w-[524px]" title={$t('faucet.title')} text={$t('faucet.description')}>
+<Card class="w-full md:w-[524px]" title={$t('faucet.title')} text={$t('faucet.description')}>
   <div class="space-y-[35px]">
     <div class="space-y-2">
       <ChainSelector label={$t('chain_selector.currently_on')} value={$network} switchWallet small />
diff --git a/packages/bridge-ui-v2/src/components/Header/Header.svelte b/packages/bridge-ui-v2/src/components/Header/Header.svelte
index 7887db40fc..2db0e20774 100644
--- a/packages/bridge-ui-v2/src/components/Header/Header.svelte
+++ b/packages/bridge-ui-v2/src/components/Header/Header.svelte
@@ -6,6 +6,7 @@
   import { LogoWithText } from '$components/Logo';
   import { drawerToggleId } from '$components/SideNavigation';
   import { account } from '$stores/account';
+
   $: isBridgePage = $page.route.id === '/' || $page.route.id === '/nft';
 </script>
 
@@ -24,17 +25,20 @@
     md:px-10
     md:py-7
  ">
-  <LogoWithText class="w-[77px] h-[20px] md:hidden" />
+  <LogoWithText width={150} height={50} class="md:hidden" />
 
-  {#if isBridgePage}
-    <BridgeTabs />
-  {:else}
-    <div />
-  {/if}
+  <div class="flex justify-end md:f-between-center w-full">
+    {#if isBridgePage}
+      <!-- TODO: show tabs on mobile somewhere else -->
+      <BridgeTabs class="hidden md:flex" />
+    {:else}
+      <div></div>
+    {/if}
 
-  <ConnectButton connected={$account?.isConnected} />
+    <ConnectButton connected={$account?.isConnected} />
+  </div>
 
-  <label for={drawerToggleId} class="md:hidden">
+  <label for={drawerToggleId} class="ml-[10px] md:hidden">
     <Icon type="bars-menu" />
   </label>
 </header>
diff --git a/packages/bridge-ui-v2/src/components/Icon/Icon.svelte b/packages/bridge-ui-v2/src/components/Icon/Icon.svelte
index c6b02fcd43..575d9e19c9 100644
--- a/packages/bridge-ui-v2/src/components/Icon/Icon.svelte
+++ b/packages/bridge-ui-v2/src/components/Icon/Icon.svelte
@@ -17,6 +17,8 @@
     | 'info-circle'
     | 'circle'
     | 'arrow-right'
+    | 'arrow-left'
+    | 'arrow-top-right'
     | 'up-down'
     | 'check';
 </script>
@@ -131,6 +133,20 @@
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M3 10C3 9.58579 3.33579 9.25 3.75 9.25L14.3879 9.25L10.2302 5.29062C9.93159 5.00353 9.92228 4.52875 10.2094 4.23017C10.4965 3.93159 10.9713 3.92228 11.2698 4.20937L16.7698 9.45937C16.9169 9.60078 17 9.79599 17 10C17 10.204 16.9169 10.3992 16.7698 10.5406L11.2698 15.7906C10.9713 16.0777 10.4965 16.0684 10.2094 15.7698C9.92228 15.4713 9.93159 14.9965 10.2302 14.7094L14.3879 10.75L3.75 10.75C3.33579 10.75 3 10.4142 3 10Z" />
+  {:else if type === 'arrow-left'}
+    <path
+      class={fillClass}
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M17 10c0 0.4142 -0.33579 0.75 -0.75 0.75h-10.6379l4.1577 3.95938c0.29861 0.28691 0.30792 0.76169 0.02083 1.06027c-0.28691 0.29861 -0.76169 0.30792 -1.06027 0.02083l-5.5 -5.25c-0.14691 -0.14122 -0.23 -0.33642 -0.23 -0.54062c0 -0.20401 0.08309 -0.39922 0.23 -0.54062l5.5 -5.25c0.29861 -0.28691 0.77339 -0.29622 1.06027 -0.02083c0.28691 0.29861 0.2776 0.77339 -0.02083 1.06027l-4.1577 3.95938h10.6379c0.4142 0 0.75 0.33579 0.75 0.75z" />
+  {:else if type === 'arrow-top-right'}
+    <g transform="rotate(-45 8 8)">
+      <path
+        class={fillClass}
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M3 10C3 9.58579 3.33579 9.25 3.75 9.25L14.3879 9.25L10.2302 5.29062C9.93159 5.00353 9.92228 4.52875 10.2094 4.23017C10.4965 3.93159 10.9713 3.92228 11.2698 4.20937L16.7698 9.45937C16.9169 9.60078 17 9.79599 17 10C17 10.204 16.9169 10.3992 16.7698 10.5406L11.2698 15.7906C10.9713 16.0777 10.4965 16.0684 10.2094 15.7698C9.92228 15.4713 9.93159 14.9965 10.2302 14.7094L14.3879 10.75L3.75 10.75C3.33579 10.75 3 10.4142 3 10Z" />
+    </g>
   {:else if type === 'up-down'}
     <path
       class={fillClass}
diff --git a/packages/bridge-ui-v2/src/components/InputBox/InputBox.svelte b/packages/bridge-ui-v2/src/components/InputBox/InputBox.svelte
index 757aaa698b..aa32f3b07d 100644
--- a/packages/bridge-ui-v2/src/components/InputBox/InputBox.svelte
+++ b/packages/bridge-ui-v2/src/components/InputBox/InputBox.svelte
@@ -1,11 +1,19 @@
 <script lang="ts">
+  import { onMount } from 'svelte';
+
   import { classNames } from '$libs/util/classNames';
 
   export let loading = false;
   export let error = false;
 
   let input: HTMLInputElement;
-  let classes = classNames('w-full input-box placeholder:text-tertiary-content', $$props.class);
+
+  let { class: restClass = '', ...restProps } = $$restProps;
+  let classes = classNames(
+    'w-full input-box placeholder:text-tertiary-content bg-neutral-background border-0 shadow-none outline-none font-bold text-2xl',
+    restClass,
+    error ? 'error' : '',
+  );
 
   // Public API
   export const getValue = () => input.value;
@@ -14,4 +22,4 @@
   export const focus = () => input.focus();
 </script>
 
-<input class={classes} class:error disabled={loading} {...$$restProps} bind:this={input} on:input on:blur />
+<input class={classes} disabled={loading} {...restProps} bind:this={input} on:input on:blur />
diff --git a/packages/bridge-ui-v2/src/components/LinkButton/LinkButton.svelte b/packages/bridge-ui-v2/src/components/LinkButton/LinkButton.svelte
index a18dff88fc..a93b6f86b0 100644
--- a/packages/bridge-ui-v2/src/components/LinkButton/LinkButton.svelte
+++ b/packages/bridge-ui-v2/src/components/LinkButton/LinkButton.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { Icon } from '$components/Icon';
   import { classNames } from '$libs/util/classNames';
 
   export let active = false;
@@ -15,4 +16,7 @@
   target={external ? '_blank' : null}
   class={classNames('p-3 rounded-full flex justify-start content-center', activeClass, $$props.class)}>
   <slot />
+  {#if external}
+    <Icon type="arrow-top-right" flillClass="fill-white" />
+  {/if}
 </a>
diff --git a/packages/bridge-ui-v2/src/components/Page/Page.svelte b/packages/bridge-ui-v2/src/components/Page/Page.svelte
index b9fc27a0b4..72bdd4dea1 100644
--- a/packages/bridge-ui-v2/src/components/Page/Page.svelte
+++ b/packages/bridge-ui-v2/src/components/Page/Page.svelte
@@ -1,3 +1,3 @@
-<div class="f-center w-full px-4 md:px-10 py-[50px] md:py-[60px]">
+<div class="f-center w-full md:px-10 md:py-[60px]">
   <slot />
 </div>
diff --git a/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte b/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte
index f63f4f8751..ebe5f0103e 100644
--- a/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte
+++ b/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte
@@ -13,7 +13,7 @@
 
   let drawerToggleElem: HTMLInputElement;
 
-  $: isBridgePage = $page.route.id === '/';
+  $: isBridgePage = $page.route.id === '/' || $page.route.id === '/nft';
   $: isFaucetPage = $page.route.id === '/faucet';
   $: isActivitiesPage = $page.route.id === '/activities';
 
diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte
index 8b10916ed1..a20f630061 100644
--- a/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte
+++ b/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte
@@ -46,7 +46,7 @@
     aria-haspopup="listbox"
     aria-controls={id}
     aria-expanded={menuOpen}
-    class="f-between-center w-full px-6 py-[14px] input-box"
+    class="f-between-center w-full px-6 py-[14px] input-box bg-neutral-background border-0 shadow-none outline-none font-bold text-2xl"
     on:click={openMenu}
     on:focus={openMenu}>
     <div class="space-x-2">