feat(bridge-ui-v2): light theme

packages/bridge-ui-v2/src/app.html

@@ -15,12 +15,14 @@
     <script>
       // On page load or when changing themes, best to add inline in `head` to avoid FOUC
       if (
-        localStorage.theme === 'dark' ||
+        (localStorage.getItem('theme') && localStorage.theme.toLocaleLowerCase() === 'dark') ||
         (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
       ) {
-        document.documentElement.classList.add('dark');
+        document.documentElement.setAttribute('data-theme', 'dark');
+        localStorage.setItem('theme', 'dark');
       } else {
-        document.documentElement.classList.remove('dark');
+        document.documentElement.setAttribute('data-theme', 'light');
+        localStorage.setItem('theme', 'light');
       }
     </script>
   </head>

packages/bridge-ui-v2/src/components/Activities/Activities.svelte

@@ -119,54 +119,47 @@
 
 <div class="flex flex-col justify-center w-full">
   <Card title={$t('activities.title')} text={$t('activities.description')}>
-    <ChainSelector class="py-[35px] " label={$t('chain_selector.currently_on')} value={$network} switchWallet small />
-    <div class="flex flex-col" style={`min-height: calc(${transactionsToShow.length} * 80px);`}>
-      {#if isDesktopOrLarger}
-        <div class="h-sep" />
-        <div class="text-white flex">
-          <div class="w-1/5 py-2">{$t('activities.header.from')}</div>
-          <div class="w-1/5 py-2">{$t('activities.header.to')}</div>
-          <div class="w-1/5 py-2">{$t('activities.header.amount')}</div>
-          <div class="w-1/5 py-2 flex flex-row">
-            {$t('activities.header.status')}
-            <StatusInfoDialog />
+    <div class="space-y-[35px]">
+      <ChainSelector label={$t('chain_selector.currently_on')} value={$network} switchWallet small />
+      <div class="flex flex-col" style={`min-height: calc(${transactionsToShow.length} * 80px);`}>
+        {#if isDesktopOrLarger}
+          <div class="h-sep" />
+          <div class="text-primary-content flex">
+            <div class="w-1/5 py-2">{$t('activities.header.from')}</div>
+            <div class="w-1/5 py-2">{$t('activities.header.to')}</div>
+            <div class="w-1/5 py-2">{$t('activities.header.amount')}</div>
+            <div class="w-1/5 py-2 flex flex-row">
+              {$t('activities.header.status')}
+              <StatusInfoDialog />
+            </div>
+            <div class="w-1/5 py-2">{$t('activities.header.explorer')}</div>
           </div>
-          <div class="w-1/5 py-2">{$t('activities.header.explorer')}</div>
-        </div>
-        <div class="h-sep" />
-      {/if}
-
-      {#if renderLoading}
-        <div class="flex items-center justify-center text-white h-[80px]">
-          <Spinner /> <span class="pl-3">{$t('common.loading')}...</span>
-        </div>
-      {/if}
-
-      {#if renderTransactions}
-        <div
-          class="flex flex-col items-center"
-          style={isBlurred ? `filter: blur(5px); transition: filter ${transitionTime / 1000}s ease-in-out` : ''}>
-          {#each transactionsToShow as item (item.hash)}
-            <Transaction {item} on:click={isDesktopOrLarger ? undefined : () => openDetails(item)} />
-            <div class="h-sep" />
-          {/each}
-        </div>
-      {/if}
-
-      {#if renderNoTransactions}
-        <div class="flex items-center justify-center text-white h-[80px]">
-          <span class="pl-3">{$t('activities.no_transactions')}</span>
-        </div>
-      {/if}
-
-      <!-- TODO: we don't have this in the design -->
-      <!-- {#if !$account?.isConnected}
-        <div class="flex items-center justify-center text-white h-[80px]">
-          <Button type="primary" on:click={onWalletConnect} class="px-[28px] py-[14px] ">
-            <span class="body-bold">{$t('wallet.connect')}</span>
-          </Button>
-        </div>
-      {/if} -->
+          <div class="h-sep" />
+        {/if}
+
+        {#if renderLoading}
+          <div class="flex items-center justify-center text-primary-content h-[80px]">
+            <Spinner /> <span class="pl-3">{$t('common.loading')}...</span>
+          </div>
+        {/if}
+
+        {#if renderTransactions}
+          <div
+            class="flex flex-col items-center"
+            style={isBlurred ? `filter: blur(5px); transition: filter ${transitionTime / 1000}s ease-in-out` : ''}>
+            {#each transactionsToShow as item (item.hash)}
+              <Transaction {item} on:click={isDesktopOrLarger ? undefined : () => openDetails(item)} />
+              <div class="h-sep" />
+            {/each}
+          </div>
+        {/if}
+
+        {#if renderNoTransactions}
+          <div class="flex items-center justify-center text-primary-content h-[80px]">
+            <span class="pl-3">{$t('activities.no_transactions')}</span>
+          </div>
+        {/if}
+      </div>
     </div>
   </Card>
 

packages/bridge-ui-v2/src/components/Activities/Transaction.svelte

@@ -34,7 +34,7 @@
   tabindex="0"
   on:click={handleClick}
   on:keydown={handlePress}
-  class="flex text-white md:h-[80px] h-[45px] w-full">
+  class="flex text-primary-content md:h-[80px] h-[45px] w-full">
   {#if isDesktopOrLarger}
     <div class="w-1/5 py-2 flex flex-row">
       <ChainSymbolName chainId={item.srcChainId} />
@@ -47,7 +47,7 @@
       {item.symbol}
     </div>
   {:else}
-    <div class="flex text-white h-[80px] w-full">
+    <div class="flex text-primary-content h-[80px] w-full">
       <div class="flex-col">
         <div class="flex">
           <ChainSymbolName chainId={item.srcChainId} />

packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte

@@ -9,7 +9,6 @@
   import { InputBox } from '$components/InputBox';
   import { LoadingText } from '$components/LoadingText';
   import { Tooltip } from '$components/Tooltip';
-  import { processingFeeComponent } from '$config';
   import { ProcessingFeeMethod } from '$libs/fee';
   import { parseToWei } from '$libs/util/parseToWei';
   import { uid } from '$libs/util/uid';
@@ -31,11 +30,11 @@
   let errorCalculatingEnoughEth = false;
 
   let modalOpen = false;
-  let inputBox: InputBox;
+  let inputBox: InputBox | undefined;
 
   // Public API
   export function resetProcessingFee() {
-    inputBox.clear();
+    inputBox?.clear();
     selectedFeeMethod = ProcessingFeeMethod.RECOMMENDED;
   }
 
@@ -58,19 +57,13 @@
   }
 
   function cancelModal() {
-    inputBox.clear();
+    inputBox?.clear();
     selectedFeeMethod = prevOptionSelected;
     closeModal();
   }
 
-  function closeModalWithDelay() {
-    // By adding delay there is enough time to see the selected option
-    // before closing the modal. Better experience for the user.
-    setTimeout(closeModal, processingFeeComponent.closingDelayOptionClick);
-  }
-
   function focusInputBox() {
-    inputBox.focus();
+    inputBox?.focus();
   }
 
   function inputProcessFee(event: Event) {

packages/bridge-ui-v2/src/components/Card/Card.svelte

@@ -7,7 +7,7 @@
     md:rounded-[20px] 
     md:border 
     md:border-divider-border
-    md:glassy-gradient-card`;
+    dark:md:glassy-gradient-card`;
 
   export let title: string;
   export let text = '';

packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte

@@ -25,7 +25,7 @@
     small ? 'px-2 py-[6px]' : 'px-6 py-[10px]',
     small ? 'rounded-md' : 'rounded-[10px]',
     small ? 'w-auto' : 'w-full',
-    readOnly ? '' : 'hover:bg-tertiary-interactive-hover',
+    readOnly ? '' : 'dark:hover:bg-tertiary-interactive-hover',
     'flex justify-start content-center body-bold py-2 px-[20px]',
   );
 

packages/bridge-ui-v2/src/components/Header/Header.svelte

@@ -20,12 +20,14 @@
     py-[20px]
     border-b
     border-b-divider-border
-    glassy-primary-background
+    glassy-background
+    bg-grey-5/10
+    dark:bg-grey-900/10
     md:border-b-0
     md:px-10
     md:py-7
  ">
-  <LogoWithText width={77} height={21} class="md:hidden" />
+  <LogoWithText width={77} height={21} class="md:hidden" textFillClass={'fill-primary-content'} />
 
   <div class="flex justify-end w-full">
     {#if isBridgePage}

packages/bridge-ui-v2/src/components/Icon/Icon.svelte

@@ -24,7 +24,8 @@
     | 'arrow-top-right'
     | 'up-down'
     | 'check'
-    | 'trash';
+    | 'trash'
+    | 'adjustments';
 </script>
 
 <script lang="ts">
@@ -173,18 +174,44 @@
       clip-rule="evenodd"
       d="M2.23966 6.7996C2.5432 7.08145 3.01775 7.06387 3.2996 6.76034L5.25 4.6599L5.25 13.25C5.25 13.6642 5.58579 14 6 14C6.41422 14 6.75 13.6642 6.75 13.25V4.6599L8.70041 6.76034C8.98226 7.06387 9.45681 7.08145 9.76034 6.79959C10.0639 6.51774 10.0815 6.04319 9.7996 5.73966L6.5496 2.23966C6.40769 2.08684 6.20855 2 6 2C5.79145 2 5.59232 2.08684 5.45041 2.23966L2.20041 5.73966C1.91856 6.04319 1.93613 6.51774 2.23966 6.7996ZM10.2397 13.2004C9.93613 13.4823 9.91856 13.9568 10.2004 14.2603L13.4504 17.7603C13.5923 17.9132 13.7915 18 14 18C14.2086 18 14.4077 17.9132 14.5496 17.7603L17.7996 14.2603C18.0815 13.9568 18.0639 13.4823 17.7603 13.2004C17.4568 12.9186 16.9823 12.9361 16.7004 13.2397L14.75 15.3401V6.75C14.75 6.33579 14.4142 6 14 6C13.5858 6 13.25 6.33579 13.25 6.75V15.3401L11.2996 13.2397C11.0177 12.9361 10.5432 12.9186 10.2397 13.2004Z" />
   {:else if type === 'check'}
-    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path
-        class={fillClass}
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M16.7045 4.15347C17.034 4.4045 17.0976 4.87509 16.8466 5.20457L8.84657 15.7046C8.71541 15.8767 8.51627 15.9838 8.30033 15.9983C8.08439 16.0129 7.87271 15.9334 7.71967 15.7804L3.21967 11.2804C2.92678 10.9875 2.92678 10.5126 3.21967 10.2197C3.51256 9.92682 3.98744 9.92682 4.28033 10.2197L8.17351 14.1129L15.6534 4.29551C15.9045 3.96603 16.3751 3.90243 16.7045 4.15347Z" />
-    </svg>
+    <path
+      class={fillClass}
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M16.7045 4.15347C17.034 4.4045 17.0976 4.87509 16.8466 5.20457L8.84657 15.7046C8.71541 15.8767 8.51627 15.9838 8.30033 15.9983C8.08439 16.0129 7.87271 15.9334 7.71967 15.7804L3.21967 11.2804C2.92678 10.9875 2.92678 10.5126 3.21967 10.2197C3.51256 9.92682 3.98744 9.92682 4.28033 10.2197L8.17351 14.1129L15.6534 4.29551C15.9045 3.96603 16.3751 3.90243 16.7045 4.15347Z" />
   {:else if type === 'trash'}
     <path
       class={fillClass}
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M20,6H16V5a3,3,0,0,0-3-3H11A3,3,0,0,0,8,5V6H4A1,1,0,0,0,4,8H5V19a3,3,0,0,0,3,3h8a3,3,0,0,0,3-3V8h1a1,1,0,0,0,0-2ZM10,5a1,1,0,0,1,1-1h2a1,1,0,0,1,1,1V6H10Zm7,14a1,1,0,0,1-1,1H8a1,1,0,0,1-1-1V8H17Z" />
+  {:else if type === 'adjustments'}
+    <path
+      class={fillClass}
+      d="M10 3.75C10 2.64543 9.10457 1.75 8 1.75C6.89543 1.75 6 2.64543 6 3.75C6 4.85457 6.89543 5.75 8 5.75C9.10457 5.75 10 4.85457 10 3.75Z" />
+    <path
+      class={fillClass}
+      d="M17.25 4.5C17.6642 4.5 18 4.16421 18 3.75C18 3.33579 17.6642 3 17.25 3L11.75 3C11.3358 3 11 3.33579 11 3.75C11 4.16421 11.3358 4.5 11.75 4.5L17.25 4.5Z" />
+    <path
+      class={fillClass}
+      d="M5 3.75C5 4.16421 4.66421 4.5 4.25 4.5H2.75C2.33579 4.5 2 4.16421 2 3.75C2 3.33579 2.33579 3 2.75 3L4.25 3C4.66421 3 5 3.33579 5 3.75Z" />
+    <path
+      class={fillClass}
+      d="M4.25 17C4.66421 17 5 16.6642 5 16.25C5 15.8358 4.66421 15.5 4.25 15.5H2.75C2.33579 15.5 2 15.8358 2 16.25C2 16.6642 2.33579 17 2.75 17H4.25Z" />
+    <path
+      class={fillClass}
+      d="M17.25 17C17.6642 17 18 16.6642 18 16.25C18 15.8358 17.6642 15.5 17.25 15.5H11.75C11.3358 15.5 11 15.8358 11 16.25C11 16.6642 11.3358 17 11.75 17H17.25Z" />
+    <path
+      class={fillClass}
+      d="M9 10C9 10.4142 8.66421 10.75 8.25 10.75H2.75C2.33579 10.75 2 10.4142 2 10C2 9.58579 2.33579 9.25 2.75 9.25L8.25 9.25C8.66421 9.25 9 9.58579 9 10Z" />
+    <path
+      class={fillClass}
+      d="M17.25 10.75C17.6642 10.75 18 10.4142 18 10C18 9.58579 17.6642 9.25 17.25 9.25H15.75C15.3358 9.25 15 9.58579 15 10C15 10.4142 15.3358 10.75 15.75 10.75H17.25Z" />
+    <path
+      class={fillClass}
+      d="M14 10C14 8.89543 13.1046 8 12 8C10.8954 8 10 8.89543 10 10C10 11.1046 10.8954 12 12 12C13.1046 12 14 11.1046 14 10Z" />
+    <path
+      class={fillClass}
+      d="M10 16.25C10 15.1454 9.10457 14.25 8 14.25C6.89543 14.25 6 15.1454 6 16.25C6 17.3546 6.89543 18.25 8 18.25C9.10457 18.25 10 17.3546 10 16.25Z" />
   {/if}
 </svg>

packages/bridge-ui-v2/src/components/LinkButton/LinkButton.svelte

@@ -7,7 +7,7 @@
   export let external = false;
 
   $: activeClass = active
-    ? 'body-bold bg-primary-interactive hover:bg-primary-interactive-hover'
+    ? 'body-bold bg-primary-interactive text-grey-10 hover:!bg-primary-interactive hover:!text-grey-10'
     : 'body-regular hover:bg-secondary-interactive-hover';
 
   $: classes = classNames('p-3 rounded-full flex justify-start content-center', activeClass, $$props.class);

packages/bridge-ui-v2/src/components/Logo/LogoWithText.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   // Default for dark mode
-  export let logoFillClass = 'fill-pink-500';
+  export let logoFillClass = 'fill-pink-400';
   export let textFillClass = 'fill-grey-5';
 
   export let width = 125;

packages/bridge-ui-v2/src/components/NotificationToast/NotificationToast.svelte

@@ -59,6 +59,7 @@
     --toastContainerBottom: auto;
     --toastContainerTop: 77px;
     --toastContainerLeft: calc(50vw - 160px);
+    --toastBoxShadow: none;
     --toastWidth: 320px;
 
     /*

packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte

@@ -3,6 +3,7 @@
 </script>
 
 <script lang="ts">
+  import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
 
   import { page } from '$app/stores';
@@ -11,12 +12,9 @@
   import { LogoWithText } from '$components/Logo';
   import { PUBLIC_GUIDE_URL, PUBLIC_L2_EXPLORER_URL } from '$env/static/public';
 
+  let darkTheme: boolean;
   let drawerToggleElem: HTMLInputElement;
 
-  $: isBridgePage = $page.route.id === '/' || $page.route.id === '/nft';
-  $: isFaucetPage = $page.route.id === '/faucet';
-  $: isActivitiesPage = $page.route.id === '/activities';
-
   function closeDrawer() {
     drawerToggleElem.checked = false;
   }
@@ -30,6 +28,24 @@
   function getIconFillClass(active: boolean) {
     return active ? 'fill-white' : 'fill-primary-icon';
   }
+
+  function switchTheme(dark: boolean) {
+    if (typeof darkTheme === 'undefined') return;
+
+    const theme = dark ? 'dark' : 'light';
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem('theme', theme);
+  }
+
+  $: isBridgePage = $page.route.id === '/' || $page.route.id === '/nft';
+  $: isFaucetPage = $page.route.id === '/faucet';
+  $: isActivitiesPage = $page.route.id === '/activities';
+
+  $: switchTheme(darkTheme);
+
+  onMount(() => {
+    darkTheme = localStorage.getItem('theme')?.toLocaleLowerCase() === 'dark';
+  });
 </script>
 
 <div class="drawer md:drawer-open">
@@ -64,7 +80,7 @@
         md:w-[226px]
       ">
         <a href="/" class="hidden md:inline-block">
-          <LogoWithText />
+          <LogoWithText textFillClass="fill-primary-content" />
         </a>
 
         <div role="button" tabindex="0" on:click={closeDrawer} on:keydown={onMenuKeydown}>
@@ -87,7 +103,7 @@
                 <span>{$t('nav.activities')}</span>
               </LinkButton>
             </li>
-            <li>
+            <li class="border-t border-t-divider-border pt-2">
               <LinkButton href={PUBLIC_L2_EXPLORER_URL} external>
                 <Icon type="explorer" />
                 <span>{$t('nav.explorer')}</span>
@@ -99,6 +115,13 @@
                 <span>{$t('nav.guide')}</span>
               </LinkButton>
             </li>
+            <li>
+              <label>
+                <Icon type="adjustments" />
+                <span>{$t('nav.theme')}</span>
+                <input type="checkbox" class="toggle" bind:checked={darkTheme} />
+              </label>
+            </li>
           </ul>
         </div>
       </aside>

packages/bridge-ui-v2/src/i18n/en.json

@@ -4,6 +4,7 @@
     "faucet": "Faucet",
     "activities": "Activities",
     "explorer": "Explorer",
+    "theme": "Theme",
     "guide": "Guide",
     "nft": "NFT",
     "token": "Token"