Skip to content

Style responsive tg #128

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

Merged
stephanniegb merged 8 commits into from
Jun 16, 2025
Merged

Style responsive tg #128

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
0a5a0d2
chore: learn page
stephanniegb Jun 15, 2025
247ca19
Merge branch 'chore-responsive-learn-page' into style-responsive-search
stephanniegb Jun 16, 2025
dd13709
chore: make search page responsive
stephanniegb Jun 16, 2025
b879b18
chore: make discover page responsive
stephanniegb Jun 16, 2025
c0a09ed
chore: make create responsive
stephanniegb Jun 16, 2025
80bdbe3
style: make create responsive
stephanniegb Jun 16, 2025
091547c
chore: make connect responsive
stephanniegb Jun 16, 2025
73a5c31
chore: update copy
stephanniegb Jun 16, 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
14 changes: 7 additions & 7 deletions app/components/Connect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,15 @@ const Connect = ({ className }: { className?: string }) => {
<>
<button
onClick={() => (address ? disconnect() : setIsOpen(true))}
className={`flex items-center rounded-[25px] px-2 py-2 text-accent-green ring-1 ring-accent-green ${className}`}
className={`flex items-center rounded-[25px] px-2 py-2 text-sm text-accent-green ring-1 ring-accent-green ${className}`}
>
{shortenedAddress && <ProfileIcon width="1.5em" height="1.5em" />}
<span className="truncate px-2">
{shortenedAddress || "Connect Wallet"}
</span>
</button>
<Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogContent className="h-screen rounded-none p-3 sm:h-auto sm:min-w-[32rem] sm:rounded-lg">
<DialogContent className="h-screen w-full rounded-none p-3 sm:h-auto sm:max-w-[28rem] sm:rounded-lg sm:py-4 md:max-w-[clamp(700px,95vw,800px)]">
<div className="grid h-full grid-cols-1 md:grid-cols-5">
<div className="relative col-span-2 hidden overflow-hidden md:block">
<Image
Expand All @@ -49,11 +49,11 @@ const Connect = ({ className }: { className?: string }) => {
Connect Wallet
</DialogTitle>
<p className="text-sm text-foreground-secondary md:text-base">
Please choose a wallet you want to connect to TokenGiver.
Please choose a wallet you want to connect to Token Giver.
There are several wallet providers.
</p>

<div className="mx-auto grid w-[70%] grid-cols-1 gap-2 overflow-y-auto p-1 xs:grid-cols-2 md:max-h-[270px] md:w-[100%] md:grid-cols-4 md:gap-2 lg:w-[100%]">
<div className="mx-auto grid grid-cols-1 gap-2 overflow-y-auto p-1 xs:grid-cols-2 md:max-h-[270px] md:w-[100%] md:grid-cols-4 md:gap-2 lg:w-[100%]">
{connectors.map((connector) => {
if (!connector.id || !connector.available()) return null;
return (
Expand All @@ -62,11 +62,11 @@ const Connect = ({ className }: { className?: string }) => {
onClick={() => connect({ connector })}
className="text-xs md:text-sm"
>
<div className="mx-auto mb-1 grid h-[100px] place-content-center rounded-[5.3px] bg-[#F7F6F6] md:h-[100px] md:w-[100px] lg:h-[100px] lg:w-[100px]">
<div className="mx-auto mb-1 grid h-[100px] place-content-center rounded-[5.3px] bg-[#F7F6F6] md:h-[90px] md:w-[90px] lg:h-[100px] lg:w-[100px]">
<div className="grid h-[60px] w-[60px] place-content-center md:h-[50px] md:w-[50px]">
{typeof connector.icon === "string" ? (
<img
className="w-[50px]"
className="w-[30px]"
src={connector.icon}
alt={`${connector.name} icon`}
/>
Expand Down Expand Up @@ -108,7 +108,7 @@ const Connect = ({ className }: { className?: string }) => {
)}
</div>
</div>
<span className="inline-block w-full truncate pb-2 pt-2 text-center text-[16px] font-medium">
<span className="inline-block w-full truncate pb-2 pt-2 text-center font-medium">
{connector.name}
</span>
</button>
Expand Down
6 changes: 3 additions & 3 deletions app/components/Fundraiser/FeaturedCampaigns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,22 @@ const featuredCampaigns = [
title: "Clean Water Initiative in Tanzania",
description:
"Help us build sustainable water wells in rural communities, providing clean drinking water to over 10,000 people.",
image: "/default-image.webp",
image: "/temp-2.jpg",
featured: true
},
{
id: 2,
title: "Tech Education for Girls",
description:
"Supporting young women in STEM through coding bootcamps and mentorship programs across Southeast Asia.",
image: "/default-image.webp"
image: "/temp-0.jpg"
},
{
id: 3,
title: "Reforestation Project Amazon",
description:
"Join our mission to plant 100,000 trees in deforested areas of the Amazon rainforest and support local communities.",
image: "/default-image.webp"
image: "/temp-1.jpg"
}
];

Expand Down
149 changes: 22 additions & 127 deletions app/components/MobileMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,98 +29,40 @@ const MobileMenu = ({
const { disconnect } = useDisconnect();
const router = useRouter();

const yRef = useRef(100);
const cRef = useRef(100);
useEffect(() => {
let y = yRef.current;
let c = cRef.current;
const links = document.querySelector(".mobile-nav");
const path = document.querySelector(".path");
let animationFrameId: number;

const lerp = (start: number, end: number, t: number) => {
return start * (1 - t) + end * t;
};

if (isMenuOpen) {
setTimeout(() => {
links?.classList.add("active");
}, 800);
document.body.style.overflow = "hidden";
} else {
links?.classList.remove("active");
document.body.style.overflow = "auto";
}
const animate = () => {
if (isMenuOpen) {
y = +lerp(y, 0, 0.065).toFixed(2);
c = +lerp(c, 0, 0.085).toFixed(2);
yRef.current = y;
cRef.current = c;
if (y <= 0.1 && c <= 0.1) {
cancelAnimationFrame(animationFrameId);
return;
}
} else {
y = +lerp(y, 100, 0.065).toFixed(2);
c = +lerp(c, 100, 0.085).toFixed(2);
yRef.current = y;
cRef.current = c;
if (y >= 99.93 && c >= 99.93) {
cancelAnimationFrame(animationFrameId);
return;
}
}

path?.setAttribute(
"d",
`M 0 ${y} L 0 100 100 100 100 ${y} C 50 ${c}, 50 ${c}, 0 ${y}`
);
animationFrameId = requestAnimationFrame(animate);
};

animationFrameId = requestAnimationFrame(animate);

return () => cancelAnimationFrame(animationFrameId);
}, [isMenuOpen]);

return (
<div
onClick={(e) => {
e.stopPropagation();
setTimeout(() => {
setIsMenuOpen(false);
document.body.style.overflow = "auto";
}, 300);
setIsMenuOpen(false);
}}
className={`fixed left-0 top-0 z-[9999] h-screen w-screen max-[800px]:block ${
isMenuOpen ? "pointer-events-auto" : "pointer-events-none"
} hidden`}
>
<svg
width={"100%"}
height={"100%"}
viewBox="0 0 100 100"
preserveAspectRatio="none"
className="absolute"
>
<path
className="path"
stroke="#00594C"
fill="#00594C"
strokeWidth={"1px"}
dur={"10s"}
vectorEffect={"non-scaling-stroke"}
d={`M 0 100 L 100 100 L 0 100 C 0 0, 0 0, 0 100`}
/>
<animateMotion dur={"10s"} repeatCount={"indefinite"}>
<mpath xlinkHref="#path" />
</animateMotion>
</svg>
{/* Background overlay */}
<div
className={`absolute inset-0 bg-[#00594C] transition-opacity duration-700 motion-reduce:duration-300 ${
isMenuOpen ? "opacity-100" : "opacity-0"
}`}
/>

{/* Menu content */}
<div
className={`mobile-nav max-lgMobile:px-4 relative mx-auto flex max-w-[700px] flex-col gap-8 p-8`}
className={`absolute inset-0 flex flex-col p-8 transition-transform duration-700 ease-in-out motion-reduce:duration-300 motion-reduce:ease-out ${
isMenuOpen ? "translate-x-0" : "translate-x-full"
}`}
>
<div className="flex justify-between">
<Link href="/">
<div className="xTablet:w-[10rem] w-[8rem] max-[800px]:w-[10rem]">
<div className="w-[8rem] max-[800px]:w-[10rem] xTablet:w-[10rem]">
<Image
src={"/white-logo.png"}
alt={"logo"}
Expand Down Expand Up @@ -152,81 +94,34 @@ const MobileMenu = ({
</svg>
</button>
</div>
<nav className="">

<nav className="mt-8">
<ul className="flex flex-col gap-8 text-white">
<li>
<Link href={"/search"}>Search</Link>
</li>
<li>
<Link href={"/discover"}>Discover</Link>
</li>

<li>
<Link href={"/learn"}>Get Started</Link>
</li>
{/* <li>
<a href="">Contact Us</a>
</li> */}
</ul>
</nav>

<div className="mobile:w-[60%] xMobile:w-[85%] mt-4 flex w-[90%] flex-col gap-4">
{/* {address ? (
<div className="flex flex-col gap-4">
<button
onClick={() => {
router.push(`/campaigns/${address}`);
}}
className="flex items-center gap-4"
>
<span className="">
<ProfileIcon width="1em" height="1em" />
</span>
<span className="">My Campaigns</span>
</button>
<button
onClick={() => {
if (address) {
disconnect();
}
}}
className="flex items-center gap-4"
>
<span>
<LogOutIcon />
</span>
<span>Log out</span>
</button>
</div>
) : (
<button
onClick={connectWallet}
className="flex h-full w-full items-center justify-between rounded-[25px] border-[1px] border-solid border-theme-green"
>
<span className="px-2">
<WalletIcon />
</span>

<span className="px-2">Sign in</span>
<span className="rounded-full bg-[#edf2ee66] p-2">
<ProfileIcon width="1.2em" height="1.2em" />
</span>
</button>
)} */}

<Connect className="max-lgMobile:text-sm border border-white !text-center !text-white" />
<div className="mt-8 flex w-[90%] flex-col gap-4 xMobile:w-[85%] mobile:w-[60%]">
<Connect className="border border-white !text-center !text-white max-lgMobile:text-sm" />

<button
onClick={createCampaign}
className="max-lgMobile:text-sm w-full rounded-[25px] bg-white px-6 py-2 text-left font-medium text-accent-green"
className="w-full rounded-[25px] bg-white px-6 py-2 text-left font-medium text-accent-green max-lgMobile:text-sm"
>
Start a Campaign
</button>
</div>

<p className="max-xMobile:text-xs fixed bottom-4 left-1/2 w-full -translate-x-1/2 text-center text-white">
Copyright © {new Date().getFullYear()} TokenGiver all rights
reserved{" "}
<p className="fixed bottom-4 left-1/2 w-full -translate-x-1/2 text-center text-white max-xMobile:text-xs">
Copyright © {new Date().getFullYear()} TokenGiver all rights reserved{" "}
</p>
</div>
</div>
Expand Down
Loading