Reskin (#19)

* v1 * add buttons * remove BreakdownModal * remove middleware * fix btn-square * remove pyth tag manager * temp disable useLayoutEffect for nav to work * moday style * fix modal * fix disclaimer * run prettier * minor adjustments to make pre-commit work --------- Co-authored-by: Sebastian Scatularo <[email protected]>
wormhole-foundation · Mar 20, 2024 · 886ae38 · 886ae38
1 parent 6b61eda
commit 886ae38
Show file tree

Hide file tree

Showing 54 changed files with 738 additions and 406 deletions.
diff --git a/frontend/components/Box.tsx b/frontend/components/Box.tsx
@@ -2,7 +2,7 @@ import { ReactNode } from 'react'
 
 export function Box({ children }: { children: ReactNode }) {
   return (
-    <div className="min-w-fit overflow-auto border border-light-35 bg-dark">
+    <div className="min-w-fit  overflow-auto border border-light border-opacity-25 bg-black bg-opacity-[35%]">
       {children}
     </div>
   )

diff --git a/frontend/components/BoxTitle.tsx b/frontend/components/BoxTitle.tsx
@@ -0,0 +1,9 @@
+import { ReactNode } from 'react'
+
+export function BoxTitle({ children }: { children: ReactNode }) {
+  return (
+    <h4 className="border-b border-light border-opacity-25 bg-dark bg-opacity-30 py-8 px-4 font-header  text-[28px] font-light leading-[1.2] sm:px-10">
+      {children}
+    </h4>
+  )
+}
diff --git a/frontend/components/DiscordButton.tsx b/frontend/components/DiscordButton.tsx
@@ -45,9 +45,7 @@ export function DiscordButton({ disableOnAuth }: DiscordButtonProps) {
 
   return (
     <button
-      className={
-        'btn before:btn-bg  btn--dark before:bg-dark hover:text-dark hover:before:bg-light disabled:text-light disabled:before:bg-dark'
-      }
+      className={'wbtn wbtn-secondary'}
       onClick={() => {
         if (status === 'unauthenticated')
           newTab('/discord-login', 'Pyth | Discord')

diff --git a/frontend/components/Layout.tsx b/frontend/components/Layout.tsx
@@ -2,9 +2,6 @@ import Image from 'next/image'
 import { usePathname } from 'next/navigation'
 import { ReactNode } from 'react'
 
-import bg from '../images/bg.svg'
-import sphere from '../images/sphere.png'
-
 import { useRouter } from 'next/router'
 import { WELCOME_METADATA } from 'pages'
 import { NEXT_STEPS } from 'pages/next-steps'
@@ -14,8 +11,6 @@ import { LOGIN_SOLANA_METADATA } from 'pages/login-solana'
 import { CLAIM_TOKENS_METADATA } from 'pages/claim-tokens'
 import { classNames } from 'utils/classNames'
 
-import statue from '@images/bg-statue.png'
-import statueWithCoins from '@images/bg-statue-with-coins.png'
 import Link from 'next/link'
 
 type LayoutProps = {
@@ -41,27 +36,31 @@ export const Layout = ({ children }: LayoutProps) => {
   return (
     <>
       <header className="absolute left-0 top-0 z-40 w-full px-1 transition-all lg:px-10">
-        <div className="before:gradient-border relative flex items-center justify-between px-4 py-3 lg:py-6 lg:px-10">
-          <Image
-            src="/pyth-logo-white.svg"
-            className="h-30 mr-3"
-            alt="pyth logo"
-            layout="intrinsic"
-            width={26}
-            height={33}
-          />
-
-          <span className="text-right">
-            Please verify that the site URL is:{' '}
-            <strong>https://airdrop.pyth.network/</strong>
-          </span>
+        <div className=" relative flex items-center justify-between  gap-2 px-4 py-3 lg:py-6 lg:px-10">
+          <Link
+            href="/"
+            className="flex h-12 items-center justify-center border-light border-opacity-60 outline-none sm:border sm:px-4 md:px-[29px]"
+          >
+            <Image
+              src="/wormhole-white.svg"
+              alt="wormhole logo"
+              width={130}
+              height={24}
+            />
+          </Link>
+          <div className="flex h-12 flex-1 items-center justify-end border-light border-opacity-60 sm:border sm:px-4 md:px-[29px] ">
+            <span className="text-right">
+              Please verify that the site URL is:{' '}
+              <strong> https://airdrop.wormhole.com</strong>
+            </span>
+          </div>
         </div>
       </header>
       <div className="relative px-4 pt-20 pb-32 sm:pt-28 lg:pt-40">
-        <div className="mx-auto max-w-[997px] justify-between gap-2.5 lg:flex">
+        <div className="mx-auto max-w-[997px] items-start justify-between gap-2.5 lg:flex">
           <ul
             className={classNames(
-              'mb-2.5 lg:mb-0 lg:max-w-[292px]',
+              'mb-2.5 divide-y divide-light  divide-opacity-25 border border-light border-opacity-25 lg:mb-0 lg:max-w-[292px]',
               disableSideNav ? 'pointer-events-none' : ''
             )}
           >
@@ -74,8 +73,8 @@ export const Layout = ({ children }: LayoutProps) => {
                   key={url}
                   className={`claim_li ${
                     isActive
-                      ? 'bg-darkGray5 text-light'
-                      : 'bg-dark text-light-50'
+                      ? ' bg-black bg-opacity-60'
+                      : ' bg-black   bg-opacity-30'
                   }`}
                   role="button"
                   onClick={() => router.push(url)}
@@ -92,7 +91,7 @@ export const Layout = ({ children }: LayoutProps) => {
               <p className="font-body text-[15px] ">
                 Useful links:{' '}
                 <Link
-                  href="https://pyth.network/airdrop/faq"
+                  href="https://wormhole.com/airdrop/faq"
                   className="ml-5 inline-block underline"
                 >
                   FAQ
@@ -102,45 +101,6 @@ export const Layout = ({ children }: LayoutProps) => {
           </div>
         </div>
       </div>
-      <span
-        className="pointer-events-none fixed top-0 bottom-0 left-0 right-0 z-[-1]"
-        style={{
-          background:
-            'radial-gradient(circle, rgba(70,43,120,1) 0%, rgba(8,6,17,1) 100%)',
-        }}
-      >
-        <Image
-          src={bg}
-          alt=""
-          layout="fill"
-          objectFit="cover"
-          objectPosition="left bottom"
-        />
-        <Image
-          src={sphere}
-          alt=""
-          objectFit="cover"
-          objectPosition="left bottom"
-          style={{
-            width: '50%',
-            position: 'absolute',
-            bottom: '-4%',
-            left: '-5%',
-            opacity: 0.6,
-          }}
-        />
-        <span className="absolute -left-[430px] -bottom-24 max-h-[100vh] max-w-[1200px]">
-          <Image src={statue} alt="" priority />
-        </span>
-        <span
-          className={classNames(
-            'absolute -left-[430px] -bottom-24 max-h-[100vh] max-w-[1200px] opacity-0 transition duration-1000 ease-out',
-            pathname === NEXT_STEPS.url ? 'opacity-100' : ''
-          )}
-        >
-          <Image src={statueWithCoins} alt="" priority />
-        </span>
-      </span>
     </>
   )
 }
diff --git a/frontend/components/Modal.tsx b/frontend/components/Modal.tsx
@@ -11,7 +11,7 @@ const Modal = ({
 }) => {
   return (
     <ModalWrapper>
-      <div className="relative w-full max-w-[588px] bg-darkGray1 p-12 text-center">
+      <div className="relative w-full max-w-[588px] border border-light-25 bg-black bg-opacity-50 p-12  text-center">
         <ModalCloseButton onClick={() => openModal(false)} />
         {children}
       </div>

diff --git a/frontend/components/Tooltip.tsx b/frontend/components/Tooltip.tsx
@@ -26,7 +26,7 @@ const Tooltip = ({
       hideOnClick={false}
       content={
         <div
-          className={`rounded border border-darkGray3 bg-darkGray p-3 text-xs leading-snug text-lavenderGray shadow-md ${className}`}
+          className={` border border-white border-opacity-25 bg-black bg-opacity-80 p-3 text-xs leading-snug text-white shadow-md ${className}`}
         >
           {content}
         </div>

diff --git a/frontend/components/buttons/Button.tsx b/frontend/components/buttons/Button.tsx
@@ -11,10 +11,10 @@ export type ButtonProps = {
 export function Button({ onClick, type, disabled, children }: ButtonProps) {
   const className =
     type === 'primary'
-      ? 'btn before:btn-bg btn--light before:bg-light hover:text-light hover:before:bg-dark disabled:text-dark disabled:before:bg-light'
+      ? 'wbtn'
       : type === 'secondary'
-      ? 'btn before:btn-bg btn--dark before:bg-dark hover:text-dark hover:before:bg-light disabled:text-light disabled:before:bg-dark'
-      : 'hover:cursor-pointer hover:font-bold'
+      ? 'wbtn wbtn-secondary '
+      : 'hover:cursor-pointer '
 
   return (
     <button

diff --git a/frontend/components/modal/Disclaimer.tsx b/frontend/components/modal/Disclaimer.tsx
@@ -12,11 +12,11 @@ export function Disclaimer({ onAgree, showModal }: DisclaimerProps) {
   const [agreed, setAgreed] = useState(false)
   return showModal ? (
     <ModalWrapper>
-      <div className="relative max-h-[80vh] w-full max-w-[588px] border border-light-35 bg-darkGray1">
+      <div className="relative max-h-[80vh] w-full max-w-[588px] border border-light-25 bg-black bg-opacity-50">
         <h3 className="disclaimer-title">
           {'Supplemental Token Airdrop Terms'}
         </h3>
-        <div className="scrollbar flex max-h-[300px] flex-col gap-3 overflow-auto border-b border-light-35 px-10 py-5 font-body text-base font-light leading-5 tracking-widest">
+        <div className="scrollbar flex max-h-[300px] flex-col gap-3 overflow-auto border-b border-light-25 px-10 py-5 font-body text-base font-light leading-5 tracking-widest">
           <p>
             {`Welcome to the Supplemental Token Airdrop Terms (these “Airdrop Terms”) for the W token airdrop (the “Airdrop”) by Crossware Limited (“Organization”, “we” or “us”). These Airdrop Terms are supplemental to, and incorporate by reference, our general `}
             <Link href="https://wormhole.com/terms" target="_blank">

diff --git a/frontend/components/modal/ModalCloseButton.tsx b/frontend/components/modal/ModalCloseButton.tsx
@@ -5,7 +5,7 @@ import Close from '@images/close.inline.svg'
 export function ModalCloseButton({ onClick }: { onClick: () => void }) {
   return (
     <button
-      className="absolute right-0 top-0 flex h-[50px] w-[50px] items-center justify-center bg-darkGray3"
+      className="text-white: absolute right-0 top-0 flex h-[50px] w-[50px] items-center justify-center border-b border-l border-light-25 bg-black hover:bg-white hover:text-black"
       onClick={onClick}
     >
       <Close />

diff --git a/frontend/components/modal/ModalWrapper.tsx b/frontend/components/modal/ModalWrapper.tsx
@@ -1,6 +1,6 @@
 export function ModalWrapper({ children }: { children: React.ReactNode }) {
   return (
-    <div className="fixed left-0 top-0 z-10 flex h-[100vh] w-full items-center justify-center p-6 before:absolute before:inset-0  before:bg-dark-70 before:bg-gradient2 before:blur-[2px]">
+    <div className="fixed left-0 top-0 z-50 flex h-[100vh] w-full items-center justify-center p-6 before:absolute before:inset-0 before:bg-black before:bg-opacity-[35%] before:backdrop-blur-sm">
       {children}
     </div>
   )

diff --git a/frontend/components/table/TotalAllocationRow.tsx b/frontend/components/table/TotalAllocationRow.tsx
@@ -8,7 +8,7 @@ export function TotalAllocationRow({
 }: TotalAllocationRowProps) {
   return (
     <tr className="border-b border-light-35 ">
-      <td className="w-full bg-darkGray5 py-2 pl-4 pr-4 sm:pl-10">
+      <td className="w-full bg-black bg-opacity-30 py-2 pl-4 pr-4 sm:pl-10">
         <div className="flex justify-between">
           <span className="font-header text-[14px] font-semibold sm:text-base18">
             Eligible Token Allocation

diff --git a/frontend/components/wallets/WalletButton.tsx b/frontend/components/wallets/WalletButton.tsx
@@ -29,7 +29,7 @@ export function WalletConnectedButton({
 
   return (
     <button
-      className="btn before:btn-bg btn--dark min-w-[117px] before:bg-dark hover:text-dark hover:before:bg-light disabled:text-light disabled:before:bg-dark sm:min-w-[207px]"
+      className="wbtn disabled:text-light disabled:before:bg-dark sm:min-w-[207px]"
       onClick={onClick}
       onMouseEnter={() => !disabled && setButtonText(onHoverText)}
       onMouseLeave={() => !disabled && setButtonText(dispAddress)}
@@ -46,7 +46,7 @@ export function WalletConnectedButton({
 
 export function WalletLoadingButton() {
   return (
-    <button className="btn before:btn-bg btn--dark min-w-[107px] before:bg-dark hover:text-dark hover:before:bg-light sm:min-w-[207px]">
+    <button className=" wbtn wbtn-secondary min-w-[107px] sm:min-w-[207px]">
       <span className="relative inline-flex items-center gap-1 whitespace-nowrap  sm:gap-2.5">
         <WalletIcon />
         <span className="text-xs sm:text-base">Connecting...</span>
@@ -91,12 +91,12 @@ export function WalletModalButton({ wallets }: WalletModalButtonProps) {
   return (
     <>
       <button
-        className="btn before:btn-bg btn--dark min-w-[117px] before:bg-dark hover:text-dark hover:before:bg-light sm:min-w-[207px]"
+        className="wbtn wbtn-secondary min-w-[117px] sm:min-w-[207px]"
         onClick={() => openModal(true)}
       >
         <span className="relative inline-flex items-center gap-1 whitespace-nowrap  sm:gap-2.5">
           <Wallet />
-          <span className="text-xs sm:text-base">connect wallet</span>
+          <span>connect wallet</span>
         </span>
       </button>
       {modal && <WalletModal openModal={openModal} wallets={wallets} />}
@@ -136,7 +136,7 @@ export type SingleWalletViewProps = {
 export function SingleWalletView({ wallet, onSelect }: SingleWalletViewProps) {
   return (
     <button
-      className="before:btn-bg btn--dark relative flex h-[44px] min-w-[117px] items-center justify-center px-4 font-body text-base transition-all before:bg-dark hover:text-dark hover:before:bg-light sm:min-w-[207px] md:px-8 "
+      className="wbtn wbtn-secondary  min-w-[117px]  sm:min-w-[207px] "
       onClick={() => {
         wallet.onSelect()
         onSelect()