refactor: some tailwind classes

tonghohin · tonghohin · commit 85950295cbe5 · 2025-07-27T22:35:36.000-04:00
diff --git a/app/host/page.tsx b/app/host/page.tsx
@@ -127,8 +127,8 @@ export default function HostPage() {
                     </CardHeader>
                     <CardContent className="flex flex-col gap-4">
                         <ShareOptions roomId={roomId} />
-                        <div className="flex items-center justify-between rounded-lg bg-gray-50 p-4 dark:bg-gray-800">
-                            <div className="flex items-center gap-2 text-gray-500">
+                        <div className="bg-muted/50 flex items-center justify-between rounded-lg p-4">
+                            <div className="text-muted-foreground flex items-center gap-2">
                                 <Users className="size-4" />
                                 <span className="text-sm">Current Viewers</span>
                             </div>
diff --git a/app/join/page.tsx b/app/join/page.tsx
@@ -112,7 +112,7 @@ export default function JoinPage() {
                             </Button>
                         </div>
                     ) : (
-                        <div className="group relative aspect-video overflow-hidden rounded-lg bg-gray-900">
+                        <div className="relative overflow-hidden rounded-lg">
                             <video ref={videoRef} className="h-full w-full object-contain" autoPlay playsInline loop controls muted />
                         </div>
                     )}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -20,9 +20,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     return (
         <html lang="en">
             <body className={inter.className}>
-                <main className="flex min-h-screen flex-col justify-between bg-linear-to-b from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
+                <main className="from-background to-muted flex min-h-screen flex-col justify-between bg-linear-to-b">
                     {children}
-                    <footer className="px-4 py-8 text-center text-sm text-gray-500">
+                    <footer className="text-muted-foreground px-4 py-8 text-center text-sm">
                         Built by{" "}
                         <Link href="https://tonghohin.vercel.app" className="underline" target="_blank">
                             Hin
diff --git a/app/page.tsx b/app/page.tsx
@@ -9,12 +9,11 @@ export default function Home() {
     return (
         <div className="mx-auto flex max-w-4xl flex-col gap-8 px-4 py-8">
             <div className="flex flex-col gap-4 text-center">
-                <h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl dark:text-gray-100">Share Your Screen Instantly</h1>
-                <p className="text-xl text-gray-600 dark:text-gray-300">Create a room, share the code, and start presenting to your audience in seconds.</p>
+                <h1 className="text-4xl font-bold tracking-tight sm:text-6xl">Share Your Screen Instantly</h1>
+                <p className="text-primary text-xl">Create a room, share the code, and start presenting to your audience in seconds.</p>
             </div>
-
             <div className="grid gap-4 md:grid-cols-2">
-                <Card className="transition-shadow hover:shadow-lg">
+                <Card>
                     <CardHeader>
                         <CardTitle className="flex items-center gap-2">
                             <Monitor />
@@ -29,8 +28,7 @@ export default function Home() {
                         <CustomRoomIdForm />
                     </CardContent>
                 </Card>
-
-                <Card className="transition-shadow hover:shadow-lg">
+                <Card>
                     <CardHeader>
                         <CardTitle className="flex items-center gap-2">
                             <Users />
@@ -47,7 +45,6 @@ export default function Home() {
                     </CardContent>
                 </Card>
             </div>
-
             <Alert>
                 <AlertCircle />
                 <AlertTitle>Note</AlertTitle>
