Cossale/PromptVerse
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

the design is ugly. i asked for dark theme with frosted glass and tranpa

Browse source
This commit is contained in:
Aun Ali 2025-08-09 15:56:51 +00:00
parent 61bb9913ae
commit d89e9f40da
7 changed files with 49 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
src/app/globals.css
View file

@ -9,51 +9,52 @@ body {
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 0 0% 3.9%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 0 0% 3.9%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 3.9%;
--primary: 300 50% 50%;
--primary-foreground: 0 0% 98%;
--secondary: 275 100% 25.1%;
--secondary-foreground: 0 0% 98%;
--muted: 0 0% 96.1%;
--muted-foreground: 0 0% 45.1%;
--accent: 300 50% 60%;
--accent-foreground: 0 0% 9%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 262.1 83.3% 57.8%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 210 40% 9.8%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 210 40% 9.8%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 89.8%;
--input: 0 0% 89.8%;
--ring: 300 50% 50%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 262.1 83.3% 57.8%;
--radius: 0.5rem;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--radius: 0.5rem;
}
.dark {
--background: 0 0% 18.8%;
--foreground: 0 0% 98%;
--card: 0 0% 22%;
--card-foreground: 0 0% 98%;
--popover: 0 0% 18.8%;
--popover-foreground: 0 0% 98%;
--primary: 300 50% 50%;
--primary-foreground: 0 0% 98%;
--secondary: 275 100% 35%;
--secondary-foreground: 0 0% 98%;
--muted: 0 0% 25%;
--muted-foreground: 0 0% 63.9%;
--accent: 300 50% 60%;
--accent-foreground: 0 0% 98%;
--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: 263.4 95.2% 66.3%;
--primary-foreground: 210 40% 98%;
--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%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 30%;
--input: 0 0% 25%;
--ring: 300 50% 60%;
--destructive-foreground: 0 85.7% 97.3%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 263.4 95.2% 66.3%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;

7
src/app/layout.tsx
View file

@ -19,8 +19,11 @@ export default function RootLayout({
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet"></link>
</head>
<body className="font-body antialiased bg-background text-foreground min-h-screen">
{children}
<body className="font-body antialiased bg-gradient-to-br from-[#0a001a] to-[#1e0033] text-foreground min-h-screen">
<div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_400px_at_50%_300px,#3a007233,transparent)]"></div>
<div className="relative z-10">
{children}
</div>
<Toaster />
</body>
</html>

5
src/app/login/page.tsx
View file

@ -39,8 +39,8 @@ export default function LoginPage() {
}, [state, toast]);
return (
<main className="flex items-center justify-center min-h-screen bg-background">
<Card className="w-full max-w-sm">
<main className="flex items-center justify-center min-h-screen">
<Card className="w-full max-w-sm bg-black/30 backdrop-blur-lg border border-white/10">
<CardHeader className="text-center">
<div className="flex justify-center items-center mb-4">
<Logo className="h-8 w-8 mr-2 text-primary" />
@ -58,6 +58,7 @@ export default function LoginPage() {
name="password"
type="password"
required
className="bg-white/5 border-white/10"
/>
</div>
<SubmitButton />

2
src/app/page.tsx
View file

@ -17,7 +17,7 @@ export default async function Home({
const query = searchParams?.q || '';
return (
<div className="flex flex-col min-h-screen bg-background">
<div className="flex flex-col min-h-screen">
<Header />
<main className="container mx-auto py-6 px-4 sm:px-6 lg:px-8">
<Suspense fallback={<PromptListSkeleton />}>

4
src/components/header.tsx
View file

@ -34,7 +34,7 @@ export function Header() {
}
return (
<header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
<header className="sticky top-0 z-50 w-full border-b border-white/10 bg-black/30 backdrop-blur-lg">
<div className="container flex h-16 max-w-7xl items-center justify-between mx-auto px-4 sm:px-6 lg:px-8">
<div className="mr-8 flex items-center">
<Logo className="h-6 w-6 mr-2 text-primary" />
@ -45,7 +45,7 @@ export function Header() {
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input
placeholder="Search prompts..."
className="pl-9"
className="pl-9 bg-white/5 border-white/10"
onChange={(e) => handleSearch(e.target.value)}
defaultValue={searchParams.get('q')?.toString()}
/>

2
src/components/prompt-card.tsx
View file

@ -33,7 +33,7 @@ export function PromptCard({ prompt }: PromptCardProps) {
const timeAgo = formatDistanceToNow(new Date(prompt.createdAt), { addSuffix: true });
return (
<Card className="flex flex-col bg-secondary/30 backdrop-blur-lg border border-white/10 shadow-lg hover:border-white/20 transition-all duration-300 h-full">
<Card className="flex flex-col bg-white/5 backdrop-blur-lg border border-white/10 shadow-lg hover:border-white/20 transition-all duration-300 h-full">
<CardHeader>
<CardTitle className="text-base font-semibold">{prompt.title}</CardTitle>
<CardDescription className="text-xs text-muted-foreground">{timeAgo}</CardDescription>

4
src/components/ui/dialog.tsx
View file

@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
<DialogPrimitive.Overlay
ref={ref}
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
"fixed inset-0 z-50 bg-black/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
)}
{...props}
@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-white/20 bg-black/30 backdrop-blur-lg p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
className
)}
{...props}