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

UI: Re-theme app with coop-inspired colors

Browse Source
This commit is contained in:
Your Name
2026-04-18 02:07:03 +00:00
parent 425fb007f3
commit 4fba61f83b
2 changed files with 40 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/globals.css
+35 -32
View File
@@ -29,48 +29,48 @@
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--background: 45 100% 97%;
--foreground: 24 33% 14%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--card-foreground: 24 33% 14%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 221.2 83.2% 53.3%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--popover-foreground: 24 33% 14%;
--primary: 34 92% 52%;
--primary-foreground: 45 100% 97%;
--secondary: 36 45% 92%;
--secondary-foreground: 24 33% 14%;
--muted: 36 33% 94%;
--muted-foreground: 24 10% 42%;
--accent: 29 60% 90%;
--accent-foreground: 24 33% 14%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 221.2 83.2% 53.3%;
--border: 31 28% 84%;
--input: 31 28% 84%;
--ring: 34 92% 52%;
--radius: 0.5rem;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 217.2 91.2% 59.8%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--background: 24 33% 10%;
--foreground: 45 100% 96%;
--card: 24 29% 14%;
--card-foreground: 45 100% 96%;
--popover: 24 29% 14%;
--popover-foreground: 45 100% 96%;
--primary: 34 92% 52%;
--primary-foreground: 24 33% 10%;
--secondary: 24 20% 20%;
--secondary-foreground: 45 100% 96%;
--muted: 24 18% 18%;
--muted-foreground: 28 15% 66%;
--accent: 24 20% 20%;
--accent-foreground: 45 100% 96%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 224.3 76.3% 48%;
--border: 24 18% 24%;
--input: 24 18% 24%;
--ring: 34 92% 52%;
}
}
@@ -81,5 +81,8 @@
body {
background-color: hsl(var(--background));
color: hsl(var(--foreground));
background-image:
radial-gradient(circle at top, rgba(255, 188, 66, 0.10), transparent 34%),
radial-gradient(circle at bottom right, rgba(122, 69, 22, 0.08), transparent 28%);
}
}
frontend/src/app/page.tsx
+5 -5
View File
@@ -8,8 +8,8 @@ export default function LandingPage() {
return (
<div className="min-h-screen bg-background flex flex-col selection:bg-primary selection:text-primary-foreground">
{/* Grid Pattern Overlay */}
<div className="fixed inset-0 z-0 opacity-[0.03] pointer-events-none"
style={{ backgroundImage: 'radial-gradient(circle at 2px 2px, white 1px, transparent 0)', backgroundSize: '40px 40px' }} />
<div className="fixed inset-0 z-0 opacity-[0.08] pointer-events-none"
style={{ backgroundImage: 'radial-gradient(circle at 2px 2px, rgba(217, 119, 6, 0.6) 1px, transparent 0)', backgroundSize: '42px 42px' }} />
{/* Header */}
<header className="sticky top-0 z-50 w-full border-b bg-background/80 backdrop-blur-md">
@@ -72,11 +72,11 @@ export default function LandingPage() {
</div>
{/* Abstract background element */}
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[400px] bg-primary/5 blur-[120px] rounded-full -z-10 pointer-events-none" />
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[400px] bg-primary/15 blur-[120px] rounded-full -z-10 pointer-events-none" />
</section>
{/* Features Section */}
<section id="features" className="py-24 border-y bg-muted/30">
<section id="features" className="py-24 border-y bg-amber-50/80 dark:bg-stone-950/40">
<div className="container mx-auto px-4">
<div className="grid grid-cols-1 md:grid-cols-3 gap-12">
<div className="space-y-4 p-6 rounded-2xl bg-background border transition-all hover:shadow-xl hover:-translate-y-1">
@@ -162,7 +162,7 @@ export default function LandingPage() {
</main>
{/* Footer */}
<footer className="border-t py-12 bg-muted/20">
<footer className="border-t py-12 bg-amber-100/60 dark:bg-stone-950/70">
<div className="container mx-auto px-4">
<div className="flex flex-col md:flex-row justify-between items-center gap-8">
<div className="flex items-center gap-2 grayscale opacity-50">