apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-04-29 02:46:25 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

style: enhance input field focus styles and transition effects in login and registration forms

Browse source
This commit is contained in:
Anish Sarkar 2026-04-01 21:00:52 +05:30
parent 5c11a15fb6
commit 33e7aeef9d
2 changed files with 81 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

12
surfsense_web/app/(home)/login/LocalLoginForm.tsx
View file

@ -160,10 +160,10 @@ export function LocalLoginForm() {
placeholder="you@example.com" placeholder="you@example.com"
value={username} value={username}
onChange={(e) => setUsername(e.target.value)} onChange={(e) => setUsername(e.target.value)}
className={`mt-1 block w-full rounded-md border px-3 py-1.5 md:py-2 shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 bg-background text-foreground transition-all ${ className={`mt-1 block w-full rounded-md border px-3 py-1.5 md:py-2 shadow-sm focus:outline-none focus:ring-1 bg-background text-foreground transition-all ${
error.title error.title
? "border-destructive focus:border-destructive focus:ring-destructive" ? "border-destructive focus:border-destructive focus:ring-destructive/40"
: "border-border focus:border-primary focus:ring-primary" : "border-border focus:border-primary focus:ring-primary/40"
}`} }`}
disabled={isLoggingIn} disabled={isLoggingIn}
/> />
@ -181,10 +181,10 @@ export function LocalLoginForm() {
placeholder="Enter your password" placeholder="Enter your password"
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
className={`mt-1 block w-full rounded-md border pr-10 px-3 py-1.5 md:py-2 shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 bg-background text-foreground transition-all ${ className={`mt-1 block w-full rounded-md border pr-10 px-3 py-1.5 md:py-2 shadow-sm focus:outline-none focus:ring-1 bg-background text-foreground transition-all ${
error.title error.title
? "border-destructive focus:border-destructive focus:ring-destructive" ? "border-destructive focus:border-destructive focus:ring-destructive/40"
: "border-border focus:border-primary focus:ring-primary" : "border-border focus:border-primary focus:ring-primary/40"
}`} }`}
disabled={isLoggingIn} disabled={isLoggingIn}
/> />

30
surfsense_web/app/(home)/register/page.tsx
View file

@ -231,7 +231,7 @@ export default function RegisterPage() {
<div> <div>
<label <label
htmlFor="email" htmlFor="email"
className="block text-sm font-medium text-gray-700 dark:text-gray-300" className="block text-sm font-medium text-foreground"
> >
{t("email")} {t("email")}
</label> </label>
@ -242,10 +242,10 @@ export default function RegisterPage() {
placeholder="you@example.com" placeholder="you@example.com"
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
className={`mt-1 block w-full rounded-md border px-3 py-1.5 md:py-2 shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 dark:bg-gray-800 dark:text-white transition-all ${ className={`mt-1 block w-full rounded-md border px-3 py-1.5 md:py-2 shadow-sm focus:outline-none focus:ring-1 bg-background text-foreground transition-all ${
error.title error.title
? "border-red-300 focus:border-red-500 focus:ring-red-500 dark:border-red-700" ? "border-destructive focus:border-destructive focus:ring-destructive/40"
: "border-gray-300 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700" : "border-border focus:border-primary focus:ring-primary/40"
}`} }`}
disabled={isRegistering} disabled={isRegistering}
/> />
@ -254,7 +254,7 @@ export default function RegisterPage() {
<div> <div>
<label <label
htmlFor="password" htmlFor="password"
className="block text-sm font-medium text-gray-700 dark:text-gray-300" className="block text-sm font-medium text-foreground"
> >
{t("password")} {t("password")}
</label> </label>
@ -265,10 +265,10 @@ export default function RegisterPage() {
placeholder="Enter your password" placeholder="Enter your password"
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
className={`mt-1 block w-full rounded-md border px-3 py-1.5 md:py-2 shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 dark:bg-gray-800 dark:text-white transition-all ${ className={`mt-1 block w-full rounded-md border px-3 py-1.5 md:py-2 shadow-sm focus:outline-none focus:ring-1 bg-background text-foreground transition-all ${
error.title error.title
? "border-red-300 focus:border-red-500 focus:ring-red-500 dark:border-red-700" ? "border-destructive focus:border-destructive focus:ring-destructive/40"
: "border-gray-300 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700" : "border-border focus:border-primary focus:ring-primary/40"
}`} }`}
disabled={isRegistering} disabled={isRegistering}
/> />
@ -277,7 +277,7 @@ export default function RegisterPage() {
<div> <div>
<label <label
htmlFor="confirmPassword" htmlFor="confirmPassword"
className="block text-sm font-medium text-gray-700 dark:text-gray-300" className="block text-sm font-medium text-foreground"
> >
{t("confirm_password")} {t("confirm_password")}
</label> </label>
@ -288,10 +288,10 @@ export default function RegisterPage() {
placeholder="Confirm your password" placeholder="Confirm your password"
value={confirmPassword} value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)} onChange={(e) => setConfirmPassword(e.target.value)}
className={`mt-1 block w-full rounded-md border px-3 py-1.5 md:py-2 shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 dark:bg-gray-800 dark:text-white transition-all ${ className={`mt-1 block w-full rounded-md border px-3 py-1.5 md:py-2 shadow-sm focus:outline-none focus:ring-1 bg-background text-foreground transition-all ${
error.title error.title
? "border-red-300 focus:border-red-500 focus:ring-red-500 dark:border-red-700" ? "border-destructive focus:border-destructive focus:ring-destructive/40"
: "border-gray-300 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700" : "border-border focus:border-primary focus:ring-primary/40"
}`} }`}
disabled={isRegistering} disabled={isRegistering}
/> />
@ -300,7 +300,7 @@ export default function RegisterPage() {
<button <button
type="submit" type="submit"
disabled={isRegistering} disabled={isRegistering}
className="relative w-full rounded-md bg-blue-600 px-4 py-1.5 md:py-2 text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all text-sm md:text-base flex items-center justify-center gap-2" className="relative w-full rounded-md bg-primary px-4 py-1.5 md:py-2 text-primary-foreground shadow-sm hover:bg-primary/90 focus:outline-none focus:ring-1 focus:ring-primary/40 disabled:cursor-not-allowed disabled:opacity-50 transition-all text-sm md:text-base flex items-center justify-center gap-2"
> >
<span className={isRegistering ? "invisible" : ""}>{t("register")}</span> <span className={isRegistering ? "invisible" : ""}>{t("register")}</span>
{isRegistering && ( {isRegistering && (
@ -312,11 +312,11 @@ export default function RegisterPage() {
</form> </form>
<div className="mt-4 text-center text-sm"> <div className="mt-4 text-center text-sm">
<p className="text-gray-600 dark:text-gray-400"> <p className="text-muted-foreground">
{t("already_have_account")}{" "} {t("already_have_account")}{" "}
<Link <Link
href="/login" href="/login"
className="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400" className="font-medium text-primary hover:text-primary/90"
> >
{t("sign_in")} {t("sign_in")}
</Link> </Link>