feat(taikoon): ui qa checklist

packages/taikoon-ui/src/components/AnimatedArrow/AnimatedArrow.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { Icons } from '$components/core/Icons';
+  import { classNames } from '$lib/util/classNames';
+  export let isHovered = false;
+  const ArrowIcon = Icons.ArrowRightFilled;
+
+  const wrapperClasses = classNames(
+    'bg-primary-content',
+    'rounded-full',
+    'w-[32px]',
+    'h-[32px]',
+    'flex',
+    'items-center',
+    'justify-center',
+    'overflow-hidden',
+  );
+
+  $: arrowsWrapper = classNames(
+    'w-full',
+    'h-full',
+    'relative',
+
+    'flex',
+    'items-center',
+    'justify-center',
+    'transition',
+    'transform',
+    isHovered ? 'translate-x-[100%]' : null,
+    'ease-in-out',
+    'duration-300',
+  );
+
+  const arrowClasses = classNames('absolute');
+
+  const leftArrowClasses = classNames(arrowClasses, 'left-[-100%]');
+
+  const rightArrowClasses = classNames(arrowClasses);
+</script>
+
+<div class={wrapperClasses}>
+  <div class={arrowsWrapper}>
+    <ArrowIcon size="32" class={leftArrowClasses} />
+    <ArrowIcon size="32" class={rightArrowClasses} />
+  </div>
+</div>

packages/taikoon-ui/src/components/AnimatedArrow/index.ts

@@ -0,0 +1 @@
+export { default as AnimatedArrow } from './AnimatedArrow.svelte';

packages/taikoon-ui/src/components/ConnectButton/ConnectButton.svelte

@@ -4,6 +4,8 @@
   import { formatEther } from 'viem';
   import { zeroAddress } from 'viem';
 
+  import { ResponsiveController } from '$components/core/ResponsiveController';
+  import { Spinner } from '$components/core/Spinner';
   import { getChainImage } from '$lib/chain';
   import { web3modal } from '$lib/connect';
   import { refreshUserBalance } from '$lib/util/balance';
@@ -13,11 +15,18 @@
   import { account } from '$stores/account';
   import { ethBalance } from '$stores/balance';
   import { connectedSourceChain } from '$stores/network';
-  import { Button } from '$ui/Button';
   import { config } from '$wagmi-config';
 
+  let windowSize: 'sm' | 'md' | 'lg' = 'md';
+
   import type { IAddress } from '../../types';
-  import { addressClasses, buttonContentClasses, chainIconClasses, connectedButtonClasses } from './classes';
+  import {
+    addressClasses,
+    buttonContentClasses,
+    chainIconClasses,
+    connectButtonClasses,
+    connectedButtonClasses,
+  } from './classes';
   export let connected = false;
 
   let web3modalOpen = false;
@@ -48,6 +57,9 @@
     if (!account.address) return;
     balance = await getBalance(account.address);
   });
