Skip to content

Commit

Permalink
fix: light mode text & star bg
Browse files Browse the repository at this point in the history
  • Loading branch information
@kcmikee
kcmikee committed Nov 21, 2024
1 parent d80b62c commit 255d122
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 54 deletions.
48 changes: 28 additions & 20 deletions packages/nextjs/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,18 +34,20 @@ const images = [
"/emarc-pixels.jpg",
"/superior.jpeg",
"/cherry/cherrypfp.png",
"https://avatars.githubusercontent.com/u/141290516?v=4",
"https://avatars.githubusercontent.com/u/141290516?v=3",
];

const Alert = ({ children, className = "" }: Props) => (
<div className={`rounded-lg border p-4 mt-6 max-w-md mx-auto ${className}`}>{children}</div>
);

const AlertTitle = ({ children }: Props) => (
<h5 className="mb-1 font-medium leading-none tracking-tight">{children}</h5>
const AlertTitle = ({ children, className }: Props) => (
<h5 className={`mb-1 font-medium leading-none tracking-tight ${className}`}>{children}</h5>
);

const AlertDescription = ({ children }: Props) => <div className="text-sm opacity-70">{children}</div>;
const AlertDescription = ({ children, className }: Props) => (
<div className={`text-sm opacity-70 ${className}`}>{children}</div>
);

const Card = ({ children, className = "" }: Props) => (
<div className={`rounded-lg border bg-card text-card-foreground shadow-sm mt-6 max-w-xl mx-auto ${className}`}>
Expand All @@ -57,8 +59,8 @@ const CardHeader = ({ children, className = "" }: Props) => (
<div className={`flex flex-col space-y-1.5 p-6 ${className}`}>{children}</div>
);

const CardTitle = ({ children }: Props) => (
<h3 className="text-xl font-semibold leading-none tracking-tight">{children}</h3>
const CardTitle = ({ children, className }: Props) => (
<h3 className={`text-xl font-semibold leading-none tracking-tight ${className}`}>{children}</h3>
);

const CardContent = ({ children, className = "" }: Props) => <div className={`p-6 pt-0 ${className}`}>{children}</div>;
Expand All @@ -71,7 +73,7 @@ const StatusSection = ({ connectedAddress, isAllowListed, isCheckedIn, isLoading
<div className="flex items-center justify-center py-6">
<div className="flex items-center space-x-2">
<div className="w-6 h-6 border-b-2 border-gray-900 rounded-full animate-spin"></div>
<p className="text-sm text-muted">Checking your status...</p>
<p className="text-sm !text-white dark:text-white">Checking your status...</p>
</div>
</div>
</CardContent>
Expand All @@ -82,8 +84,10 @@ const StatusSection = ({ connectedAddress, isAllowListed, isCheckedIn, isLoading
if (!connectedAddress) {
return (
<Alert className="border-blue-200">
<AlertTitle>Connect Your Wallet</AlertTitle>
<AlertDescription>Please connect your wallet to view your Batch 10 status</AlertDescription>
<AlertTitle className="!text-white dark:!text-white">Connect Your Wallet</AlertTitle>
<AlertDescription className="!text-white dark:text-white">
Please connect your wallet to view your Batch 10 status
</AlertDescription>
</Alert>
);
}
Expand All @@ -93,12 +97,12 @@ const StatusSection = ({ connectedAddress, isAllowListed, isCheckedIn, isLoading
<Card>
<CardHeader className="pb-3">
<div className="flex items-center justify-between">
<CardTitle>Your Status</CardTitle>
<span className="px-2 py-1 text-sm font-medium text-red-800 bg-red-100 rounded-full">Not a Member</span>
<CardTitle className="!text-white dark:!text-white">Your Status</CardTitle>
<span className="px-2 py-1 text-sm font-medium !text-red-800 bg-red-100 rounded-full">Not a Member</span>
</div>
</CardHeader>
<CardContent>
<p className="text-sm opacity-70">You are not currently a member of Batch 10</p>
<p className="text-sm opacity-70 !text-white dark:!text-white">You are not currently a member of Batch 10</p>
</CardContent>
</Card>
);
Expand All @@ -109,14 +113,16 @@ const StatusSection = ({ connectedAddress, isAllowListed, isCheckedIn, isLoading
<Card>
<CardHeader className="pb-3">
<div className="flex items-center justify-between">
<CardTitle>Your Status</CardTitle>
<CardTitle className="!text-white dark:!text-white">Your Status</CardTitle>
<span className="px-2 py-1 text-sm font-medium text-yellow-800 bg-yellow-100 rounded-full">
Ready to Check In
</span>
</div>
</CardHeader>
<CardContent>
<p className="text-sm opacity-70">You are a Batch 10 member! Deploy your contract to check in</p>
<p className="text-sm opacity-70 !text-white dark:!text-white">
You are a Batch 10 member! Deploy your contract to check in
</p>
</CardContent>
</Card>
);
Expand All @@ -126,12 +132,12 @@ const StatusSection = ({ connectedAddress, isAllowListed, isCheckedIn, isLoading
<Card className="w-9/12 md:w-[446px]">
<CardHeader className="pb-3">
<div className="flex items-center justify-between">
<CardTitle>Your Status</CardTitle>
<CardTitle className="!text-white dark:!text-white">Your Status</CardTitle>
<span className="px-2 py-1 text-sm font-medium text-green-800 bg-green-100 rounded-full">Checked In</span>
</div>
</CardHeader>
<CardContent>
<div className="text-sm text-left opacity-70">
<div className="text-sm text-left opacity-70 !text-white dark:!text-white">
Active with wallet address: <Address address={connectedAddress} />
</div>
</CardContent>
Expand Down Expand Up @@ -192,27 +198,29 @@ const Home: NextPage = () => {
BATCH 10
</h1>
<div className="author">
<h2>Buidl Guidl</h2>
<h2 className="!text-white dark:text-white">Buidl Guidl</h2>
</div>
<div className="model"></div>
</div>
</div>
<div className="!h-max banner">
<div className="flex-grow w-screen z-[9999]">
{error ? (
<div className="p-4 text-red-700 bg-red-100 rounded-lg" role="alert">
<div className="p-4 !text-red-700 bg-red-100 rounded-lg" role="alert">
<p>Error fetching contract data: {error.message}</p>
</div>
) : (
<div className="relative">
<div className="flex justify-center gap-2 mb-4 text-lg">
<span className="font-bold">Checked in builders count:</span>
<span className="font-bold !text-white dark:text-white">Checked in builders count:</span>
{counterLoading ? (
<span className="animate-pulse">
<div className="w-12 h-6 bg-gray-200 rounded"></div>
</span>
) : (
<span>{checkedInCounter !== undefined ? Number(checkedInCounter) : "0"}</span>
<span className="!text-white dark:text-white">
{checkedInCounter !== undefined ? Number(checkedInCounter) : "0"}
</span>
)}
</div>

Expand Down
56 changes: 22 additions & 34 deletions packages/nextjs/components/StarsBg.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,30 +19,13 @@ interface StarBackgroundProps {
className?: string;
}

const createStar = (
width: number,
height: number,
allStarsTwinkle: boolean,
twinkleProbability: number,
minTwinkleSpeed: number,
maxTwinkleSpeed: number,
): StarProps => {
const shouldTwinkle = allStarsTwinkle || Math.random() < twinkleProbability;
return {
x: Math.random() * width,
y: Math.random() * height,
radius: Math.random() * 0.05 + 0.5,
opacity: Math.random() * 0.5 + 0.5,
twinkleSpeed: shouldTwinkle ? minTwinkleSpeed + Math.random() * (maxTwinkleSpeed - minTwinkleSpeed) : null,
};
};

export const StarsBackground: React.FC<StarBackgroundProps> = ({
starDensity = 0.00015,
allStarsTwinkle = true,
twinkleProbability = 0.7,
minTwinkleSpeed = 0.5,
maxTwinkleSpeed = 1,
className,
}) => {
const [stars, setStars] = useState<StarProps[]>([]);
const canvasRef: RefObject<HTMLCanvasElement> = useRef<HTMLCanvasElement>(null);
Expand All @@ -51,9 +34,16 @@ export const StarsBackground: React.FC<StarBackgroundProps> = ({
(width: number, height: number): StarProps[] => {
const area = width * height;
const numStars = Math.floor(area * starDensity);
return Array.from({ length: numStars }, () =>
createStar(width, height, allStarsTwinkle, twinkleProbability, minTwinkleSpeed, maxTwinkleSpeed),
);
return Array.from({ length: numStars }, () => {
const shouldTwinkle = allStarsTwinkle || Math.random() < twinkleProbability;
return {
x: Math.random() * width,
y: Math.random() * height,
radius: Math.random() * 0.05 + 0.5,
opacity: Math.random() * 0.5 + 0.5,
twinkleSpeed: shouldTwinkle ? minTwinkleSpeed + Math.random() * (maxTwinkleSpeed - minTwinkleSpeed) : null,
};
});
},
[starDensity, allStarsTwinkle, twinkleProbability, minTwinkleSpeed, maxTwinkleSpeed],
);
Expand Down Expand Up @@ -98,7 +88,16 @@ export const StarsBackground: React.FC<StarBackgroundProps> = ({

const render = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
stars.forEach(star => drawStar(ctx, star));
stars.forEach(star => {
ctx.beginPath();
ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
ctx.fillStyle = `rgba(255, 255, 255, ${star.opacity})`;
ctx.fill();

if (star.twinkleSpeed !== null) {
star.opacity = 0.5 + Math.abs(Math.sin((Date.now() * 0.001) / star.twinkleSpeed) * 0.5);
}
});

animationFrameId = requestAnimationFrame(render);
};
Expand All @@ -110,16 +109,5 @@ export const StarsBackground: React.FC<StarBackgroundProps> = ({
};
}, [stars]);

const drawStar = (ctx: CanvasRenderingContext2D, star: StarProps) => {
ctx.beginPath();
ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
ctx.fillStyle = `rgba(255, 255, 255, ${star.opacity})`;
ctx.fill();

if (star.twinkleSpeed !== null) {
star.opacity = 0.5 + Math.abs(Math.sin((Date.now() * 0.001) / star.twinkleSpeed) * 0.5);
}
};

return <canvas ref={canvasRef} className={"min-h-full w-full absolute inset-0 !bg-black"} />;
return <canvas ref={canvasRef} className={`h-full w-full absolute inset-0 !bg-black ${className}`} />;
};

0 comments on commit 255d122

Please sign in to comment.