Skip to content

Commit

Permalink
UI update (#31)
Browse files Browse the repository at this point in the history 
* update token

* add footer

* fix button

* run prettier

* update discord button

* mobile header

* update token
  • Loading branch information
@timpau
timpau authored Mar 22, 2024
1 parent a78b2fa commit cfd7e00
Show file tree
Hide file tree
Showing 16 changed files with 200 additions and 38 deletions.
5 changes: 2 additions & 3 deletions frontend/components/EcosystemSignButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,9 +63,7 @@ export function EcosystemSignButton({

return (
<button
className={classNames(
'btn before:btn-bg btn--dark before:bg-dark hover:text-dark hover:before:bg-light disabled:text-light disabled:before:bg-dark'
)}
className={classNames('wbtn wbtn-secondary')}
onClick={signMessageWrapper}
disabled={isDisabled || isSigned}
>
Expand All @@ -80,6 +78,7 @@ export function EcosystemSignButton({
) : (
'Sign'
)}
<Signed />
</span>
</span>
</button>
Expand Down
80 changes: 71 additions & 9 deletions frontend/components/Layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,18 @@ import { VERIFY_ELIGIBILITY_METADATA } from 'pages/verify-eligibility'
import { LOGIN_SOLANA_METADATA } from 'pages/login-solana'
import { CLAIM_TOKENS_METADATA } from 'pages/claim-tokens'
import { classNames } from 'utils/classNames'
import SocialIcons from '@components/SocialIcons'

import W from '@images/w.inline.svg'
import Wormhole from '@images/wormhole.inline.svg'

import Link from 'next/link'

type LayoutProps = {
children: ReactNode
setDisclaimerWasRead: Function
}
export const Layout = ({ children }: LayoutProps) => {
export const Layout = ({ children, setDisclaimerWasRead }: LayoutProps) => {
const pathname = usePathname()
const router = useRouter()

Expand All @@ -33,20 +38,19 @@ export const Layout = ({ children }: LayoutProps) => {
NEXT_STEPS,
]

const today = new Date()
const year = today.getFullYear()

return (
<>
<header className="absolute left-0 top-0 z-40 w-full px-1 transition-all lg:px-10">
<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]"
className="flex items-center justify-center border-light border-opacity-60 outline-none sm:h-12 sm:border sm:px-4 md:px-[29px]"
>
<Image
src="/wormhole-white.svg"
alt="wormhole logo"
width={130}
height={24}
/>
<W className="block sm:hidden" />
<Wormhole className="hidden sm:block" />
</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">
Expand All @@ -56,7 +60,7 @@ export const Layout = ({ children }: LayoutProps) => {
</div>
</div>
</header>
<div className="relative px-4 pt-20 pb-32 sm:pt-28 lg:pt-40">
<div className="relative min-h-[calc(100vh-80px)] px-4 pt-20 pb-32 sm:pt-28 lg:pt-40">
<div className="mx-auto max-w-[997px] items-start justify-between gap-2.5 lg:flex">
<ul
className={classNames(
Expand Down Expand Up @@ -101,6 +105,64 @@ export const Layout = ({ children }: LayoutProps) => {
</div>
</div>
</div>
<footer className="footer">
<span>{year} Ⓒ Wormhole. All Rights Reserved.</span>
<span className="mb-2 flex-1 space-y-2 border-white border-opacity-50 py-2 text-center opacity-75 md:space-y-0 md:space-x-10 lg:mb-0 lg:ml-10 lg:border-l lg:py-0 lg:pl-10 lg:text-left">
<a
target="_blank"
rel="noreferrer"
href="https://wormhole.com/terms"
className="hover:underline hover:opacity-100"
>
Terms of Use
</a>
<button
className="opacity-75 hover:underline hover:opacity-100"
onClick={() => {
setDisclaimerWasRead(false)
}}
>
Supplemental Token Airdrop Terms
</button>
</span>
<div className="mb-5 flex items-center gap-6 lg:mb-0">
<Link
href="https://twitter.com/wormholecrypto"
target="_blank"
rel="noreferrer"
>
<SocialIcons icon="twitter" width={21} height={22} />
</Link>
<Link
href="https://t.me/wormholecrypto"
target="_blank"
rel="noreferrer"
>
<SocialIcons icon="telegram" width={20} height={18} />
</Link>
<Link
href="https://github.com/wormhole-foundation"
target="_blank"
rel="noreferrer"
>
<SocialIcons icon="github" width={21} height={21} />
</Link>
<Link
href="https://docs.wormhole.com"
target="_blank"
rel="noreferrer"
>
<SocialIcons icon="book" width={25} height={19} />
</Link>
<Link
href="https://www.youtube.com/@wormholecrypto"
target="_blank"
rel="noreferrer"
>
<SocialIcons icon="youtube" width={21} height={15} />
</Link>
</div>
</footer>
</>
)
}
50 changes: 50 additions & 0 deletions frontend/components/SocialIcons.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import React from 'react'

type iconType = {
[key: string]: string
}

const icons: iconType = {
discord:
'M16.9419 3.52317C15.6473 2.91744 14.263 2.47723 12.8157 2.22656C12.638 2.5479 12.4304 2.98012 12.2872 3.32394C10.7487 3.09258 9.22445 3.09258 7.7143 3.32394C7.57116 2.98012 7.3588 2.5479 7.17947 2.22656C5.73067 2.47723 4.3448 2.91906 3.05016 3.52638C0.438869 7.47238 -0.269009 11.3204 0.0849305 15.1137C1.81688 16.4071 3.49534 17.1928 5.14548 17.7069C5.55291 17.1462 5.91628 16.5501 6.22931 15.9219C5.63313 15.6954 5.06211 15.4158 4.52256 15.0912C4.6657 14.9852 4.80571 14.8743 4.94098 14.7603C8.23183 16.2995 11.8074 16.2995 15.0589 14.7603C15.1958 14.8743 15.3358 14.9852 15.4774 15.0912C14.9362 15.4174 14.3637 15.6969 13.7675 15.9235C14.0805 16.5501 14.4423 17.1478 14.8513 17.7085C16.503 17.1944 18.183 16.4087 19.915 15.1137C20.3303 10.7163 19.2056 6.90361 16.9419 3.52317ZM6.67765 12.7809C5.68977 12.7809 4.87963 11.8586 4.87963 10.7355C4.87963 9.61247 5.67247 8.68864 6.67765 8.68864C7.68285 8.68864 8.49297 9.61085 8.47567 10.7355C8.47723 11.8586 7.68285 12.7809 6.67765 12.7809ZM13.3223 12.7809C12.3344 12.7809 11.5243 11.8586 11.5243 10.7355C11.5243 9.61247 12.3171 8.68864 13.3223 8.68864C14.3275 8.68864 15.1376 9.61085 15.1203 10.7355C15.1203 11.8586 14.3275 12.7809 13.3223 12.7809Z', // replace with actual discord SVG path
twitter:
'M12.4979 9.57502L20.3156 0.259521H18.463L11.6749 8.34804L6.25324 0.259521H0L8.19861 12.4908L0 22.2595H1.85265L9.02109 13.7178L14.7468 22.2595H21L12.4974 9.57502H12.4979ZM9.96039 12.5986L9.1297 11.3806L2.52019 1.68917H5.36576L10.6997 9.51046L11.5304 10.7284L18.4639 20.8949H15.6183L9.96039 12.599V12.5986Z', // replace with actual twitter SVG path
telegram:
'M19.9602 1.02116C19.9442 0.944982 19.9088 0.874563 19.8577 0.817099C19.8066 0.759635 19.7417 0.717187 19.6695 0.694093C19.4069 0.640346 19.1351 0.660257 18.8826 0.751749C18.8826 0.751749 1.3579 7.25116 0.357481 7.96504C0.141943 8.12019 0.0697653 8.21034 0.0341812 8.31517C-0.138656 8.82779 0.400189 9.04897 0.400189 9.04897L4.91632 10.5669C4.99255 10.5809 5.0709 10.5762 5.14506 10.5533C6.17293 9.88342 15.4827 3.82219 16.0236 3.61883C16.108 3.59262 16.1711 3.61883 16.1548 3.68277C15.9392 4.4606 7.85352 11.872 7.85352 11.872C7.83354 11.8985 7.81682 11.9273 7.80371 11.958L7.79353 11.9517L7.37161 16.5715C7.37161 16.5715 7.19572 17.9867 8.56723 16.5715C9.53512 15.5725 10.4725 14.7381 10.9412 14.3313C12.4947 15.4373 14.1661 16.6606 14.887 17.3001C15.0079 17.421 15.1513 17.5155 15.3085 17.578C15.4658 17.6405 15.6336 17.6697 15.802 17.6638C16.4862 17.6376 16.6774 16.8619 16.6774 16.8619C16.6774 16.8619 19.8708 3.61149 19.9724 1.83673C19.9826 1.66271 19.9968 1.5516 19.9989 1.43209C20.0042 1.29388 19.9908 1.15558 19.9592 1.02116',
github:
'M10.4952 1.77001e-07C8.00236 0.00180857 5.59145 0.883451 3.69351 2.48729C1.79558 4.09113 0.53438 6.3126 0.135411 8.75449C-0.263559 11.1964 0.225716 13.6995 1.51575 15.8163C2.80579 17.9331 4.81248 19.5255 7.17703 20.3088C7.70178 20.4043 7.89331 20.0823 7.89331 19.8063C7.89331 19.559 7.88457 18.9037 7.87932 18.0341C4.95909 18.6633 4.34164 16.6368 4.34164 16.6368C4.1485 16.0069 3.73508 15.4661 3.17582 15.1119C2.22253 14.4653 3.24841 14.4783 3.24841 14.4783C3.58124 14.524 3.89915 14.6446 4.17788 14.8308C4.45661 15.017 4.68881 15.264 4.85677 15.5528C4.99889 15.8099 5.19098 16.0366 5.42192 16.2196C5.65286 16.4027 5.91808 16.5385 6.20224 16.6192C6.4864 16.6999 6.78386 16.7239 7.07743 16.6898C7.371 16.6558 7.65484 16.5643 7.91256 16.4207C7.96023 15.8923 8.19658 15.3983 8.57899 15.0277C6.24735 14.7673 3.7959 13.8708 3.7959 9.87669C3.78072 8.84135 4.16782 7.83996 4.87688 7.08032C4.55608 6.18143 4.59299 5.19494 4.98008 4.32214C4.98008 4.32214 5.86166 4.04181 7.8662 5.39052C9.58722 4.92309 11.4032 4.92309 13.1242 5.39052C15.1287 4.04181 16.0103 4.32214 16.0103 4.32214C16.3989 5.19455 16.4362 6.18151 16.1144 7.08032C16.8237 7.83976 17.2105 8.84136 17.1945 9.87669C17.1945 13.8803 14.7387 14.7612 12.3983 15.019C12.6493 15.2715 12.843 15.5744 12.9664 15.9073C13.0898 16.2402 13.14 16.5954 13.1137 16.9492C13.1137 18.3378 13.1006 19.4661 13.1006 19.8072C13.1006 20.0858 13.2904 20.4147 13.823 20.3088C16.1883 19.5252 18.1955 17.932 19.4855 15.8142C20.7755 13.6965 21.264 11.1923 20.8638 8.74979C20.4636 6.30726 19.2007 4.08573 17.301 2.48266C15.4013 0.879578 12.9889 -0.000455666 10.4952 1.77001e-07',
book: 'M11.2528 15.1838C11.6434 15.1838 11.9949 15.4963 11.9949 15.9259C11.9949 16.3164 11.6824 16.6679 11.2528 16.6679C10.8623 16.6679 10.5108 16.3555 10.5108 15.9259C10.5108 15.4963 10.8623 15.1838 11.2528 15.1838ZM22.7348 10.6535C22.3443 10.6535 21.9928 10.3411 21.9928 9.91147C21.9928 9.52092 22.3052 9.16943 22.7348 9.16943C23.1254 9.16943 23.4769 9.48187 23.4769 9.91147C23.4769 10.302 23.1254 10.6535 22.7348 10.6535ZM22.7348 7.64631C21.4851 7.64631 20.4697 8.66172 20.4697 9.91147C20.4697 10.1458 20.5087 10.3801 20.5868 10.6144L13.1274 14.598C12.6978 13.9731 11.9949 13.6216 11.2528 13.6216C10.3936 13.6216 9.61254 14.1293 9.22199 14.8714L2.50463 11.3565C1.80165 10.9659 1.25488 9.83336 1.33299 8.73983C1.37205 8.19307 1.56732 7.76347 1.8407 7.60725C2.03597 7.49009 2.23124 7.52914 2.50463 7.64631L2.54368 7.68536C4.34019 8.62267 10.1593 11.6689 10.3936 11.7861C10.7842 11.9423 10.9794 12.0204 11.6434 11.708L23.6721 5.45926C23.8674 5.38115 24.0627 5.22493 24.0627 4.95155C24.0627 4.60006 23.7112 4.44384 23.7112 4.44384C23.0082 4.1314 21.9538 3.6237 20.9383 3.15504C18.7513 2.13963 16.2518 0.967992 15.1583 0.382175C14.221 -0.125533 13.4399 0.304066 13.3227 0.382175L13.0493 0.499339C8.08942 2.99882 1.52826 6.24035 1.13772 6.47467C0.473794 6.86522 0.0441944 7.68536 0.00513992 8.70078C-0.072969 10.302 0.747175 11.9814 1.91881 12.5672L9.02672 16.2383C9.18294 17.3318 10.1593 18.191 11.2528 18.191C12.5026 18.191 13.4789 17.2147 13.518 15.9649L21.3289 11.747C21.7194 12.0595 22.2271 12.2157 22.7348 12.2157C23.9846 12.2157 25 11.2003 25 9.95052C25 8.66172 23.9846 7.64631 22.7348 7.64631Z',
youtube:
'M10.9652 14.1462L6.65686 14.0703C5.2619 14.0438 3.86346 14.0967 2.49586 13.8225C0.41541 13.4129 0.268023 11.4045 0.113799 9.71984C-0.0987062 7.35142 -0.0164391 4.94 0.384586 2.59135C0.610977 1.27351 1.50192 0.487146 2.87973 0.401574C7.53086 0.0910231 12.2129 0.127827 16.8537 0.27271C17.3439 0.285992 17.8374 0.358586 18.3207 0.441217C20.7063 0.844234 20.7645 3.12019 20.9191 5.03612C21.0733 6.97182 21.0082 8.91745 20.7134 10.84C20.477 12.4318 20.0245 13.7666 18.115 13.8955C15.7225 14.064 13.385 14.1997 10.9858 14.1565C10.9859 14.1462 10.9721 14.1462 10.9652 14.1462ZM8.43233 10.1163C10.2353 9.11861 12.0038 8.13758 13.7964 7.14661C11.9901 6.14895 10.2249 5.16792 8.43233 4.17696V10.1163Z',
}

const SocialIcons = ({
icon,
width,
height,
}: {
icon: string
width: number
height: number
}) => {
return (
<span className="cursor-pointer text-white transition ease-in hover:opacity-75">
<svg
width={width}
height={height}
viewBox={`0 0 ${width} ${height}`}
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d={icons[icon]}
fill="currentColor"
/>
</svg>
</span>
)
}

export default SocialIcons
4 changes: 2 additions & 2 deletions frontend/components/modal/Disclaimer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export function Disclaimer({ onAgree, showModal }: DisclaimerProps) {
<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-25 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-6 py-5 font-body text-base font-light leading-5 tracking-widest md:px-10">
<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">
Expand Down Expand Up @@ -134,7 +134,7 @@ export function Disclaimer({ onAgree, showModal }: DisclaimerProps) {
Terms.{' '}
</p>
</div>
<div className="[&>button]:w-[200px] flex min-h-fit flex-col items-stretch gap-4 py-5 px-10 text-sm">
<div className="[&>button]:w-[200px] flex min-h-fit flex-col items-stretch gap-4 py-5 px-6 text-sm md:px-10">
<div
className="flex items-center justify-center gap-2 hover:cursor-pointer"
onClick={() => setAgreed((agreed) => !agreed)}
Expand Down
4 changes: 2 additions & 2 deletions frontend/components/wallets/WalletButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export function WalletConnectedButton({

return (
<button
className="wbtn disabled:text-light disabled:before:bg-dark sm:min-w-[207px]"
className="wbtn disabled:pointer-events-none disabled:opacity-40 sm:min-w-[207px]"
onClick={onClick}
onMouseEnter={() => !disabled && setButtonText(onHoverText)}
onMouseLeave={() => !disabled && setButtonText(dispAddress)}
Expand Down Expand Up @@ -136,7 +136,7 @@ export type SingleWalletViewProps = {
export function SingleWalletView({ wallet, onSelect }: SingleWalletViewProps) {
return (
<button
className="wbtn wbtn-secondary min-w-[117px] sm:min-w-[207px] "
className="wallet-btn min-w-[117px] sm:min-w-[207px] "
onClick={() => {
wallet.onSelect()
onSelect()
Expand Down
13 changes: 10 additions & 3 deletions frontend/images/coin.inline.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 4 additions & 4 deletions frontend/images/not.inline.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 0 additions & 4 deletions frontend/images/pyth.inline.svg
View file

This file was deleted.

4 changes: 2 additions & 2 deletions frontend/images/signed.inline.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions frontend/images/verified.inline.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit cfd7e00

Please sign in to comment.