RecentRunner/group-2-threaded-project-petshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Styling refactor

Browse Source
This commit is contained in:
augmentedpotato
2026-04-18 16:12:43 -06:00
committed by Harkamal Randhawa
parent 049c39984b
commit 077d147498
21 changed files with 829 additions and 4509 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
web/app/forgot-password/page.js
View File

@@ -4,6 +4,10 @@ import dynamic from "next/dynamic";
import Link from "next/link";
import { useState } from "react";
const labelCls = "flex flex-col gap-[0.35rem] text-[0.9rem] font-semibold text-[#444]";
const inputCls = "px-[0.85rem] py-[0.6rem] border border-[#ddd] rounded-lg text-base outline-none transition-all focus:border-[#e68672] focus:shadow-[0_0_0_3px_rgba(230,134,114,0.2)]";
const submitBtnCls = "mt-2 py-3 bg-[#e68672] text-white border-none rounded-lg text-base font-bold cursor-pointer transition-all hover:bg-[#d4705e] active:scale-[0.98] disabled:opacity-60 disabled:cursor-not-allowed";
function ForgotPasswordPage() {
const [usernameOrEmail, setUsernameOrEmail] = useState("");
const [message, setMessage] = useState("");
@@ -40,47 +44,40 @@ function ForgotPasswordPage() {
}
return (
<main className="auth-page">
<div className="auth-card">
<h1 className="auth-title">Forgot Password</h1>
<main className="min-h-[calc(100vh-70px)] flex items-center justify-center py-8 px-4 bg-[#fafafa]">
<div className="bg-white rounded-2xl shadow-[0_4px_24px_rgba(0,0,0,0.1)] p-10 w-full max-w-[440px] max-[480px]:p-6">
<h1 className="text-[1.75rem] font-bold text-[#222] m-0 mb-6 text-center">Forgot Password</h1>
{!submitted ? (
<>
<p style={{ color: "#6b7280", marginBottom: "1.25rem", fontSize: "0.95rem" }}>
<p className="text-[#6b7280] mb-5 text-[0.95rem]">
Enter your username or email address and we&apos;ll send you a link to reset your password.
</p>
{error && <p className="auth-error">{error}</p>}
{error && <p className="bg-[#fff0f0] border border-[#f5c6c6] text-[#c0392b] rounded-lg px-4 py-[0.65rem] text-[0.9rem] mb-2">{error}</p>}
<form className="auth-form" onSubmit={handleSubmit}>
<label className="auth-label">
<form className="flex flex-col gap-4" onSubmit={handleSubmit}>
<label className={labelCls}>
Username or Email
<input
className="auth-input"
type="text"
value={usernameOrEmail}
onChange={(e) => setUsernameOrEmail(e.target.value)}
required
autoComplete="username"
/>
<input className={inputCls} type="text" value={usernameOrEmail} onChange={(e) => setUsernameOrEmail(e.target.value)} required autoComplete="username" />
</label>
<button className="auth-submit-btn" type="submit" disabled={loading}>
<button className={submitBtnCls} type="submit" disabled={loading}>
{loading ? "Sending…" : "Send Reset Link"}
</button>
</form>
</>
) : (
<p style={{ color: "#16a34a", margin: "1rem 0", lineHeight: 1.6 }}>{message}</p>
<p className="text-[#16a34a] my-4 leading-relaxed">{message}</p>
)}
<p className="auth-switch">
<p className="text-center text-[0.9rem] text-[#666] mt-5">
Remember your password?{" "}
<Link href="/login" className="auth-switch-link">Log in here</Link>
<Link href="/login" className="text-[#e68672] font-semibold no-underline hover:underline">Log in here</Link>
</p>
<p className="auth-switch">
<p className="text-center text-[0.9rem] text-[#666] mt-5">
Don&apos;t have an account?{" "}
<Link href="/register" className="auth-switch-link">Register here</Link>
<Link href="/register" className="text-[#e68672] font-semibold no-underline hover:underline">Register here</Link>
</p>
</div>
</main>