Refina tema global e experiencia visual de auth

src/features/auth/components/signup-form.tsx

@@ -3,9 +3,7 @@ import { RiCheckLine, RiCloseLine, RiLoader4Line } from "@remixicon/react";
 import { useRouter } from "next/navigation";
 import { type FormEvent, useState } from "react";
 import { toast } from "sonner";
-import { Logo } from "@/shared/components/logo";
 import { Button } from "@/shared/components/ui/button";
-import { Card, CardContent } from "@/shared/components/ui/card";
 import {
 	Field,
 	FieldDescription,
@@ -16,9 +14,9 @@ import {
 import { Input } from "@/shared/components/ui/input";
 import { authClient, googleSignInAvailable } from "@/shared/lib/auth/client";
 import { cn } from "@/shared/utils/ui";
+import { AuthCardShell } from "./auth-card-shell";
 import { AuthErrorAlert } from "./auth-error-alert";
 import { AuthHeader } from "./auth-header";
-import AuthSidebar from "./auth-sidebar";
 import { GoogleAuthButton } from "./google-auth-button";
 
 interface PasswordValidation {
@@ -76,6 +74,9 @@ function PasswordRequirement({ met, label }: { met: boolean; label: string }) {
 
 type DivProps = React.ComponentProps<"div">;
 
+const authLinkClassName =
+	"font-medium text-foreground/88 underline decoration-border underline-offset-4 transition-colors hover:text-foreground hover:decoration-foreground/30 focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40";
+
 export function SignupForm({ className, ...props }: DivProps) {
 	const router = useRouter();
 	const isGoogleAvailable = googleSignInAvailable;
@@ -149,143 +150,141 @@ export function SignupForm({ className, ...props }: DivProps) {
 	}
 
 	return (
-		<div className={cn("flex flex-col gap-6", className)} {...props}>
-			<Logo className="mb-2" />
-			<Card className="overflow-hidden p-0">
-				<CardContent className="grid gap-0 p-0 md:grid-cols-[1.05fr_0.95fr]">
-					<form
-						className="flex flex-col gap-6 p-6 md:p-8"
-						onSubmit={handleSubmit}
-						noValidate
-					>
-						<FieldGroup className="gap-4">
-							<AuthHeader title="Criar sua conta" />
+		<div className={cn("flex flex-col gap-5", className)} {...props}>
+			<AuthCardShell>
+				<form
+					className="flex w-full items-center px-6 py-7 md:px-10 md:py-9"
+					onSubmit={handleSubmit}
+					noValidate
+				>
+					<FieldGroup className="mx-auto w-full max-w-md gap-5">
+						<AuthHeader
+							title="Criar sua conta"
+							description="Comece com uma base organizada para acompanhar despesas, cartões e objetivos mensais."
+						/>
 
-							<AuthErrorAlert error={error} />
+						<AuthErrorAlert error={error} />
 
-							<Field>
-								<FieldLabel htmlFor="name">Nome completo</FieldLabel>
-								<Input
-									id="name"
-									type="text"
-									placeholder="Digite seu nome"
-									autoComplete="name"
-									required
-									value={fullname}
-									onChange={(e) => setFullname(e.target.value)}
-									aria-invalid={!!error}
-								/>
-							</Field>
+						<Field>
+							<FieldLabel htmlFor="name">Nome completo</FieldLabel>
+							<Input
+								id="name"
+								type="text"
+								placeholder="Digite seu nome"
+								autoComplete="name"
+								required
+								value={fullname}
+								onChange={(e) => setFullname(e.target.value)}
+								aria-invalid={!!error}
+							/>
+						</Field>
 
-							<Field>
-								<FieldLabel htmlFor="email">E-mail</FieldLabel>
-								<Input
-									id="email"
-									type="email"
-									placeholder="Digite seu e-mail"
-									autoComplete="email"
-									required
-									value={email}
-									onChange={(e) => setEmail(e.target.value)}
-									aria-invalid={!!error}
-								/>
-							</Field>
+						<Field>
+							<FieldLabel htmlFor="email">E-mail</FieldLabel>
+							<Input
+								id="email"
+								type="email"
+								placeholder="Digite seu e-mail"
+								autoComplete="email"
+								required
+								value={email}
+								onChange={(e) => setEmail(e.target.value)}
+								aria-invalid={!!error}
+							/>
+						</Field>
 
-							<Field>
-								<FieldLabel htmlFor="password">Senha</FieldLabel>
-								<Input
-									id="password"
-									type="password"
-									required
-									autoComplete="new-password"
-									placeholder="Crie uma senha forte"
-									value={password}
-									onChange={(e) => setPassword(e.target.value)}
-									aria-invalid={
-										!!error ||
-										(password.length > 0 && !passwordValidation.isValid)
-									}
-									maxLength={23}
-								/>
-								{password.length > 0 && (
-									<div className="mt-2 grid grid-cols-2 gap-x-4 gap-y-1">
-										<PasswordRequirement
-											met={passwordValidation.hasMinLength}
-											label="Mínimo 7 caracteres"
-										/>
-										<PasswordRequirement
-											met={passwordValidation.hasMaxLength}
-											label="Máximo 23 caracteres"
-										/>
-										<PasswordRequirement
-											met={passwordValidation.hasLowercase}
-											label="Letra minúscula"
-										/>
-										<PasswordRequirement
-											met={passwordValidation.hasUppercase}
-											label="Letra maiúscula"
-										/>
-										<PasswordRequirement
-											met={passwordValidation.hasNumber}
-											label="Número"
-										/>
-										<PasswordRequirement
-											met={passwordValidation.hasSpecial}
-											label="Caractere especial"
-										/>
-									</div>
+						<Field>
+							<FieldLabel htmlFor="password">Senha</FieldLabel>
+							<Input
+								id="password"
+								type="password"
+								required
+								autoComplete="new-password"
+								placeholder="Crie uma senha forte"
+								value={password}
+								onChange={(e) => setPassword(e.target.value)}
+								aria-invalid={
+									!!error ||
+									(password.length > 0 && !passwordValidation.isValid)
+								}
+								maxLength={23}
+							/>
+							{password.length > 0 && (
+								<div className="mt-3 grid grid-cols-2 gap-x-4 gap-y-1.5 rounded-xl bg-muted/35 p-3">
+									<PasswordRequirement
+										met={passwordValidation.hasMinLength}
+										label="Mínimo 7 caracteres"
+									/>
+									<PasswordRequirement
+										met={passwordValidation.hasMaxLength}
+										label="Máximo 23 caracteres"
+									/>
+									<PasswordRequirement
+										met={passwordValidation.hasLowercase}
+										label="Letra minúscula"
+									/>
+									<PasswordRequirement
+										met={passwordValidation.hasUppercase}
+										label="Letra maiúscula"
+									/>
+									<PasswordRequirement
+										met={passwordValidation.hasNumber}
+										label="Número"
+									/>
+									<PasswordRequirement
+										met={passwordValidation.hasSpecial}
+										label="Caractere especial"
+									/>
+								</div>
+							)}
+						</Field>
+
+						<Field>
+							<Button
+								type="submit"
+								disabled={
+									loadingEmail ||
+									loadingGoogle ||
+									(password.length > 0 && !passwordValidation.isValid)
+								}
+								className="w-full"
+							>
+								{loadingEmail ? (
+									<RiLoader4Line className="h-4 w-4 animate-spin" />
+								) : (
+									"Criar conta"
 								)}
-							</Field>
+							</Button>
+						</Field>
 
-							<Field>
-								<Button
-									type="submit"
-									disabled={
-										loadingEmail ||
-										loadingGoogle ||
-										(password.length > 0 && !passwordValidation.isValid)
-									}
-									className="w-full"
-								>
-									{loadingEmail ? (
-										<RiLoader4Line className="h-4 w-4 animate-spin" />
-									) : (
-										"Criar conta"
-									)}
-								</Button>
-							</Field>
+						<FieldSeparator className="my-1.5 *:data-[slot=field-separator-content]:bg-card">
+							Ou continue com
+						</FieldSeparator>
 
-							<FieldSeparator className="my-2 *:data-[slot=field-separator-content]:bg-card">
-								Ou continue com
-							</FieldSeparator>
+						<Field>
+							<GoogleAuthButton
+								onClick={handleGoogle}
+								loading={loadingGoogle}
+								disabled={loadingEmail || loadingGoogle || !isGoogleAvailable}
+								text="Continuar com Google"
+							/>
+						</Field>
 
-							<Field>
-								<GoogleAuthButton
-									onClick={handleGoogle}
-									loading={loadingGoogle}
-									disabled={loadingEmail || loadingGoogle || !isGoogleAvailable}
-									text="Continuar com Google"
-								/>
-							</Field>
+						<FieldDescription className="pt-1 text-center">
+							Já tem uma conta?{" "}
+							<a href="/login" className={authLinkClassName}>
+								Entrar
+							</a>
+						</FieldDescription>
 
-							<FieldDescription className="text-center">
-								Já tem uma conta?{" "}
-								<a href="/login" className="underline underline-offset-4">
-									Entrar
-								</a>
-							</FieldDescription>
-						</FieldGroup>
-					</form>
-
-					<AuthSidebar />
-				</CardContent>
-			</Card>
-
-			<FieldDescription className="text-center">
-				<a href="/" className="underline underline-offset-4">
-					Voltar para o site
-				</a>
-			</FieldDescription>
+						<FieldDescription className="text-center text-[13px] text-muted-foreground">
+							<a href="/" className={authLinkClassName}>
+								Voltar para a página inicial
+							</a>
+						</FieldDescription>
+					</FieldGroup>
+				</form>
+			</AuthCardShell>
 		</div>
 	);
 }