style registration form

app/auth/components/auth-form.tsx

@@ -71,14 +71,14 @@ export function AuthForm<S extends z.ZodType<any, any>>({
 						className="form"
 						{...props}
 					>
-						{children}
-
 						{formError ? (
-							<div role="alert" className="mt-8 sm:mx-auto sm:w-full sm:max-w-sm">
+							<div role="alert" className="mb-8 sm:mx-auto sm:w-full sm:max-w-sm">
 								<Alert title="Oops, there was an issue" message={formError} variant="error" />
 							</div>
 						) : null}
 
+						{children}
+
 						<button
 							type="submit"
 							disabled={ctx.formState.isSubmitting}

app/auth/components/labeled-text-field.tsx

@@ -54,7 +54,7 @@ export const LabeledTextField = forwardRef<HTMLInputElement, LabeledTextFieldPro
 				</div>
 
 				{error ? (
-					<div role="alert" style={{ color: "red" }}>
+					<div role="alert" className="text-red-600">
 						{error}
 					</div>
 				) : null}

app/auth/components/signup-form.tsx

@@ -1,44 +0,0 @@
-import { useMutation } from "blitz";
-
-import { LabeledTextField } from "../../core/components/labeled-text-field";
-import { Form, FORM_ERROR } from "../../core/components/form";
-import signup from "../../auth/mutations/signup";
-import { Signup } from "../validations";
-
-type SignupFormProps = {
-	onSuccess?: () => void;
-};
-
-export const SignupForm = (props: SignupFormProps) => {
-	const [signupMutation] = useMutation(signup);
-
-	return (
-		<div>
-			<h1>Create an Account</h1>
-
-			<Form
-				submitText="Create Account"
-				schema={Signup}
-				initialValues={{ email: "", password: "" }}
-				onSubmit={async (values) => {
-					try {
-						await signupMutation(values);
-						props.onSuccess?.();
-					} catch (error: any) {
-						if (error.code === "P2002" && error.meta?.target?.includes("email")) {
-							// This error comes from Prisma
-							return { email: "This email is already being used" };
-						} else {
-							return { [FORM_ERROR]: error.toString() };
-						}
-					}
-				}}
-			>
-				<LabeledTextField name="email" label="Email" placeholder="Email" />
-				<LabeledTextField name="password" label="Password" placeholder="Password" type="password" />
-			</Form>
-		</div>
-	);
-};
-
-export default SignupForm;