Skip to content

Commit

Permalink
refactor: update width of header and footer (#685)
Browse files Browse the repository at this point in the history
  • Loading branch information
@JayJay1024
JayJay1024 authored Apr 5, 2024
1 parent 3ac14bc commit 3f53ff6
Show file tree
Hide file tree
Showing 3 changed files with 104 additions and 113 deletions.
4 changes: 2 additions & 2 deletions src/app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,10 @@ body {
@apply h-[64px];
}
.app-footer {
@apply h-[58px];
@apply h-[48px];
}
.app-main {
min-height: calc(100vh - 64px - 58px);
min-height: calc(100vh - 64px - 48px);
@apply mt-[64px];
}

Expand Down
93 changes: 44 additions & 49 deletions src/components/footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,69 +24,64 @@ export default function Footer() {
}, []);

return (
<div className="app-footer w-full">
<div className="mx-auto flex h-full max-w-8xl shrink-0 items-center justify-center px-medium">
{/* Copyright */}
<span className="text-sm font-medium text-white/50">{`© ${new Date().getFullYear()} Helix Bridge`}</span>
<div className="app-footer flex w-full items-center justify-center px-medium lg:justify-between lg:px-5">
<span className="text-xs font-semibold text-white/50">{`© ${new Date().getFullYear()} Helix Bridge`}</span>

<div className="mx-3 h-4 w-[1px] bg-white/30 lg:mx-5 lg:bg-transparent" />
<div className="hidden items-center gap-5 lg:flex">
<Link
className="text-xs font-semibold text-white/50 transition hover:text-white active:scale-95"
href="/records"
>
Explorer
</Link>
<a
className="text-xs font-semibold text-white/50 transition hover:text-white active:scale-95"
href="https://xtoken.helixbridge.app/"
rel="noopener noreferrer"
target="_blank"
>
xToken
</a>
<a
className="text-xs font-semibold text-white/50 transition hover:text-white active:scale-95"
href="https://docs.helixbridge.app/"
rel="noopener noreferrer"
target="_blank"
>
Docs
</a>

<div className="flex shrink-0 items-center gap-medium lg:gap-5">
<Link
className="text-sm font-medium text-white/50 transition hover:text-white active:scale-95"
href="/records"
>
Explorer
</Link>
{mainnetOrTestnet && (
<a
className="text-sm font-medium text-white/50 transition hover:text-white active:scale-95"
href="https://xtoken.helixbridge.app/"
className="text-xs font-semibold text-white/50 transition hover:text-white active:scale-95"
href={mainnetOrTestnet.link}
rel="noopener noreferrer"
target="_blank"
>
xToken
{mainnetOrTestnet.label}
</a>
<a
className="text-sm font-medium text-white/50 transition hover:text-white active:scale-95"
href="https://docs.helixbridge.app/"
rel="noopener noreferrer"
target="_blank"
>
Docs
</a>

{mainnetOrTestnet && (
<a
className="text-sm font-medium text-white/50 transition hover:text-white active:scale-95"
href={mainnetOrTestnet.link}
rel="noopener noreferrer"
target="_blank"
>
{mainnetOrTestnet.label}
</a>
)}
)}

<div className="hidden h-4 w-[1px] bg-white/30 lg:block" />
<div className="h-3 w-[1px] bg-white/30" />

<SocialLink href="https://github.com/helix-bridge">
<Image width={18} height={18} alt="Github" src="/images/social/github.svg" />
</SocialLink>
<SocialLink href="https://twitter.com/helixbridges">
<Image width={18} height={18} alt="Twitter" src="/images/social/twitter.svg" />
</SocialLink>
<SocialLink href="https://discord.gg/6XyyNGugdE">
<Image width={22} height={22} alt="Discord" src="/images/social/discord.svg" />
</SocialLink>
<SocialLink href="mailto:[email protected]">
<Image width={18} height={18} alt="Email" src="/images/social/email.svg" />
</SocialLink>
</div>
<Social href="https://github.com/helix-bridge">
<Image width={16} height={16} alt="Github" src="/images/social/github.svg" />
</Social>
<Social href="https://twitter.com/helixbridges">
<Image width={16} height={16} alt="Twitter" src="/images/social/twitter.svg" />
</Social>
<Social href="https://discord.gg/6XyyNGugdE">
<Image width={20} height={20} alt="Discord" src="/images/social/discord.svg" />
</Social>
<Social href="mailto:[email protected]">
<Image width={16} height={16} alt="Email" src="/images/social/email.svg" />
</Social>
</div>
</div>
);
}

