feat: tweak some designs

listlessbird · Nov 15, 2024 · fd8f358 · fd8f358
1 parent 6471931
commit fd8f358
Show file tree

Hide file tree

Showing 9 changed files with 263 additions and 185 deletions.
diff --git a/web/src/app/(history)/history/layout.tsx b/web/src/app/(history)/history/layout.tsx
@@ -1,4 +1,5 @@
 import { QueryProvider } from "@/app/query-provider";
+import { BackgroundPatterns } from "@/components/bg-pattern";
 import { Header } from "@/components/nav/header";
 import { HeaderMobile } from "@/components/nav/header-mobile";
 import { SideNav } from "@/components/nav/sidenav";
@@ -15,7 +16,8 @@ export default async function Layout({
   return (
     <QueryProvider>
       <SessionProvider value={{ user: user }}>
-        <div className="flex">
+        <div className="flex bg-gradient-to-br from-background to-secondary relative">
+          <BackgroundPatterns />
           <SideNav />
           <main className="min-h-screen flex-1">
             <Header />

diff --git a/web/src/app/(history)/history/page.tsx b/web/src/app/(history)/history/page.tsx
@@ -24,9 +24,11 @@ export default async function Home() {
         Generations
       </h1>
       <div className="my-4 flex flex-wrap gap-2 md:gap-4 items-center justify-center">
-        <Suspense fallback={<Loading />}>
-          <HistoryWrap userGoogleId={user.googleId} />
-        </Suspense>
+        <div>
+          <Suspense fallback={<Loading />}>
+            <HistoryWrap userGoogleId={user.googleId} />
+          </Suspense>
+        </div>
       </div>
     </div>
   );

diff --git a/web/src/app/(main)/layout.tsx b/web/src/app/(main)/layout.tsx
@@ -1,4 +1,5 @@
 import { QueryProvider } from "@/app/query-provider";
+import { BackgroundPatterns } from "@/components/bg-pattern";
 import { Header } from "@/components/nav/header";
 import { HeaderMobile } from "@/components/nav/header-mobile";
 import { SideNav } from "@/components/nav/sidenav";
@@ -15,15 +16,18 @@ export default async function Layout({
   return (
     <QueryProvider>
       <SessionProvider value={{ user: user }}>
-        <div className="flex">
-          <SideNav />
-          <main className="min-h-screen flex-1">
-            <Header />
-            <HeaderMobile />
-            <div className="space-y-8 max-w-2xl mx-auto pt-5 px-3 lg:pl-16">
-              {children}
-            </div>
-          </main>
+        <div className="min-h-screen bg-gradient-to-br from-background to-secondary relative">
+          <BackgroundPatterns />
+          <div className="flex relative z-10">
+            <SideNav />
+            <main className="min-h-screen flex-1">
+              <Header />
+              <HeaderMobile />
+              <div className="space-y-8 max-w-full mx-auto pt-5 px-3 lg:pl-16">
+                {children}
+              </div>
+            </main>
+          </div>
         </div>
       </SessionProvider>
     </QueryProvider>

diff --git a/web/src/app/(main)/page.tsx b/web/src/app/(main)/page.tsx
@@ -1,51 +1,15 @@
 import { VideoConfigForm } from "@/app/(main)/video-config-form";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
+
 import { validateRequest } from "@/lib/auth";
-import { Sparkles, Video } from "lucide-react";
 
 export default async function Home() {
   const { user } = await validateRequest();
 
   return (
-    <div className="container mx-auto px-4 py-8 space-y-8 max-w-4xl">
-      <Card className="bg-gradient-to-r from-purple-500 to-pink-500 text-white">
-        <CardHeader>
-          <CardTitle className="flex items-center text-3xl font-extrabold tracking-tight lg:text-4xl">
-            <Sparkles className="mr-2 h-8 w-8" />
-            Sparkles
-          </CardTitle>
-          <CardDescription className="text-white/80">
-            Create stunning short videos with the power of AI
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <p className="text-lg">
-            Welcome, {user?.username}! Get ready to transform your ideas into
-            captivating short videos.
-          </p>
-        </CardContent>
-      </Card>
-
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center text-2xl font-bold">
-            <Video className="mr-2 h-6 w-6" />
-            Create Your Video
-          </CardTitle>
-          <CardDescription>
-            Configure your video settings and let AI do the magic
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <VideoConfigForm />
-        </CardContent>
-      </Card>
+    <div className="min-h-screen">
+      <div className="relative z-10 container mx-auto px-4 py-8 space-y-8 max-w-4xl">
+        <VideoConfigForm />
+      </div>
     </div>
   );
 }