Merge branch 'Tsurgcom-skeletons-2' into staging

Author: bauchdj

apps/web/src/app/(public)/(auth)/signin/page.tsx

@@ -1,27 +1,15 @@
+import { SigninFormSkeleton } from "@/components/auth/skeletons/signin-form";
 import { SignInForm } from "@/components/auth/signin-form";
-import { Loader2 } from "lucide-react";
 import { Suspense } from "react";
 
-function SignInContent() {
+export default function SigninPage() {
 	return (
 		<div className="flex min-h-svh w-full justify-center sm:items-center">
 			<div className="size-full max-w-md px-2 py-10 sm:max-w-sm">
-				<SignInForm />
+				<Suspense fallback={<SigninFormSkeleton />}>
+					<SignInForm />
+				</Suspense>
 			</div>
 		</div>
 	);
 }
-
-export default function SignInPage() {
-	return (
-		<Suspense
-			fallback={
-				<div className="flex min-h-svh w-full items-center justify-center">
-					<Loader2 className="h-8 w-8 animate-spin" />
-				</div>
-			}
-		>
-			<SignInContent />
-		</Suspense>
-	);
-}

apps/web/src/app/(public)/(auth)/signup/page.tsx

@@ -1,11 +1,12 @@
+import { SignupFormSkeleton } from "@/components/auth/skeletons/signup-form";
 import { SignupForm } from "@/components/auth/signup-form";
 import { Suspense } from "react";
 
 export default function SignupPage() {
 	return (
 		<div className="flex min-h-svh w-full justify-center sm:items-center">
 			<div className="size-full max-w-md px-2 py-10 sm:max-w-sm">
-				<Suspense fallback={<div>Loading...</div>}>
+				<Suspense fallback={<SignupFormSkeleton />}>
 					<SignupForm />
 				</Suspense>
 			</div>

apps/web/src/components/auth/shared/auth-card.tsx

@@ -35,7 +35,7 @@ export function AuthCard({ title, description, navigationType, children, classNa
 					</div>
 				</CardHeader>
 
-				<CardContent className="px-6">{children}</CardContent>
+				<CardContent className="px-5">{children}</CardContent>
 
 				<CardFooter className="px-6 py-4">
 					<p className="w-full text-center text-sm text-neutral-600">

apps/web/src/components/auth/shared/social-auth-button.tsx

@@ -32,7 +32,7 @@ export function SocialAuthButton({
 		<Button
 			variant="outline"
 			type="button"
-			className="w-full cursor-pointer justify-between shadow-lg shadow-blue-600/10 transition-all duration-300 hover:shadow-blue-600/20"
+			className="w-full cursor-pointer justify-between truncate shadow-md shadow-blue-600/20 transition-all duration-300 hover:shadow-sm hover:shadow-blue-600/20 dark:shadow-lg"
 			{...props}
 		>
 			<IconComponent />

apps/web/src/components/auth/signin-form.tsx

@@ -62,27 +62,27 @@ export function SignInForm({ className, ...props }: ComponentProps<"div">) {
 					disabled={isLoading}
 				/>
 
-				<div className="text-muted-foreground text-center text-sm">OR</div>
+				<div className="text-muted-foreground text-center font-mono text-sm font-semibold tracking-wider">OR</div>
 
 				<form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4">
-					<div className="space-y-2">
-						<Label htmlFor="email" className="text-muted-foreground text-sm font-semibold">
+					<div className="space-y-1">
+						<Label htmlFor="email" className="dark:text-muted-foreground text-sm font-semibold">
 							Email
 						</Label>
 						<Input
 							id="email"
 							type="email"
 							placeholder="[email protected]"
-							className="shadow-md"
+							className=""
 							{...register("email")}
 							aria-invalid={!!errors.email}
 							autoComplete="email"
 						/>
 						<FieldError error={errors.email?.message} />
 					</div>
 
-					<div className="space-y-2">
-						<Label htmlFor="password" className="text-muted-foreground text-sm font-semibold">
+					<div className="space-y-1">
+						<Label htmlFor="password" className="dark:text-muted-foreground text-sm font-semibold">
 							Password
 						</Label>
 						<PasswordInput
@@ -96,14 +96,18 @@ export function SignInForm({ className, ...props }: ComponentProps<"div">) {
 						<FieldError error={errors.password?.message} />
 					</div>
 
-					<div className="flex items-center justify-between">
-						<div className="flex items-center space-x-2">
+					<div className="mt-1 flex items-center justify-between">
+						<div className="flex flex-1 items-center space-x-2">
 							<Checkbox
 								id="remember"
 								{...register("remember")}
 								onCheckedChange={checked => setValue("remember", !!checked)}
+								defaultChecked={true}
 							/>
-							<Label htmlFor="remember" className="text-muted-foreground cursor-pointer text-sm">
+							<Label
+								htmlFor="remember"
+								className="text-muted-foreground line-clamp-1 cursor-pointer overflow-hidden text-sm"
+							>
 								Remember me
 							</Label>
 						</div>