feat(bridge-ui-v2): Styling adjustments (#14588)

taikoxyz · Aug 29, 2023 · 85bef05 · 85bef05 · vercel · Aug 29, 2023
1 parent 87c9d53
commit 85bef05
Show file tree

Hide file tree

Showing 11 changed files with 102 additions and 64 deletions.
diff --git a/packages/bridge-ui-v2/src/components/Bridge/AddressInput.svelte b/packages/bridge-ui-v2/src/components/Bridge/AddressInput.svelte
@@ -8,31 +8,44 @@
   import { Icon } from '$components/Icon';
   import { uid } from '$libs/util/uid';
 
+  enum State {
+    Valid = 'valid',
+    Invalid = 'invalid',
+    TooShort = 'too_short',
+  }
+
   let input: HTMLInputElement;
   let inputId = `input-${uid()}`;
-  let showAlert = true;
+  let state: State;
 
   export let ethereumAddress: Address | string = '';
 
-  let isValidEthereumAddress = false;
-  let tooShort = true;
   const dispatch = createEventDispatcher();
 
   const validateEthereumAddress = (address: string | EventTarget | null) => {
+    let addr: string;
+
     if (address && address instanceof EventTarget) {
-      address = (address as HTMLInputElement).value;
+      addr = (address as HTMLInputElement).value;
+    } else {
+      addr = address as string;
+    }
+    if (addr.length >= 2 && !addr.startsWith('0x')) {
+      state = State.Invalid;
+      return;
     }
-
-    const addr = address as string;
     if (addr.length < 42) {
-      tooShort = true;
-      isValidEthereumAddress = false;
+      state = State.TooShort;
     } else {
-      tooShort = false;
-      isValidEthereumAddress = isAddress(addr);
+      if (isAddress(addr)) {
+        state = State.Valid;
+      } else {
+        state = State.Invalid;
+      }
       dispatch('input', addr);
     }
-    dispatch('addressvalidation', { isValidEthereumAddress, addr });
+
+    dispatch('addressvalidation', { isValidEthereumAddress: state === State.Valid, addr });
   };
 
   $: validateEthereumAddress(ethereumAddress);
@@ -49,24 +62,28 @@
   <div class="f-between-center text-secondary-content">
     <label class="body-regular" for={inputId}>{$t('inputs.address_input.label')}</label>
   </div>
-  <div class="relative f-items-center }">
+  <div class="relative f-items-center">
     <input
       bind:this={input}
       id={inputId}
       type="string"
       placeholder="0x1B77..."
       bind:value={ethereumAddress}
       on:input={(e) => validateEthereumAddress(e.target)}
-      class="w-full input-box py-6 pr-16 px-[26px] title-subsection-bold placeholder:text-tertiary-content" />
+      class="w-full input-box withValdiation py-6 pr-16 px-[26px] title-subsection-bold placeholder:text-tertiary-content
+      {state === State.Valid ? 'success' : ethereumAddress ? 'error' : ''}
+      " />
     <button class="absolute right-6 uppercase body-bold text-secondary-content" on:click={clear}>
       <Icon type="x-close-circle" fillClass="fill-primary-icon" size={24} />
     </button>
   </div>
 </div>
-<div class="mt-3">
-  {#if !isValidEthereumAddress && !tooShort}
+<div class="mt-5 min-h-[20px]">
+  {#if state === State.Invalid && ethereumAddress}
     <FlatAlert type="error" forceColumnFlow message={$t('inputs.address_input.errors.invalid')} />
-  {:else if isValidEthereumAddress && !tooShort && showAlert}
+  {:else if state === State.TooShort && ethereumAddress}
+    <FlatAlert type="warning" forceColumnFlow message={$t('inputs.address_input.errors.too_short')} />
+  {:else if state === State.Valid}
     <FlatAlert type="success" forceColumnFlow message={$t('inputs.address_input.success')} />
   {/if}
 </div>
diff --git a/packages/bridge-ui-v2/src/components/Bridge/Amount.svelte b/packages/bridge-ui-v2/src/components/Bridge/Amount.svelte
@@ -185,7 +185,7 @@
 
   // There is no reason to show any error/warning message if we are computing the balance
   // or there is an issue computing it
-  $: showInsifficientBalanceAlert = $insufficientBalance && !$errorComputingBalance && !$computingBalance;
+  $: showInsufficientBalanceAlert = $insufficientBalance && !$errorComputingBalance && !$computingBalance;
   $: showInsiffucientAllowanceAlert = $insufficientAllowance && !$errorComputingBalance && !$computingBalance;
 </script>
 
@@ -229,7 +229,7 @@
         {$t('inputs.amount.button.max')}
       </button>
     </div>
-    {#if showInsifficientBalanceAlert}
+    {#if showInsufficientBalanceAlert}
       <FlatAlert type="error" message={$t('bridge.errors.insufficient_balance')} class="absolute bottom-[-26px]" />
     {:else if showInsiffucientAllowanceAlert}
       <FlatAlert type="warning" message={$t('bridge.errors.insufficient_allowance')} class="absolute bottom-[-26px]" />

diff --git a/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte b/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte
@@ -74,7 +74,7 @@
   <span class="body-small-regular text-secondary-content mt-[4px]">
     {#if displayedRecipient}
       {shortenAddress(displayedRecipient, 15, 13)}
-      <span class="text-secondary">{$recipientAddress === $account?.address ? '' : '| Customized'}</span>
+      <span class="text-secondary">{$recipientAddress !== $account?.address ? '' : '| Customized'}</span>
     {:else}
       {$t('recipient.placeholder')}
     {/if}

diff --git a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte
@@ -22,11 +22,11 @@
   let classes = classNames('ChainSelector', $$props.class);
   let buttonClasses = classNames(
     'body-regular bg-neutral-background',
-    small ? 'px-2 py-[6px]' : 'px-6 py-[10px]',
+    small ? 'px-2 py-[6px]' : 'px-[24px] py-[10px]',
     small ? 'rounded-md' : 'rounded-[10px]',
     small ? 'w-auto' : 'w-full',
     readOnly ? '' : 'dark:hover:bg-tertiary-interactive-hover',
-    'flex justify-start content-center body-bold py-2 px-[20px]',
+    'flex justify-start content-center',
   );
 
   let switchingNetwork = false;
@@ -109,7 +109,7 @@
         {/if}
         {#if value}
           <i role="img" aria-label={value.name}>
-            <svelte:component this={chainToIconMap[value.id]} size={20} />
+            <svelte:component this={chainToIconMap[value.id]} size={28} />
           </i>
           <span>{value.name}</span>
         {/if}

diff --git a/packages/bridge-ui-v2/src/components/ConnectButton/ConnectButton.svelte b/packages/bridge-ui-v2/src/components/ConnectButton/ConnectButton.svelte
@@ -43,7 +43,7 @@
   https://docs.walletconnect.com/2.0/web/web3modal/html/wagmi/components
 -->
 {#if connected}
-  <Button class="px-[20px] py-2 mr-[8px] rounded-full" type="neutral" on:click={connectWallet}>
+  <Button class="hidden sm:flex px-[20px] py-2 mr-[8px] rounded-full" type="neutral" on:click={connectWallet}>
     <span class="body-regular f-items-center space-x-2">
       <svelte:component this={EthIcon} size={20} />
       <span>{renderBalance($ethBalance)}</span>

diff --git a/packages/bridge-ui-v2/src/components/Icon/ETH.svelte b/packages/bridge-ui-v2/src/components/Icon/ETH.svelte
diff --git a/packages/bridge-ui-v2/src/components/Icon/Taiko.svelte b/packages/bridge-ui-v2/src/components/Icon/Taiko.svelte
@@ -1,12 +1,23 @@
 <script lang="ts">
   export let size = 20;
-  export let width = size;
-  export let height = size;
+  export let width: number = size;
+  export let height: number = size;
+  const originalViewBoxSize = 20;
+  const targetViewBoxSize = 20;
+  const scale: number = targetViewBoxSize / originalViewBoxSize;
 </script>
 
-<svg {width} {height} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="10" cy="10" r="10" fill="#E81899" />
-  <path
-    d="M16.0316 12.8858L13.9257 10.0246C13.6969 9.71365 13.3581 9.5274 12.9974 9.48634C12.9152 9.4768 12.8419 9.42914 12.8008 9.35728C12.7591 9.28542 12.7546 9.19816 12.7876 9.1219C12.9321 8.78899 12.9409 8.40256 12.7854 8.04912L11.3607 4.79487C11.1495 4.31164 10.6722 4 10.1449 4C9.61772 4 9.14035 4.31237 8.92917 4.79487L7.50443 8.04912C7.34971 8.40256 7.35777 8.78899 7.50223 9.1219C7.53522 9.19816 7.53009 9.28542 7.48903 9.35728C7.44723 9.42914 7.37464 9.4768 7.29251 9.48634C6.93174 9.5274 6.59297 9.71365 6.36419 10.0246L4.25824 12.8858C3.94586 13.3103 3.91433 13.8794 4.17758 14.3362C4.44155 14.7923 4.95044 15.0497 5.474 14.9917L9.0047 14.5987C9.3882 14.5562 9.71891 14.356 9.93449 14.0641C9.98362 13.9974 10.0621 13.9578 10.1449 13.9578C10.2278 13.9578 10.3055 13.9974 10.3554 14.0641C10.571 14.356 10.9017 14.5562 11.2852 14.5987L14.8159 14.9917C15.3394 15.0504 15.8483 14.793 16.1123 14.3362C16.3755 13.8794 16.344 13.3103 16.0316 12.8858ZM8.42542 8.45756L9.85236 5.19963C9.90369 5.08304 10.0188 5.00751 10.1457 5.00751C10.2725 5.00751 10.3876 5.08304 10.439 5.19963L11.8659 8.45756C11.9107 8.56021 11.9011 8.679 11.8395 8.77286C11.7779 8.86672 11.6738 8.92318 11.5609 8.92318H8.72972C8.61753 8.92318 8.51268 8.86672 8.45108 8.77286C8.38949 8.679 8.37995 8.56021 8.42468 8.45756H8.42542ZM9.15795 13.4174C9.10736 13.5179 9.0091 13.5853 8.89764 13.5978L5.36327 13.9908C5.23715 14.0048 5.11396 13.9432 5.05017 13.8332C4.98637 13.7232 4.99444 13.5861 5.06996 13.4834L7.17812 10.6192C7.24485 10.529 7.35191 10.4777 7.4641 10.4843C7.57629 10.4902 7.67748 10.5525 7.73394 10.65L7.73614 10.6537L9.14769 13.0984L9.14989 13.1021C9.20635 13.1996 9.20928 13.3184 9.15869 13.4181L9.15795 13.4174ZM10.4353 12.3116C10.3752 12.415 10.2652 12.4796 10.1449 12.4796C10.0254 12.4796 9.91469 12.4158 9.85456 12.3124L8.77005 10.4345C8.70993 10.3311 8.70993 10.2027 8.77005 10.0994C8.83018 9.99596 8.94017 9.93143 9.06043 9.93143H11.2287C11.3482 9.93143 11.459 9.99449 11.5191 10.0986C11.5792 10.2027 11.5792 10.3303 11.5191 10.4337L10.4353 12.3116ZM15.2404 13.8332C15.1766 13.9432 15.0542 14.0055 14.9273 13.9916L11.393 13.5985C11.2815 13.5861 11.1833 13.5186 11.1327 13.4181C11.0821 13.3177 11.085 13.1989 11.1415 13.1021L11.1437 13.0984L12.5552 10.6537L12.5574 10.65C12.6139 10.5525 12.7151 10.4902 12.8272 10.4843C12.9394 10.4785 13.0465 10.529 13.1132 10.6192L15.2214 13.4834C15.2969 13.5861 15.3042 13.7232 15.2412 13.8332H15.2404Z"
-    fill="#FAFAFA" />
+<svg
+  {width}
+  {height}
+  viewBox={`0 0 ${targetViewBoxSize} ${targetViewBoxSize}`}
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  preserveAspectRatio="xMinYMin meet">
+  <g transform={`scale(${scale})`}>
+    <circle cx="10" cy="10" r="10" fill="#E81899" />
+    <path
+      d="M15.8867 12.8858L13.7807 10.0246C13.5519 9.71365 13.2132 9.5274 12.8524 9.48634C12.7703 9.4768 12.697 9.42914 12.6559 9.35728C12.6141 9.28542 12.6097 9.19816 12.6427 9.1219C12.7871 8.78899 12.7959 8.40256 12.6405 8.04912L11.2157 4.79487C11.0046 4.31164 10.5272 4 9.99998 4C9.47276 4 8.9954 4.31237 8.78421 4.79487L7.35947 8.04912C7.20475 8.40256 7.21281 8.78899 7.35727 9.1219C7.39027 9.19816 7.38513 9.28542 7.34407 9.35728C7.30227 9.42914 7.22968 9.4768 7.14755 9.48634C6.78678 9.5274 6.44801 9.71365 6.21923 10.0246L4.11328 12.8858C3.8009 13.3103 3.76937 13.8794 4.03262 14.3362C4.29659 14.7923 4.80548 15.0497 5.32904 14.9917L8.85974 14.5987C9.24324 14.5562 9.57395 14.356 9.78953 14.0641C9.83866 13.9974 9.91712 13.9578 9.99998 13.9578C10.0828 13.9578 10.1606 13.9974 10.2104 14.0641C10.426 14.356 10.7567 14.5562 11.1402 14.5987L14.6709 14.9917C15.1945 15.0504 15.7034 14.793 15.9673 14.3362C16.2306 13.8794 16.1991 13.3103 15.8867 12.8858ZM8.28046 8.45756L9.7074 5.19963C9.75873 5.08304 9.87386 5.00751 10.0007 5.00751C10.1276 5.00751 10.2427 5.08304 10.294 5.19963L11.721 8.45756C11.7657 8.56021 11.7562 8.679 11.6946 8.77286C11.633 8.86672 11.5289 8.92318 11.4159 8.92318H8.58476C8.47257 8.92318 8.36772 8.86672 8.30612 8.77286C8.24453 8.679 8.23499 8.56021 8.27972 8.45756H8.28046ZM9.01299 13.4174C8.9624 13.5179 8.86414 13.5853 8.75268 13.5978L5.21832 13.9908C5.09219 14.0048 4.969 13.9432 4.90521 13.8332C4.84141 13.7232 4.84948 13.5861 4.92501 13.4834L7.03316 10.6192C7.09989 10.529 7.20695 10.4777 7.31914 10.4843C7.43133 10.4902 7.53252 10.5525 7.58898 10.65L7.59118 10.6537L9.00273 13.0984L9.00493 13.1021C9.06139 13.1996 9.06432 13.3184 9.01373 13.4181L9.01299 13.4174ZM10.2904 12.3116C10.2302 12.415 10.1202 12.4796 9.99998 12.4796C9.88046 12.4796 9.76973 12.4158 9.7096 12.3124L8.6251 10.4345C8.56497 10.3311 8.56497 10.2027 8.6251 10.0994C8.68522 9.99596 8.79521 9.93143 8.91547 9.93143H11.0838C11.2033 9.93143 11.314 9.99449 11.3741 10.0986C11.4343 10.2027 11.4343 10.3303 11.3741 10.4337L10.2904 12.3116ZM15.0955 13.8332C15.0317 13.9432 14.9092 14.0055 14.7824 13.9916L11.248 13.5985C11.1365 13.5861 11.0383 13.5186 10.9877 13.4181C10.9371 13.3177 10.94 13.1989 10.9965 13.1021L10.9987 13.0984L12.4102 10.6537L12.4124 10.65C12.4689 10.5525 12.5701 10.4902 12.6823 10.4843C12.7945 10.4785 12.9015 10.529 12.9683 10.6192L15.0764 13.4834C15.1519 13.5861 15.1593 13.7232 15.0962 13.8332H15.0955Z"
+      fill="#FAFAFA" />
+  </g>
 </svg>
diff --git a/packages/bridge-ui-v2/src/i18n/en.json b/packages/bridge-ui-v2/src/i18n/en.json
@@ -191,7 +191,8 @@
       "label": "Address",
       "placeholder": "Enter an address",
       "errors": {
-        "invalid": "Invalid address format"
+        "invalid": "Invalid address format",
+        "too_short": "Address length is too short"
       },
       "success": "Valid address format"
     },

diff --git a/packages/bridge-ui-v2/src/libs/connect/web3modal.ts b/packages/bridge-ui-v2/src/libs/connect/web3modal.ts
@@ -20,11 +20,6 @@ export const web3modal = new Web3Modal(
     themeVariables: {
       '--w3m-font-family': '"Public Sans", sans-serif',
       '--w3m-font-feature-settings': 'normal',
-
-      // button background-color
-      '--w3m-accent-color': 'var(--neutral-background)',
-      '--w3m-accent-fill-color': 'hsl(var(--nc) / var(--tw-text-opacity))', // grey-10
-
       '--w3m-button-border-radius': '9999px',
 
       // Body small regular
@@ -48,17 +43,13 @@ export const web3modal = new Web3Modal(
       '--w3m-background-border-radius': '20px',
       '--w3m-container-border-radius': '0',
 
-      // TODO: customize the rest of the theme variables
-
       // Unofficial variables
       // @ts-ignore
       '--w3m-color-fg-1': 'var(--primary-content)',
-      // '--w3m-color-fg-2': '',
-      // '--w3m-color-fg-3': '',
       '--w3m-color-bg-1': 'var(--primary-background)',
       '--w3m-color-bg-2': 'var(--neutral-background)',
-      // '--w3m-color-bg-3': '',
       '--w3m-color-overlay': 'none',
+      '--w3m-accent-color': 'var(--neutral-background)',
     },
     themeMode: (localStorage.getItem('theme') as 'dark' | 'light') ?? 'dark',
   },

diff --git a/packages/bridge-ui-v2/src/styles/base.css b/packages/bridge-ui-v2/src/styles/base.css
@@ -20,22 +20,31 @@
   }
 
   body {
-    /* No grid background by default */
     height: 100%;
+  }
+
+  body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     background-image: url(/bg/grid.svg), url(/bg/spotlights.svg), linear-gradient(270deg, #1f1f1f 0%, #000000 100%);
+    /* No grid background by default */
     background-size: 0, cover, cover;
     background-blend-mode: color-dodge, lighten, multiply;
-    background-attachment: fixed;
+    z-index: -1;
   }
 
   @media (min-width: 768px) {
-    body {
+    body::before {
       background-size: 700px, cover, cover;
     }
   }
 
   /* In light mode there is no background image */
-  [data-theme='light'] body {
+  [data-theme='light'] body::before {
     background-image: none;
   }
 }
diff --git a/packages/bridge-ui-v2/src/styles/components.css b/packages/bridge-ui-v2/src/styles/components.css
@@ -86,8 +86,17 @@
       focus:!shadow-[0_0_0_3px_#E81899];
   }
 
+  .input-box.withValdiation {
+    @apply outline-none;
+  }
+
   .input-box.error {
-    @apply !shadow-[0_0_0_3px_#F15C5D];
+    @apply !shadow;
+    box-shadow: 0 0 0 3px var(--negative-sentiment) !important;
+  }
+
+  .input-box.success {
+    box-shadow: 0 0 0 3px var(--positive-sentiment) !important;
   }
 
   /* Tooltip */