From 17bbf07ac80b4f78f0d3b17e374e9d88ed634eaa Mon Sep 17 00:00:00 2001
From: Korbinian <KorbinianK@users.noreply.github.com>
Date: Mon, 7 Aug 2023 11:32:05 +0200
Subject: [PATCH] feat(bridge-ui-v2): Style adjustments (#14350)

---
 .../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 f39a55bfc38..8390e5cf4e7 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/Amount.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/Amount.svelte
@@ -240,7 +240,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 4b82adc64d2..56ad2592da4 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 9541eb57ba7..16707e241c1 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 e4bf8f1c62c..245fa4ec0c9 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 03411422281..0322f1a1ef5 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 717238869b6..e67e919e408 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 7beabb0f4e3..6d55eefa417 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 7887db40fcc..2db0e20774a 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 c3e410fd284..06623037b5f 100644
--- a/packages/bridge-ui-v2/src/components/Icon/Icon.svelte
+++ b/packages/bridge-ui-v2/src/components/Icon/Icon.svelte
@@ -18,6 +18,8 @@
     | 'plus-circle'
     | 'circle'
     | 'arrow-right'
+    | 'arrow-left'
+    | 'arrow-top-right'
     | 'up-down'
     | 'check'
     | 'trash';
@@ -144,6 +146,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 757aaa698bd..aa32f3b07d9 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 a18dff88fca..a93b6f86b03 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 b9fc27a0b4e..72bdd4dea11 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 f63f4f87512..ebe5f0103eb 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 e4f9db9fa9c..92cb10a7e92 100644
--- a/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte
+++ b/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte
@@ -68,7 +68,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">