Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

BFE-300: Update Pools Banner #322

Open
wants to merge 5 commits into
base: v2
Choose a base branch
from
Open

BFE-300: Update Pools Banner #322

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c670ebc
feature(bex): upgrade the banner on pools page to display at full scr…
PaulMcInnis Jan 8, 2025
b9df9a7
chore(bex): responsiveness for pools banner
PaulMcInnis Jan 8, 2025
b6ad345
fix(bex): fix insets for the Pools Banner text and icons + update mob…
PaulMcInnis Jan 9, 2025
9ed68a6
chore(bex): gradients for desktop and mobile views (different) + fix …
PaulMcInnis Jan 9, 2025
df114e4
chore(bex): banner image needs to resize so that we have an aspect ra…
PaulMcInnis Jan 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 46 additions & 33 deletions apps/hub/src/app/pools/PoolsPageContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import Image from "next/image";
import { useSearchParams } from "next/navigation";
import { SWRFallback } from "@bera/berajs";
import { cloudinaryUrl } from "@bera/config";
import { Icons } from "@bera/ui/icons";
import { unstable_serialize } from "swr";

import { PoolSearch } from "./PoolsTable";
Expand All @@ -17,41 +18,53 @@ export function PoolsPageContent({ pools }: { pools?: any }) {
<SWRFallback
fallback={{ [unstable_serialize(["useAllPools", ""])]: pools }}
>
<div className="mx-auto flex w-full flex-col items-center justify-center gap-8">
{/* Large Screen */}
<div className="relative w-full">
<Image
src={`${cloudinaryUrl}/station/ctshf1lmqqpyyxkssclz.png`}
alt="Large Screen Image"
width={1200}
height={600}
className="h-auto w-full object-cover"
/>
<div className="relative mx-auto flex w-full flex-col items-center gap-1 pt-0 md:gap-2 lg:gap-4">
{/* Full-Width Banner Section */}
<div className="relative top-[-32px] w-screen">
<div className="relative h-[200px] w-full sm:h-[300px] lg:h-[492px]">
<div className="pointer-events-none absolute left-0 top-0 z-10 hidden h-16 w-full bg-gradient-to-b from-black via-transparent to-transparent sm:h-24 sm:via-black md:h-16 md:via-transparent lg:block lg:via-black" />
<div className="pointer-events-none absolute bottom-0 left-0 z-10 h-16 w-full bg-gradient-to-t from-black via-transparent to-transparent lg:via-black" />
<div className="pointer-events-none absolute left-0 top-0 z-10 hidden h-full w-16 bg-gradient-to-r from-black via-transparent to-transparent lg:block lg:via-black" />
<div className="pointer-events-none absolute right-0 top-0 z-10 hidden h-full w-16 bg-gradient-to-l from-black via-transparent to-transparent lg:block lg:via-black" />

<Image
src={`${cloudinaryUrl}/station/pools-bg.png`}
alt="Pools Banner"
layout="fill"
objectFit="cover"
objectPosition="center"
className="z-0 mx-auto"
/>
</div>

{/* Text Overlay */}
<div className="absolute inset-0 flex items-center justify-center pt-28 text-[#E9D9B2] sm:pt-0">
{/* NOTE: these breakpoints are set in the parent container, but to inset this like the table ~and~ overlay it we need them here */}
<div className="w-full px-4 text-white sm:max-w-xl md:max-w-2xl lg:max-w-4xl xl:max-w-6xl 2xl:max-w-7xl">
<div className="flex flex-col items-center text-center md:items-start md:text-start">
<div className="z-20 flex flex-row space-x-4 text-[#F9F4D5]">
<Icons.logo className="w-[47px] pl-0 md:w-[47px] md:pl-1 lg:w-[57px] lg:pl-2" />
<p className="text-xl font-bold tracking-wider md:text-xl lg:text-2xl">
POOLS
</p>
</div>

<h1 className="z-20 mt-1 text-5xl font-extrabold leading-none tracking-tight text-foreground sm:mt-2 sm:leading-tight md:mt-4 md:text-4xl lg:text-6xl">
Add <span className="text-[#E9D9B2]">liquidity</span> <br />{" "}
or <span className="text-[#E9D9B2]">Create a pool</span>
</h1>
<p className="z-20 mt-6 max-w-44 text-lg font-medium leading-relaxed text-muted-foreground sm:max-w-fit md:mt-2 md:text-base lg:mt-4 lg:text-lg">
Earn swap fees and BGT incentives
</p>
</div>
</div>
</div>
</div>

{/* Tablet Screen
<div className="hidden md:block lg:hidden">
<Image
src={`${cloudinaryUrl}/DEX/zxxnwkdhfjcikwwgtqpc.png`}
alt="Tablet Screen Image"
width={800}
height={400}
className="w-full h-auto object-cover"
/>
</div> */}

{/* Mobile Screen */}
{/* <div className="block xs:hidden">
<Image
src={`${cloudinaryUrl}/DEX/zz9s7qxq8g3ykbqtzgxv.png`}
alt="Mobile Screen Image"
width={400}
height={200}
className="w-full h-auto object-cover"
/>
</div> */}

<PoolSearch poolType={poolType || "allPools"} />
{/* Pool Search Section */}
<div className="relative z-10 w-full max-w-7xl px-4 pt-20 md:pt-0">
<PoolSearch poolType={poolType || "allPools"} />
</div>
</div>
</SWRFallback>
);
Expand Down
Loading