[DRAFT] "User" styling

core/app/(user)/UserStyles.module.css

@@ -0,0 +1,4 @@
+.logo {
+	width: 25px;
+	height: 25px;
+}

core/app/forgot/ForgotForm.tsx → core/app/(user)/forgot/ForgotForm.tsx

@@ -26,15 +26,19 @@ export default function ForgotForm() {
 	};
 
 	return (
-		<>
+		<div className="border p-4">
 			{!success && (
 				<>
 					<p className="my-4">
 						Enter your email below to receive a secure link for reseting yor password.
 					</p>
-					<div className="my-4">
-						<form onSubmit={resetPassword}>
+					<div className="text-center">
+						<form
+							onSubmit={resetPassword}
+							className="flex justify-between items-center"
+						>
 							<input
+								className="w-1/2 mr-4"
 								value={email}
 								onChange={(evt) => setEmail(evt.target.value)}
 								placeholder="example@mail.com"
@@ -54,6 +58,6 @@ export default function ForgotForm() {
 					Password reset email sent! Please check your inbox.
 				</div>
 			)}
-		</>
+		</div>
 	);
 }

core/app/(user)/layout.tsx

@@ -0,0 +1,10 @@
+export default async function UserLayout({ children }: { children: React.ReactNode }) {
+	return (
+		<div className="min-h-screen">
+			<div className="container mx-auto py-5">
+				<img src="/logos/icon.svg" className="w-6" />
+			</div>
+			<div className="container mx-auto">{children}</div>
+		</div>
+	);
+}

core/app/login/LoginForm.tsx → core/app/(user)/login/LoginForm.tsx

@@ -27,26 +27,43 @@ export default function LoginForm() {
 	};
 
 	return (
-		<>
-			<h1>Login</h1>
+		<div className="border p-4">
+			<h1 className="text-2xl text-center">Login</h1>
 			<div className="my-10">
 				<form onSubmit={handleSubmit}>
-					<label htmlFor="email">Email</label>
-					<input
-						name="email"
-						value={email}
-						onChange={(evt) => setEmail(evt.target.value)}
-					/>
-					<label htmlFor="password">Password</label>
-					<input
-						name="password"
-						value={password}
-						type="password"
-						onChange={(evt) => setPassword(evt.target.value)}
-					/>
+					<div>
+						<label htmlFor="email">Email</label>
+					</div>
+					<div>
+						<input
+							id="email"
+							className="w-full"
+							name="email"
+							value={email}
+							onChange={(evt) => setEmail(evt.target.value)}
+						/>
+					</div>
+					<div className="mt-2">
+						<label htmlFor="password">Password</label>
+					</div>
+					<div>
+						<input
+							id="password"
+							className="w-full"
+							name="password"
+							value={password}
+							type="password"
+							onChange={(evt) => setPassword(evt.target.value)}
+						/>
+					</div>
 
-					<div className="my-6 flex space-x-8 items-center">
-						<Button variant="outline" type="submit" disabled={!email || !password}>
+					<div className="my-6 text-center">
+						<Button
+							className="mr-4"
+							variant="outline"
+							type="submit"
+							disabled={!email || !password}
+						>
 							Login
 						</Button>
 						<Link href="/forgot" className="text-sm text-gray-600 hover:underline">
@@ -58,6 +75,6 @@ export default function LoginForm() {
 					)}
 				</form>
 			</div>
-		</>
+		</div>
 	);
 }

core/app/signup/SignupForm.tsx → core/app/(user)/signup/SignupForm.tsx

@@ -35,39 +35,58 @@ export default function SignupForm() {
 	};
 
 	return (
-		<>
+		<div className="border p-4">
 			{!signupComplete && (
 				<>
-					<h1>Signup</h1>
+					<h1 className="text-2xl text-center">Signup</h1>
 					<div className="my-10">
 						<form onSubmit={handleSubmit}>
-							<label htmlFor="name">Name</label>
-							<input
-								name="name"
-								value={name}
-								onChange={(evt) => setName(evt.target.value)}
-							/>
-							<label htmlFor="email">Email</label>
-							<input
-								name="email"
-								value={email}
-								onChange={(evt) => setEmail(evt.target.value)}
-							/>
-							<label htmlFor="password">Password</label>
-							<input
-								name="Password"
-								value={password}
-								type="password"
-								onChange={(evt) => setPassword(evt.target.value)}
-							/>
-							<Button
-								variant="outline"
-								className="mt-4"
-								type="submit"
-								disabled={!name || !email || !password}
-							>
-								Create Account
-							</Button>
+							<div>
+								<label htmlFor="name">Name</label>
+							</div>
+							<div>
+								<input
+									id="name"
+									className="w-full"
+									name="name"
+									value={name}
+									onChange={(evt) => setName(evt.target.value)}
+								/>
+							</div>
+							<div className="mt-2">
+								<label htmlFor="email">Email</label>
+							</div>
+							<div>
+								<input
+									id="email"
+									className="w-full"
+									name="email"
+									value={email}
+									onChange={(evt) => setEmail(evt.target.value)}
+								/>
+							</div>
+							<div className="mt-2">
+								<label htmlFor="password">Password</label>
+							</div>
+							<div>
+								<input
+									id="password"
+									className="w-full"
+									name="Password"
+									value={password}
+									type="password"
+									onChange={(evt) => setPassword(evt.target.value)}
+								/>
+							</div>
+							<div className="mt-4 text-center">
+								<Button
+									variant="outline"
+									type="submit"
+									disabled={!name || !email || !password}
+								>
+									Create Account
+								</Button>
+							</div>
 						</form>
 					</div>
 				</>
@@ -81,6 +100,6 @@ export default function SignupForm() {
 					</div>
 				</div>
 			)}
-		</>
+		</div>
 	);
 }

core/package.json

@@ -42,6 +42,7 @@
 		"zod": "^3.21.4"
 	},
 	"devDependencies": {
+		"@tailwindcss/forms": "^0.5.6",
 		"@types/diacritics": "^1.3.1",
 		"@types/jsonwebtoken": "^9.0.2",
 		"@types/node": "20.3.1",

core/tailwind.config.js

@@ -4,6 +4,7 @@ const sharedConfig = require("ui/tailwind.config.js");
 
 module.exports = {
 	presets: [sharedConfig],
+	plugins: [require("@tailwindcss/forms")],
 	content: [
 		"./app/**/*.{ts,tsx}",
 		// "../packages/ui/**/*.{js,ts,jsx,tsx}"