function SocialLink({ children, href }: PropsWithChildren<{ href: string }>) {
function Social({ children, href }: PropsWithChildren<{ href: string }>) {
return (
<a
target="_blank"
Expand Down
120 changes: 58 additions & 62 deletions src/components/header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,73 +32,69 @@ export default function Header() {

return (
<>
<div className="app-header fixed left-0 top-0 z-10 w-full border-b border-b-white/25 bg-app-bg lg:border-b-transparent">
<div className="mx-auto flex h-full max-w-8xl items-center justify-between px-medium">
{/* Left */}
<div className="flex items-center gap-5">
{/* Logo */}
<div className="flex items-center gap-medium">
<Link href="/">
<Image width={90} height={25} alt="Logo" src="/images/logo.svg" />
</Link>
{!isProduction() && (
<div className="inline-flex items-center justify-center rounded-small bg-primary px-1 py-[1px]">
<span className="text-xs font-bold text-black">testnet</span>
</div>
)}
</div>

{/* Navigations */}
<div className="hidden items-center gap-medium lg:flex">
{navigationsConfig.map(({ href, label, external, soon, disabled }) =>
external ? (
<a
rel="noopener noreferrer"
target="_blank"
href={href}
key={label}
className={`rounded-[0.625rem] px-medium py-small text-sm font-bold transition-colors hover:bg-white/[0.15] ${
pathname === href ? "text-primary underline" : "text-white"
}`}
>
{label}
</a>
) : soon || disabled ? (
<Tooltip key={label} content={soon ? "Coming soon" : "This feature is temporarily under maintenance"}>
<span className="rounded-[0.625rem] px-medium py-small text-sm font-bold text-white/50">
{label}
</span>
</Tooltip>
) : (
<Link
key={label}
href={href}
className={`rounded-[0.625rem] px-medium py-small text-sm font-bold transition-colors hover:bg-white/[0.15] ${
pathname === href ? "text-primary underline decoration-2 underline-offset-8" : "text-white"
}`}
>
{label}
</Link>
),
)}
</div>
<div className="app-header fixed left-0 top-0 z-10 flex w-full items-center justify-between border-b border-b-white/25 bg-app-bg px-medium lg:border-b-transparent lg:px-5">
{/* Left */}
<div className="flex items-center gap-5">
{/* Logo */}
<div className="flex items-center gap-medium">
<Link href="/">
<Image width={90} height={25} alt="Logo" src="/images/logo.svg" />
</Link>
{!isProduction() && (
<div className="inline-flex items-center justify-center rounded-small bg-primary px-1 py-[1px]">
<span className="text-xs font-bold text-black">testnet</span>
</div>
)}
</div>

{/* Right */}
{/* Navigations */}
<div className="hidden items-center gap-medium lg:flex">
<HistoryNav />
<User prefixLength={14} suffixLength={10} />
<ChainSwitch />
{navigationsConfig.map(({ href, label, external, soon, disabled }) =>
external ? (
<a
rel="noopener noreferrer"
target="_blank"
href={href}
key={label}
className={`rounded-[0.625rem] px-medium py-small text-sm font-bold transition-colors hover:bg-white/[0.15] ${
pathname === href ? "text-primary underline" : "text-white"
}`}
>
{label}
</a>
) : soon || disabled ? (
<Tooltip key={label} content={soon ? "Coming soon" : "This feature is temporarily under maintenance"}>
<span className="rounded-[0.625rem] px-medium py-small text-sm font-bold text-white/50">{label}</span>
</Tooltip>
) : (
<Link
key={label}
href={href}
className={`rounded-[0.625rem] px-medium py-small text-sm font-bold transition-colors hover:bg-white/[0.15] ${
pathname === href ? "text-primary underline decoration-2 underline-offset-8" : "text-white"
}`}
>
{label}
</Link>
),
)}
</div>
<Image
width={24}
height={24}
alt="Menu"
src="/images/menu.svg"
className="inline transition-transform active:translate-y-1 lg:hidden"
onClick={setIsOpenTrue}
/>
</div>

{/* Right */}
<div className="hidden items-center gap-medium lg:flex">
<HistoryNav />
<User prefixLength={14} suffixLength={10} />
<ChainSwitch />
</div>
<Image
width={24}
height={24}
alt="Menu"
src="/images/menu.svg"
className="inline transition-transform active:translate-y-1 lg:hidden"
onClick={setIsOpenTrue}
/>
</div>

<Drawer maskClosable isOpen={isOpen} onClose={setIsOpenFalse}>
Expand Down

0 comments on commit 3f53ff6

Please sign in to comment.