feat(bridge-ui-v2): align inputs and paddings closer to the design

taikoxyz · Aug 4, 2023 · f2f7d59 · f2f7d59
1 parent 888aca3
commit f2f7d59
Show file tree

Hide file tree

Showing 14 changed files with 64 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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">