Skip to content

Commit

Permalink
header, footer and background refactor for dark theme
Browse files Browse the repository at this point in the history
  • Loading branch information
supertong committed Nov 23, 2024
1 parent 54477d6 commit 58a7159
Show file tree
Hide file tree
Showing 6 changed files with 48 additions and 42 deletions.
3 changes: 3 additions & 0 deletions public/footer-rectangle-dark.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
78 changes: 40 additions & 38 deletions src/app/components/Footer/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -68,49 +68,51 @@ const iconLinks = [

export const Footer: React.FC = () => {
return (
<div className="container mx-auto flex flex-row items-center justify-around bg-footer-texture bg-cover h-[238px] text-white">
<div className="flex flex-col">
<div className="flex flex-wrap justify-center gap-8 p-4 pt-2 md:flex-row md:p-6 md:pt-2">
{iconLinks.map(({ name, url, Icon }) => (
<div
key={name}
className="flex w-4 items-center justify-center text-[22px] text-xl"
>
<a
href={url}
target="_blank"
rel="noopener noreferrer"
className="transition-colors hover:text-primary"
<div className="hidden md:flex bg-footer-texture-light dark:bg-footer-texture-dark bg-[length:100%_100%] h-[238px] text-white">
<div className="container mx-auto flex flex-row items-center justify-around">
<div className="flex flex-col">
<div className="flex flex-wrap justify-center gap-8 p-4 pt-2 md:flex-row md:p-6 md:pt-2">
{iconLinks.map(({ name, url, Icon }) => (
<div
key={name}
className="flex w-4 items-center justify-center text-[22px] text-xl"
>
<Icon title={name} />
</a>
</div>
))}
<a
href={url}
target="_blank"
rel="noopener noreferrer"
className="transition-colors hover:text-primary"
>
<Icon title={name} />
</a>
</div>
))}
</div>
<div>
<a
href="https://babylonlabs.io/terms-of-use"
target="_blank"
rel="noopener noreferrer"
className="transition-colors hover:text-primary"
>
Terms of Use
</a>{" "}
-{" "}
<a
href="https://babylonlabs.io/privacy-policy"
target="_blank"
rel="noopener noreferrer"
className="transition-colors hover:text-primary"
>
Privacy Policy
</a>{" "}
- 2024 Babylon Labs. All rights reserved.
</div>
</div>
<div>
<a
href="https://babylonlabs.io/terms-of-use"
target="_blank"
rel="noopener noreferrer"
className="transition-colors hover:text-primary"
>
Terms of Use
</a>{" "}
-{" "}
<a
href="https://babylonlabs.io/privacy-policy"
target="_blank"
rel="noopener noreferrer"
className="transition-colors hover:text-primary"
>
Privacy Policy
</a>{" "}
- 2024 Babylon Labs. All rights reserved.
<Image src={babylonIcon} alt="babylon" />
</div>
</div>
<div>
<Image src={babylonIcon} alt="babylon" />
</div>
</div>
);
};
4 changes: 2 additions & 2 deletions src/app/components/Header/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ export const Header = () => {

return (
<nav>
<section className="bg-primary-main h-[300px] mb-[-188px]">
<div className="container h-[84px] py-[22px] mx-auto flex items-center justify-between">
<section className="bg-primary-main dark:bg-[#181818] h-[300px] mb-[-188px]">
<div className="container h-[84px] py-[22px] px-6 mx-auto flex items-center justify-between">
<Logo />
{/* <div className="flex flex-1">
{shouldDisplayTestingMsg() && (
Expand Down
2 changes: 1 addition & 1 deletion src/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export default function RootLayout({
network === Network.MAINNET
? "main-app-mainnet"
: "main-app-testnet",
"bg-primary-contrast",
"bg-primary-contrast dark:bg-[#1E1E1E]",
)}
>
{children}
Expand Down
3 changes: 2 additions & 1 deletion tailwind.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,8 @@ const config: Config = {
stakingFinalityProvidersDesktop: "2fr 1.5fr 2fr 0.75fr 0.75fr",
},
backgroundImage: {
"footer-texture": "url(/footer-rectangle.svg)",
"footer-texture-light": "url(/footer-rectangle-light.svg)",
"footer-texture-dark": "url(/footer-rectangle-dark.svg)",
},
},
},
Expand Down

0 comments on commit 58a7159

Please sign in to comment.