chore(bridge-ui): minor styling changes (#13883)

Co-authored-by: dave | d1onys1us <[email protected]>
taikoxyz · Jun 6, 2023 · 23fb29d · 23fb29d
1 parent 74fcbae
commit 23fb29d
Show file tree

Hide file tree

Showing 14 changed files with 75 additions and 792 deletions.
diff --git a/packages/bridge-ui/src/components/AddressDropdown.svelte b/packages/bridge-ui/src/components/AddressDropdown.svelte
@@ -79,8 +79,7 @@
 <!-- Makes no sense to render anything here without signer  -->
 {#if $signer}
   <div class="dropdown dropdown-bottom dropdown-end">
-    <!-- svelte-ignore a11y-label-has-associated-control -->
-    <label role="button" tabindex="0" class="btn btn-md justify-around">
+    <button class="btn justify-around">
       <span class="font-normal flex-1 text-left flex items-center">
         {#if pendingTx}
           <div class="inline-block ml-2">
@@ -100,7 +99,7 @@
         {/if}
       </span>
       <ChevronDown size="20" />
-    </label>
+    </button>
     <ul
       role="listbox"
       tabindex="0"

diff --git a/packages/bridge-ui/src/components/BridgeForm/BridgeForm.svelte b/packages/bridge-ui/src/components/BridgeForm/BridgeForm.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { type Address,fetchFeeData } from '@wagmi/core';
+  import { type Address, fetchFeeData } from '@wagmi/core';
   import { BigNumber, Contract, ethers, type Signer } from 'ethers';
   import { _ } from 'svelte-i18n';
 

diff --git a/packages/bridge-ui/src/components/BridgeForm/ProcessingFee.svelte b/packages/bridge-ui/src/components/BridgeForm/ProcessingFee.svelte
@@ -3,7 +3,7 @@
 
   import { ProcessingFeeMethod } from '../../domain/fee';
   import { processingFees } from '../../fee/processingFees';
-  import { destChain,srcChain } from '../../store/chain';
+  import { destChain, srcChain } from '../../store/chain';
   import { signer } from '../../store/signer';
   import { token } from '../../store/token';
   import { recommendProcessingFee } from '../../utils/recommendProcessingFee';

diff --git a/packages/bridge-ui/src/components/ChainDropdown.svelte b/packages/bridge-ui/src/components/ChainDropdown.svelte
@@ -43,9 +43,7 @@
 </script>
 
 <div class="dropdown dropdown-end mr-4">
-  <button
-    class="btn btn-md justify-around md:w-[194px]"
-    disabled={cannotSwitch}>
+  <button class="btn justify-around md:w-[194px]" disabled={cannotSwitch}>
     <span class="font-normal flex-1 text-left mr-2">
       {#if $srcChain}
         <svelte:component this={$srcChain.icon} />

diff --git a/packages/bridge-ui/src/components/ConnectWallet.svelte b/packages/bridge-ui/src/components/ConnectWallet.svelte
@@ -54,7 +54,7 @@
   };
 </script>
 
-<button class="btn btn-md" on:click={() => (isConnectWalletModalOpen = true)}>
+<button class="btn" on:click={() => (isConnectWalletModalOpen = true)}>
   {$_('nav.connect')}
 </button>
 

diff --git a/packages/bridge-ui/src/components/Navbar.svelte b/packages/bridge-ui/src/components/Navbar.svelte
@@ -43,7 +43,16 @@
       <Tko width={50} />
     </span>
     <a
-      class="pl-4 font-medium hover:text-[#E81899]"
+      class="
+        hidden 
+        text-sm 
+        leading-none
+        md:inline-block 
+        md:pl-4 
+        md:font-medium 
+        md:text-lg 
+        hover:text-[#E81899]
+      "
       href="https://taiko.xyz/docs/guides/use-the-bridge"
       target="_blank"
       rel="noreferrer">Guide ↗</a>

diff --git a/packages/bridge-ui/src/components/Tabs/TabList.svelte b/packages/bridge-ui/src/components/Tabs/TabList.svelte
@@ -1,3 +1,3 @@
-<div role="tablist" class="tabs {$$restProps.class || ''}">
+<div role="tablist" class={$$restProps.class || ''}>
   <slot />
 </div>
diff --git a/packages/bridge-ui/src/components/Tabs/TabPanel.svelte b/packages/bridge-ui/src/components/Tabs/TabPanel.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { getContext } from 'svelte';
   import type { Writable } from 'svelte/store';
-  
+
   import { key } from './Tabs.svelte';
 
   export let tab: string = '';
@@ -15,3 +15,9 @@
 <div role="tabpanel" aria-expanded={selected} class={classes}>
   <slot />
 </div>
+
+<style lang="postcss">
+  [role='tabpanel'] {
+    @apply w-full;
+  }
+</style>
diff --git a/packages/bridge-ui/src/components/Transactions/Transaction.svelte b/packages/bridge-ui/src/components/Transactions/Transaction.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import { UserRejectedRequestError } from '@wagmi/core';
-  import { Contract, errors, type Transaction,utils } from 'ethers';
+  import { Contract, errors, type Transaction, utils } from 'ethers';
   import { createEventDispatcher } from 'svelte';
   import { onDestroy, onMount } from 'svelte';
   import { ArrowTopRightOnSquare } from 'svelte-heros-v2';
   import { _ } from 'svelte-i18n';
-  
+
   import { bridges } from '../../bridge/bridges';
   import { chains } from '../../chain/chains';
   import { bridgeABI } from '../../constants/abi';
@@ -360,7 +360,7 @@
   });
 </script>
 
-<tr class="text-transaction-table">
+<tr>
   <td>
     <svelte:component this={txFromChain.icon} height={18} width={18} />
     <span class="ml-2 hidden md:inline-block">{txFromChain.name}</span>

diff --git a/packages/bridge-ui/src/components/Transactions/Transactions.svelte b/packages/bridge-ui/src/components/Transactions/Transactions.svelte
@@ -47,7 +47,7 @@
   {#if transactionsToShow.length}
     <table class="table-auto my-4">
       <thead>
-        <tr class="text-transaction-table">
+        <tr>
           <th>From</th>
           <th>To</th>
           <th>Amount</th>

diff --git a/packages/bridge-ui/src/components/icons/Bull.svelte b/packages/bridge-ui/src/components/icons/Bull.svelte
@@ -3,90 +3,21 @@
   export let width: number = 30;
 </script>
 
-<svg {width} {height} viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: #748a95;
-      }
-      .cls-2 {
-        fill: #617880;
-      }
-      .cls-3 {
-        fill: #d9387c;
-      }
-      .cls-4 {
-        fill: #e0e9ee;
-      }
-      .cls-5 {
-        fill: #d0e1e8;
-      }
-      .cls-6 {
-        fill: #dd5891;
-      }
-      .cls-7 {
-        fill: #f0f4f7;
-      }
-      .cls-8 {
-        fill: #172335;
-      }
-    </style>
-  </defs>
-  <g id="Minotaur">
-    <path
-      class="cls-1"
-      d="M19.06,33.15S16.11,35.41,8.6,35.47c-1-3.34,1.61-11,6.49-15.43l7.19-.77,2.27,5.87Z"
-      id="path208793-0" />
-    <path
-      class="cls-2"
-      d="M21.87,29l-5,.32A11.79,11.79,0,0,0,8.6,35.47c7.51-.06,10.46-2.32,10.46-2.32Z"
-      id="path208793-0-2" />
-    <path
-      class="cls-3"
-      d="M24.35,40.14s-8.51,2.49-12.23,5.22c-2.81,2.07-3.51,4.85-3.42,7.8A3.15,3.15,0,0,0,11.85,56h40.3a3.15,3.15,0,0,0,3.15-2.84c.09-2.95-.61-5.73-3.42-7.8-3.72-2.73-12.23-5.22-12.23-5.22Z"
-      id="path211966-6" />
-    <path
-      class="cls-1"
-      d="M44.94,33.15s3,2.26,10.46,2.32c1-3.34-1.61-11-6.49-15.43l-7.19-.77-2.27,5.87Z"
-      id="path48906" />
-    <path
-      class="cls-2"
-      d="M42.13,29l5,.32a11.79,11.79,0,0,1,8.26,6.11c-7.51-.06-10.46-2.32-10.46-2.32Z"
-      id="path48908" />
-    <path
-      class="cls-4"
-      d="M25.92,17.43c-3.7-5.84-4.9-7.34-10.6-7.36a7.1,7.1,0,0,1-3.89-1c-2-1.28-3.15-1.76-3.31.64a13.16,13.16,0,0,0,.39,4.14c1.22,4.78,6.6,3.81,8.35,9.07L23.5,22Z"
-      id="path222881-2" />
-    <path
-      class="cls-4"
-      d="M38.08,17.43c3.7-5.84,4.9-7.34,10.6-7.36a7.1,7.1,0,0,0,3.89-1c2-1.28,3.15-1.76,3.31.64a13.16,13.16,0,0,1-.39,4.14c-1.22,4.78-6.6,3.81-8.35,9.07L40.5,22Z"
-      id="path208425-7" />
-    <path
-      class="cls-5"
-      d="M54.9,8a5.06,5.06,0,0,0-2.33,1.06,6.08,6.08,0,0,1-.92.47c0,.06,0,.11,0,.17a13.16,13.16,0,0,1-.39,4.14c-1.17,4.6-6.19,3.88-8.13,8.5l4,.57c1.75-5.26,7.13-4.29,8.35-9.07a13.16,13.16,0,0,0,.39-4.14C55.8,8.5,55.47,8,54.9,8Z"
-      id="path66289" />
-    <path
-      class="cls-5"
-      d="M9.1,8c-.54,0-.86.46-1,1.53a7.92,7.92,0,0,0,3,.54c5.7,0,6.9,1.52,10.6,7.36L19.29,22l-2.65.37c.08.19.15.37.22.57L23.5,22l2.42-4.54c-3.7-5.84-4.9-7.34-10.6-7.36a7.1,7.1,0,0,1-3.89-1A5.06,5.06,0,0,0,9.1,8Z"
-      id="path57507" />
-    <path
-      class="cls-6"
-      d="M20.84,18.43a8.75,8.75,0,0,0-4.59,7.71,9.77,9.77,0,0,0,.06,1.08c.53,4.28,4.56,8,7.15,11.24A5.93,5.93,0,0,1,24,44.63a3.2,3.2,0,0,0,2.88,4.6H37.11A3.2,3.2,0,0,0,40,44.63a5.93,5.93,0,0,1,.55-6.17c2.59-3.26,6.62-7,7.15-11.24a9.77,9.77,0,0,0,.06-1.08,8.75,8.75,0,0,0-4.59-7.71L32,20.86Z"
-      id="path37166" />
-    <path
-      class="cls-3"
-      d="M43.16,18.43,40,19.12a8.72,8.72,0,0,1,3.52,7,9.77,9.77,0,0,1-.06,1.08c-.53,4.28-4.56,8-7.15,11.24a5.93,5.93,0,0,0-.55,6.17,3.2,3.2,0,0,1-2.88,4.6h4.21A3.2,3.2,0,0,0,40,44.63a5.93,5.93,0,0,1,.55-6.17c2.59-3.26,6.62-7,7.15-11.24a9.77,9.77,0,0,0,.06-1.08A8.75,8.75,0,0,0,43.16,18.43Z"
-      id="path66413" />
-    <path
-      class="cls-7"
-      d="M25,17.38a8.73,8.73,0,0,0-4.16,1.05c.84,3.41,5.58,5.93,11.16,5.93s10.32-2.52,11.16-5.93A8.73,8.73,0,0,0,39,17.38a8.59,8.59,0,0,0-2.21.29,19.11,19.11,0,0,1-9.56,0A8.74,8.74,0,0,0,25,17.38Z"
-      id="path211371-0" />
-    <path
-      class="cls-4"
-      d="M39,17.38a9.13,9.13,0,0,0-2.09.26,9,9,0,0,1,2,.79,8.81,8.81,0,0,1,2.82,2.43,5.62,5.62,0,0,0,1.39-2.43A8.73,8.73,0,0,0,39,17.38Z"
-      id="path66415" />
-    <path
-      class="cls-8"
-      d="M56.41,14.08a13.88,13.88,0,0,0,.42-4.44,2.72,2.72,0,0,0-1.17-2.41c-1-.53-2.26.15-3.6,1a6.18,6.18,0,0,1-3.38.86c-6,0-7.6,1.82-11.18,7.45-.32.05-.64.1-1,.18a18.13,18.13,0,0,1-9.08,0c-.32-.08-.65-.14-1-.19-3.58-5.62-5.13-7.42-11.18-7.44a6.18,6.18,0,0,1-3.38-.86c-1.34-.87-2.55-1.55-3.6-1A2.72,2.72,0,0,0,7.17,9.64a13.88,13.88,0,0,0,.42,4.44C8.29,16.83,10.23,18,12,19c.6.36,1.19.71,1.73,1.11C9,24.91,6.6,32.26,7.69,35.75a1,1,0,0,0,.91.67c.11,0,6.13.11,10.22-2,.7.89,1.43,1.75,2.14,2.58s1.22,1.4,1.75,2.08a4,4,0,0,1,.34.5c-2.42.76-8.43,2.8-11.49,5.05-2.68,2-3.93,4.78-3.81,8.59A4.08,4.08,0,0,0,11.85,57h40.3a4.08,4.08,0,0,0,4.1-3.76c.12-3.81-1.13-6.62-3.81-8.59-3.06-2.25-9.07-4.29-11.49-5.05a4,4,0,0,1,.34-.5c.53-.68,1.13-1.37,1.75-2.08s1.44-1.69,2.14-2.58c3.73,2,10.11,2,10.22,2a1,1,0,0,0,.91-.67c1.09-3.49-1.3-10.84-6-15.66.54-.4,1.13-.75,1.73-1.11C53.77,18,55.71,16.83,56.41,14.08ZM37,18.59a7.65,7.65,0,0,1,2-.26,7.75,7.75,0,0,1,3,.59c-1.21,2.61-5.29,4.49-10,4.49s-8.76-1.88-10-4.49a7.75,7.75,0,0,1,3-.59,7.88,7.88,0,0,1,2,.26A20.12,20.12,0,0,0,37,18.59Zm-27.61-5a11.92,11.92,0,0,1-.36-3.85A2.67,2.67,0,0,1,9.21,9a5.66,5.66,0,0,1,1.7.89A8,8,0,0,0,15.32,11c4.75,0,6,1,8.86,5.45a9.69,9.69,0,0,0-7.27,4.33,10.6,10.6,0,0,0-4-3.45C11.25,16.37,9.93,15.59,9.43,13.61ZM15,21.43a6.16,6.16,0,0,1,.82,1.51,9.69,9.69,0,0,0-.55,3.2,9.39,9.39,0,0,0,.07,1.19,10.23,10.23,0,0,0,.26,1.34,12.46,12.46,0,0,0-6.22,3.92A21.24,21.24,0,0,1,15,21.43Zm-4.67,13a10.74,10.74,0,0,1,6-4,17.14,17.14,0,0,0,1.36,2.38A19.92,19.92,0,0,1,10.36,34.45ZM9.65,53.12c-.1-3.22.83-5.37,3-7,2.81-2.07,8.63-4,10.94-4.77a5.43,5.43,0,0,1-.47,2.85A4.08,4.08,0,0,0,22.74,46a4.15,4.15,0,0,0,3.37,4.07A6.54,6.54,0,0,0,26,51a5.92,5.92,0,0,0,1.61,4.06H25a6.13,6.13,0,0,0-4.54-3.18l-4.19-.59A.95.95,0,0,0,16,53.16l4.19.59a4.23,4.23,0,0,1,2.5,1.3H11.85A2.21,2.21,0,0,1,9.65,53.12ZM36.06,51a4.06,4.06,0,0,1-8.12,0,4.28,4.28,0,0,1,.08-.81h8A4.28,4.28,0,0,1,36.06,51Zm15.25-4.86c2.21,1.62,3.14,3.77,3,7a2.21,2.21,0,0,1-2.2,1.93H41.34a4.2,4.2,0,0,1,2.49-1.3L48,53.16a.95.95,0,0,0-.27-1.88l-4.19.59A6.13,6.13,0,0,0,39,55.05H36.35A5.92,5.92,0,0,0,38,51a6.54,6.54,0,0,0-.07-.89A4.15,4.15,0,0,0,41.26,46a4.08,4.08,0,0,0-.42-1.82,5.43,5.43,0,0,1-.47-2.85C42.68,42.09,48.5,44.06,51.31,46.13ZM41.6,35.72c-.64.74-1.25,1.45-1.8,2.15A7,7,0,0,0,39.13,45a2.24,2.24,0,0,1-1.83,3.22,6,6,0,0,0-1.08-1.49,1,1,0,0,0-1.35,1.35.7.7,0,0,1,.13.16H29a.7.7,0,0,1,.13-.16,1,1,0,0,0-1.35-1.35,6,6,0,0,0-1.08,1.49A2.24,2.24,0,0,1,24.87,45a7,7,0,0,0-.67-7.17c-.55-.7-1.16-1.41-1.8-2.14-2.23-2.6-4.77-5.53-5.15-8.63,0-.31-.05-.63-.05-1a7.77,7.77,0,0,1,3.18-6.27C22,23.08,26.6,25.31,32,25.31s10-2.23,11.62-5.44a7.77,7.77,0,0,1,3.18,6.27c0,.33,0,.65,0,1C46.37,30.2,43.83,33.13,41.6,35.72Zm6.08-5.26a10.62,10.62,0,0,1,6,4,20,20,0,0,1-7.33-1.62A17.14,17.14,0,0,0,47.68,30.46Zm6.91,2.13a12.46,12.46,0,0,0-6.22-3.92,8.58,8.58,0,0,0,.26-1.34,9.39,9.39,0,0,0,.07-1.19,9.69,9.69,0,0,0-.55-3.2A6.16,6.16,0,0,1,49,21.43,21.24,21.24,0,0,1,54.59,32.59ZM47.09,20.8a9.71,9.71,0,0,0-7.27-4.33C42.7,12,43.93,11,48.68,11a8,8,0,0,0,4.41-1.17A5.66,5.66,0,0,1,54.79,9a2.67,2.67,0,0,1,.14.8,11.92,11.92,0,0,1-.36,3.85c-.5,2-1.82,2.76-3.48,3.74A10.5,10.5,0,0,0,47.09,20.8Z" />
-  </g>
+<svg
+  {width}
+  {height}
+  viewBox="0 0 32 32"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <circle cx="16" cy="16" r="16" fill="#772D5A" />
+  <path
+    d="M23.8628 17.3257L25.5703 23.7313H23.4532L22.6535 20.7817H16.2659V23.7313H14.2176V20.7817L11.3417 18.7104C10.1536 20.1082 8.40517 21.2733 7.04835 21.2733V16.5211L5 15.8657V14.8825H9.39494L13.0377 12.2966C13.372 12.0688 13.7784 11.9328 14.2192 11.9328C14.5076 11.9328 14.7813 11.9918 15.0304 12.0951L23.0746 15.8657H23.6777C24.2758 15.8657 24.9739 15.6084 24.9739 14.8825C24.9739 14.1565 24.2758 13.8992 23.6777 13.8992C22.0816 13.8992 20.8772 12.6309 20.8772 10.9496V8H21.9013L23.4384 10.9496H22.4142C22.4142 11.8034 22.9468 12.4244 23.6777 12.4244C25.3196 12.4244 26.5109 13.4584 26.5109 14.8825C26.5109 16.3065 25.4065 17.2487 23.8661 17.3257H23.8628Z"
+    fill="#FF715B" />
+  <path
+    d="M20.8755 8H21.8997L23.4367 10.9496H20.8771V8H20.8755Z"
+    fill="#DA4933" />
+  <path
+    opacity="0.3"
+    d="M9.0967 15.8655C9.0967 16.4079 8.63787 16.8487 8.07252 16.8487L5 15.8655V14.8823H8.07252C8.63787 14.8823 9.0967 15.3231 9.0967 15.8655Z"
+    fill="white" />
 </svg>