+
+  import { Icons } from '$components/core/Icons';
+  const { CircleUserRegular: CircleUserIcon } = Icons;
 </script>
 
 {#if connected}
@@ -56,22 +68,31 @@
       alt="chain icon"
       class={chainIconClasses}
       src={(currentChainId && getChainImage(currentChainId)) || 'chains/ethereum.svg'} />
-    <span class={buttonContentClasses}
-      >{`Ξ ${parseFloat(formatEther(balance)).toFixed(3)}`}
-      <span class={addressClasses}>
-        {#await shortenAddress(accountAddress, 4, 6)}
-          ...
-        {:then displayAddress}
-          {displayAddress}
-        {/await}
-      </span>
-    </span>
+    {#if windowSize !== 'md'}
+      <span class={buttonContentClasses}
+        >{`Ξ ${parseFloat(formatEther(balance)).toFixed(3)}`}
+        <span class={addressClasses}>
+          {#await shortenAddress(accountAddress, 4, 6)}
+            ...
+          {:then displayAddress}
+            {displayAddress}
+          {/await}
+        </span>
+      </span>{/if}
   </button>
 {:else}
-  <Button type="primary" loading={web3modalOpen} iconLeft={'CircleUserRegular'} on:click={connectWallet}>
+  <button class={connectButtonClasses} on:click={connectWallet}>
     {#if web3modalOpen}
-      Connecting
-    {:else}Connect Wallet
+      <Spinner size="sm" />
+      {#if windowSize !== 'md'}
+        Connecting
+      {/if}
+    {:else}
+      <CircleUserIcon size="16" />
+      {#if windowSize !== 'md'}
+        Connect Wallet{/if}
     {/if}
-  </Button>
+  </button>
 {/if}
+
+<ResponsiveController bind:windowSize />

packages/taikoon-ui/src/components/ConnectButton/classes.ts

@@ -6,6 +6,7 @@ export const connectedButtonClasses = classNames(
   'rounded-full',
   'flex',
   'items-center',
+  'h-[44px]',
   'gap-2',
   'font-bold',
 );
@@ -23,9 +24,28 @@ export const buttonContentClasses = classNames(
 export const addressClasses = classNames(
   'flex',
   'rounded-full',
-  'p-2.5',
+  'px-2.5',
+  'py-2',
   'bg-neutral-background',
   'border border-divider-border',
 );
 
-export const chainIconClasses = classNames('w-[24px]', 'ml-1');
+export const chainIconClasses = classNames(
+  'w-[24px]',
+  'ml-1',
+  //'md:ml-[0]',
+  'md:mx-2',
+);
+
+export const connectButtonClasses = classNames(
+  'w-max',
+  'h-[44px]',
+  'bg-primary',
+  'rounded-full',
+  'flex flex-row',
+  'justify-center',
+  'items-center',
+  'px-4',
+  'gap-4',
+  'font-medium',
+);

packages/taikoon-ui/src/components/Header/Header.svelte

@@ -9,16 +9,16 @@
   import { classNames } from '$lib/util/classNames';
   import { account } from '$stores/account';
   import { connectedSourceChain } from '$stores/network';
-  import { Button } from '$ui/Button';
+  import { pageScroll } from '$stores/pageScroll';
   import { config } from '$wagmi-config';
 
   import { ConnectButton } from '../ConnectButton';
   import { ThemeButton } from '../ThemeButton';
   import {
-    buttonClasses,
-    headerClasses,
+    baseHeaderClasses,
     menuButtonsWrapperClasses,
     mobileMenuButtonClasses,
+    navButtonClasses,
     rightSectionClasses,
     taikoonsIconClasses,
     themeButtonSeparatorClasses,
@@ -29,6 +29,13 @@
 
   $: isMobileMenuOpen = false;
 
+  $: headerClasses = classNames(
+    baseHeaderClasses,
+    $pageScroll ? 'md:glassy-background-lg' : null,
+    $pageScroll ? 'md:border-b-[1px] md:border-border-divider-default' : 'md:border-b-[1px] md:border-transparent',
+    $$props.class,
+  );
+
   $: taikoonsOptions = [
     {
       icon: 'FileImageRegular',
@@ -72,12 +79,11 @@
       </div>
     {:else}
       <div class={menuButtonsWrapperClasses}>
-        <Button href="/mint" type="neutral" class={buttonClasses}>Mint</Button>
+        <a href="/mint" type="neutral" class={navButtonClasses}>Mint</a>
 
-        <Button href="/collection" type="neutral" class={buttonClasses}>Collection</Button>
+        <a href="/collection" type="neutral" class={navButtonClasses}>Collection</a>
         {#if address !== zeroAddress}
-          <Button href={`/collection/${address.toLowerCase()}`} type="neutral" class={buttonClasses}>
-            Your taikoons</Button>
+          <a href={`/collection/${address.toLowerCase()}`} type="neutral" class={navButtonClasses}> Your taikoons</a>
         {/if}
       </div>
       <div class={rightSectionClasses}>

packages/taikoon-ui/src/components/Header/classes.ts

@@ -1,5 +1,5 @@
 import { classNames } from '$lib/util/classNames';
-export const headerClasses = classNames(
+export const baseHeaderClasses = classNames(
   'md:px-10',
   'md:py-10',
   'h-16',
@@ -10,18 +10,15 @@ export const headerClasses = classNames(
   'relative',
   'z-50',
   'px-4',
-  'md:glassy-background-lg',
-  'md:border-b-[1px] md:border-border-divider-default',
 );
 
-export const buttonClasses = classNames('text-lg', 'w-min', 'lg:w-[200px]');
-
 export const taikoonsIconClasses = classNames('h-full');
 
 export const rightSectionClasses = classNames(
   'md:right-8',
   'right-4',
   'w-max',
+  'absolute',
   'flex flex-row justify-center items-center',
   'gap-4',
 );
@@ -34,8 +31,30 @@ export const mobileMenuButtonClasses = classNames(
   'flex justify-center items-center',
 );
 
-export const menuButtonsWrapperClasses = classNames('w-max', 'gap-4', 'flex', 'flex-row');
+export const menuButtonsWrapperClasses = classNames(
+  'w-full',
+  'justify-center',
+  'items-center',
+  'gap-4',
+  'flex',
+  'flex-row',
+);
 
 export const wrapperClasses = classNames('w-full', 'z-0', 'fixed', 'top-0');
 
 export const themeButtonSeparatorClasses = 'v-sep my-auto ml-0 mr-4 h-[24px]';
+
+export const navButtonClasses = classNames(
+  'w-[140px]',
+  'h-[44px]',
+  'bg-nav-button',
+  'flex flex-row',
+  'justify-center',
+  'tracking-[-2%]',
+  'items-center',
+  'rounded-full',
+  'font-sans',
+  'font-medium',
+  'text-base/[135.5%]',
+  'text-content-primary',
+);