Clean up tw styles for video

app/(public)/layout.tsx

@@ -14,31 +14,27 @@ export default function Layout({
   children: React.ReactNode;
 }>) {
   return (
-    <div className="flex min-h-screen flex-col">
-      <div className="border-b border-gray-100 dark:border-gray-700">
-        <div className="container mx-auto flex max-w-7xl items-center justify-end px-4 py-4 md:justify-between md:px-6">
+    <div>
+      <div className="border-b border-gray-100">
+        <div className="container mx-auto flex max-w-7xl items-center justify-end p-4 md:justify-between md:px-6">
           <nav className="hidden items-center space-x-4 text-sm md:flex">
             {links.map((link) => (
-              <Link
-                className=" text-gray-900 dark:text-white"
-                href={link.href}
-                key={link.title}
-              >
+              <Link className="text-gray-900" href={link.href} key={link.title}>
                 {link.title}
               </Link>
             ))}
           </nav>
           <div className="hidden items-center space-x-4 md:flex">
             <Link
-              className="inline-flex h-8 items-center justify-center rounded-md border border-gray-200 bg-white px-4 text-sm font-medium transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 disabled:pointer-events-none disabled:opacity-50 dark:text-black"
+              className="rounded-md border px-4 py-1.5 text-sm font-medium transition-colors hover:border-black hover:bg-black hover:text-white"
               href="/login"
             >
               Login
             </Link>
           </div>
           <div className="flex items-center space-x-4 md:hidden">
             <Link
-              className="inline-flex h-8 items-center rounded-md border border-gray-200 bg-white px-3 text-sm font-medium dark:text-black"
+              className="inline-flex h-8 items-center rounded-md border border-gray-200 bg-white px-3 text-sm font-medium"
               href="/login"
             >
               Login
@@ -51,7 +47,7 @@ export default function Layout({
         </div>
       </div>
 
-      <main className="flex flex-1 items-center justify-center">
+      <main className="container mx-auto mt-36 flex max-w-7xl justify-center">
         {children}
       </main>
     </div>

app/(public)/login/form.tsx

@@ -12,8 +12,8 @@ export function LoginForm() {
 
   return (
     <form action={action}>
-      <div className="space-y-4">
-        <div className="space-y-2">
+      <div className="flex flex-col gap-2">
+        <div>
           <Label htmlFor="email">Email</Label>
           <Input
             id="email"
@@ -22,31 +22,26 @@ export function LoginForm() {
             type="email"
           />
           {state?.errors?.email && (
-            <p className="text-red-500">{state.errors.email}</p>
+            <p className="text-sm text-red-500">{state.errors.email}</p>
           )}
         </div>
-        <div className="space-y-2">
-          <div className="flex items-center">
+        <div className="mt-4">
+          <div className="flex items-center justify-between">
             <Label htmlFor="password">Password</Label>
-            <Link className="ml-auto inline-block text-sm underline" href="#">
+            <Link className="text-sm underline" href="#">
               Forgot your password?
             </Link>
           </div>
           <Input id="password" type="password" name="password" />
           {state?.errors?.password && (
-            <p className="text-red-500">{state.errors.password}</p>
+            <p className="text-sm text-red-500">{state.errors.password}</p>
           )}
         </div>
-        {state?.message && <p className="text-red-500">{state.message}</p>}
+        {state?.message && (
+          <p className="text-sm text-red-500">{state.message}</p>
+        )}
         <LoginButton />
       </div>
-
-      <div className="mt-4 text-center text-sm">
-        Don&apos;t have an account?{' '}
-        <Link className="underline" href="/signup">
-          Sign up
-        </Link>
-      </div>
     </form>
   );
 }
@@ -55,7 +50,7 @@ export function LoginButton() {
   const { pending } = useFormStatus();
 
   return (
-    <Button aria-disabled={pending} type="submit">
+    <Button aria-disabled={pending} type="submit" className="mt-4 w-full">
       {pending ? 'Submitting...' : 'Sign up'}
     </Button>
   );

app/(public)/login/page.tsx

@@ -1,17 +1,24 @@
 import { LoginForm } from './form';
+import Link from 'next/link';
 
 export default function Page() {
   return (
-    <div className="flex w-1/4 items-center px-4 sm:px-6 lg:px-8">
-      <div className="mx-auto w-full space-y-8">
-        <div className="space-y-2 text-center">
-          <h1 className="text-3xl font-bold">Login</h1>
-          <p className="text-sm text-gray-500">
-            Enter your email below to login to your account
-          </p>
-        </div>
+    <div className="flex flex-col p-4 lg:w-1/3">
+      <div className="text-center">
+        <h1 className="text-3xl font-bold">Login</h1>
+        <p className="text-gray-500">
+          Enter your email below to login to your account
+        </p>
+      </div>
+      <div className="mt-6">
         <LoginForm />
       </div>
+      <div className="mt-4 text-center text-sm">
+        Don&apos;t have an account?{' '}
+        <Link className="underline" href="/signup">
+          Sign up
+        </Link>
+      </div>
     </div>
   );
 }

app/(public)/signup/form.tsx

@@ -11,37 +11,37 @@ export function SignupForm() {
 
   return (
     <form action={action}>
-      <div className="space-y-2">
-        <Label htmlFor="name">Name</Label>
-        <Input id="name" name="name" placeholder="John Doe" />
-      </div>
-      {state?.errors?.name && (
-        <p className="text-red-500">{state.errors.name}</p>
-      )}
-      <div className="space-y-2">
-        <Label htmlFor="email">Email</Label>
-        <Input id="email" name="email" placeholder="[email protected]" />
-      </div>
-      {state?.errors?.email && (
-        <p className="text-red-500">{state.errors.email}</p>
-      )}
-      <div className="space-y-2">
-        <Label htmlFor="password">Password</Label>
-        <Input id="password" name="password" type="password" />
-      </div>
-      {state?.errors?.password && (
+      <div className="flex flex-col gap-2">
+        <div>
+          <Label htmlFor="name">Name</Label>
+          <Input id="name" name="name" placeholder="John Doe" />
+        </div>
+        {state?.errors?.name && (
+          <p className="text-sm text-red-500">{state.errors.name}</p>
+        )}
+        <div>
+          <Label htmlFor="email">Email</Label>
+          <Input id="email" name="email" placeholder="[email protected]" />
+        </div>
+        {state?.errors?.email && (
+          <p className="text-sm text-red-500">{state.errors.email}</p>
+        )}
         <div>
-          <p>Password must:</p>
-          <ul>
-            {state.errors.password.map((error) => (
-              <li key={error} className="text-red-500">
-                - {error}
-              </li>
-            ))}
-          </ul>
+          <Label htmlFor="password">Password</Label>
+          <Input id="password" name="password" type="password" />
         </div>
-      )}
-      <SignupButton />
+        {state?.errors?.password && (
+          <div className="text-sm text-red-500">
+            <p>Password must:</p>
+            <ul>
+              {state.errors.password.map((error) => (
+                <li key={error}>- {error}</li>
+              ))}
+            </ul>
+          </div>
+        )}
+        <SignupButton />
+      </div>
     </form>
   );
 }
@@ -50,7 +50,7 @@ export function SignupButton() {
   const { pending } = useFormStatus();
 
   return (
-    <Button aria-disabled={pending} type="submit">
+    <Button aria-disabled={pending} type="submit" className="mt-2 w-full">
       {pending ? 'Submitting...' : 'Sign up'}
     </Button>
   );

app/(public)/signup/page.tsx

@@ -2,19 +2,19 @@ import Link from 'next/link';
 import { SignupForm } from '@/app/(public)/signup/form';
 export default function Page() {
   return (
-    <div className="flex w-1/4 items-center px-4 sm:px-6 lg:px-8">
-      <div className="mx-auto w-full space-y-8">
-        <div className="space-y-2 text-center">
-          <h1 className="text-3xl font-bold">Create an account</h1>
-          <p className="text-gray-500">Enter your information to get started</p>
-        </div>
+    <div className="flex flex-col p-4 lg:w-1/3">
+      <div className="text-center">
+        <h1 className="text-3xl font-bold">Create an account</h1>
+        <p className="text-gray-500">Enter your information to get started</p>
+      </div>
+      <div className="mt-6">
         <SignupForm />
-        <div className="mt-4 text-center text-sm">
-          Already have an account?{' '}
-          <Link className="underline" href="/login">
-            Login
-          </Link>
-        </div>
+      </div>
+      <div className="mt-6 text-center text-sm">
+        Already have an account?{' '}
+        <Link className="underline" href="/login">
+          Login
+        </Link>
       </div>
     </div>
   );

app/dashboard/layout.tsx

@@ -26,9 +26,9 @@ export default async function Layout({
 
   return (
     <div className="flex min-h-screen w-full">
-      <div className="hidden w-80 border-r lg:block dark:border-gray-700">
+      <div className="hidden w-80 border-r lg:block">
         <div className="flex h-full flex-col gap-2">
-          <div className="flex h-14 items-center border-b px-4 dark:border-gray-700">
+          <div className="flex h-14 items-center border-b px-4">
             <Link className="flex items-center gap-2 font-semibold" href="#">
               <PackageIcon className="h-6 w-6" />
               <span className="">Acme Inc</span>
@@ -40,9 +40,9 @@ export default async function Layout({
                 <Link
                   className={`${
                     activeLink === link.href
-                      ? 'bg-gray-100 text-gray-900 hover:text-gray-900 hover:dark:text-gray-300'
+                      ? 'bg-gray-100 text-gray-900 hover:text-gray-900'
                       : ''
-                  } flex items-center gap-3 rounded-lg px-3 py-2 text-gray-500 transition-all hover:text-gray-900 hover:dark:text-gray-300`}
+                  } flex items-center gap-3 rounded-lg px-3 py-2 text-gray-500 transition-all hover:text-gray-900`}
                   href={link.href}
                   key={link.title}
                 >
@@ -56,13 +56,13 @@ export default async function Layout({
               ))}
             </nav>
           </div>
-          <div className="border-t p-4 dark:border-gray-700">
+          <div className="border-t p-4">
             <LogoutButton />
           </div>
         </div>
       </div>
       <div className="flex w-full flex-col">
-        <header className="flex h-14 items-center border-b px-4 md:gap-4 dark:border-gray-700">
+        <header className="flex h-14 items-center border-b px-4 md:gap-4">
           <Link
             className="flex items-center rounded-md bg-gray-100 px-2 py-2 lg:hidden"
             href="#"

app/dashboard/logout-button.tsx

@@ -5,7 +5,7 @@ import { LogOutIcon } from '@/components/ui/icons';
 export default function LogoutButton() {
   return (
     <button
-      className="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-gray-500 transition-all hover:text-gray-900 hover:dark:text-gray-300"
+      className="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-gray-500 transition-all hover:text-gray-900"
       onClick={async () => {
         await logout();
       }}

app/layout.tsx

@@ -16,9 +16,7 @@ export default async function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={`${inter.className} dark:bg-black dark:text-white`}>
-        {children}
-      </body>
+      <body className={inter.className}>{children}</body>
     </html>
   );
 }