LobotomyLabs/coop
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(theme): barnyard redesign with rustic crypto aesthetic

Browse Source 
- New color palette: barn red primary, cream backgrounds, hay gold
- Added Abril Fatface display font for headlines
- Wood grain texture backgrounds via CSS gradients
- Barnyard personality in copy: 'Join the Flock', 'Enter the Coop'
- Replaced hardcoded slate colors with theme variables
- Updated landing, login, dashboard, onboarding, leaderboard
This commit is contained in:
Dustin Newkirk
2026-04-21 14:14:48 -04:00
parent 185018a42e
commit 5db61212dc
8 changed files with 919 additions and 701 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/login/page.tsx
+16 -14
View File
@@ -1,9 +1,9 @@
"use client";
import { useEffect, useState } from "react";
import { Egg, Loader2, Tv } from "lucide-react";
import { useRouter } from "next/navigation";
import { authApi } from "@/lib/api";
import { useStore } from "@/lib/store";
import { useEffect, useState } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import {
Card,
@@ -12,8 +12,8 @@ import {
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Loader2, Tv } from "lucide-react";
import { toast } from "sonner";
import { authApi } from "@/lib/api";
import { useStore } from "@/lib/store";
export default function LoginPage() {
const router = useRouter();
@@ -46,13 +46,13 @@ export default function LoginPage() {
if (!isMounted) {
return (
<div className="min-h-screen flex items-center justify-center bg-slate-950 p-4">
<div className="min-h-screen flex items-center justify-center bg-background p-4">
<Card className="w-full max-w-md">
<CardHeader className="text-center">
<div className="mx-auto w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-4">
<Tv className="w-8 h-8 text-primary" />
<Egg className="w-8 h-8 text-primary" />
</div>
<CardTitle className="text-2xl">CoopCoins</CardTitle>
<CardTitle className="text-2xl font-display">The Coop</CardTitle>
<CardDescription>Loading...</CardDescription>
</CardHeader>
</Card>
@@ -61,15 +61,17 @@ export default function LoginPage() {
}
return (
<div className="min-h-screen flex items-center justify-center bg-slate-950 p-4">
<Card className="w-full max-w-md">
<div className="min-h-screen flex items-center justify-center bg-background p-4">
<Card className="w-full max-w-md border-2">
<CardHeader className="text-center">
<div className="mx-auto w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-4">
<Tv className="w-8 h-8 text-primary" />
<Egg className="w-8 h-8 text-primary" />
</div>
<CardTitle className="text-2xl">CoopCoins</CardTitle>
<CardTitle className="text-2xl font-display">
Enter the Coop
</CardTitle>
<CardDescription>
Earn CoopCoins ($COOP) for watching content on Plex
Sign in with Plex to start earning $COOP tokens
</CardDescription>
</CardHeader>
<CardContent>
@@ -91,7 +93,7 @@ export default function LoginPage() {
)}
</Button>
<p className="mt-4 text-center text-sm text-muted-foreground">
Sign in with your Plex account to start earning rewards
Join the flock and get rewarded for your watch time
</p>
</CardContent>
</Card>