apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-09 15:52:40 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: enhance responsive layout, add UI transitions, and refine form elements on authentication pages

Browse source
This commit is contained in:
Anish Sarkar 2025-12-29 00:11:21 +05:30
parent dee18233c5
commit 5bd26ab669
4 changed files with 20 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

6
surfsense_web/app/(home)/login/GoogleLoginButton.tsx
View file

@ -40,8 +40,8 @@ export function GoogleLoginButton() {
return ( return (
<div className="relative w-full overflow-hidden"> <div className="relative w-full overflow-hidden">
<AmbientBackground /> <AmbientBackground />
<div className="mx-auto flex h-screen max-w-lg flex-col items-center justify-center"> <div className="mx-auto flex h-screen max-w-lg flex-col items-center justify-center px-6 md:px-0">
<Logo className="rounded-full my-8" /> <Logo className="h-16 w-16 md:h-32 md:w-32 rounded-full my-4 md:my-8 transition-all" />
{/* <h1 className="my-8 text-xl font-bold text-neutral-800 dark:text-neutral-100 md:text-4xl"> {/* <h1 className="my-8 text-xl font-bold text-neutral-800 dark:text-neutral-100 md:text-4xl">
Login Login
</h1> */} </h1> */}
@ -93,7 +93,7 @@ export function GoogleLoginButton() {
<motion.button <motion.button
whileHover={{ scale: 1.02 }} whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }} whileTap={{ scale: 0.98 }}
className="group/btn relative flex w-full items-center justify-center space-x-2 rounded-lg bg-white px-6 py-4 text-neutral-700 shadow-lg transition-all duration-200 hover:shadow-xl dark:bg-neutral-800 dark:text-neutral-200" className="group/btn relative flex w-full items-center justify-center space-x-2 rounded-lg bg-white px-6 py-3 md:py-4 text-neutral-700 shadow-lg transition-all duration-200 hover:shadow-xl dark:bg-neutral-800 dark:text-neutral-200"
onClick={handleGoogleLogin} onClick={handleGoogleLogin}
> >
<div className="absolute inset-0 h-full w-full transform opacity-0 transition duration-200 group-hover/btn:opacity-100"> <div className="absolute inset-0 h-full w-full transform opacity-0 transition duration-200 group-hover/btn:opacity-100">

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

@ -118,8 +118,8 @@ export function LocalLoginForm() {
}; };
return ( return (
<div className="w-full max-w-md"> <div className="w-full max-w-md px-6 md:px-0">
<form onSubmit={handleSubmit} className="space-y-4"> <form onSubmit={handleSubmit} className="space-y-3 md:space-y-4">
{/* Error Display */} {/* Error Display */}
<AnimatePresence> <AnimatePresence>
{error && error.title && ( {error && error.title && (
@ -194,7 +194,7 @@ export function LocalLoginForm() {
required required
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-2 shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 dark:bg-gray-800 dark:text-white transition-colors ${ 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 ${
error.title error.title
? "border-red-300 focus:border-red-500 focus:ring-red-500 dark:border-red-700" ? "border-red-300 focus:border-red-500 focus:ring-red-500 dark:border-red-700"
: "border-gray-300 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700" : "border-gray-300 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700"
@ -217,7 +217,7 @@ export function LocalLoginForm() {
required required
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-2 shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 dark:bg-gray-800 dark:text-white transition-colors ${ 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 dark:bg-gray-800 dark:text-white transition-all ${
error.title error.title
? "border-red-300 focus:border-red-500 focus:ring-red-500 dark:border-red-700" ? "border-red-300 focus:border-red-500 focus:ring-red-500 dark:border-red-700"
: "border-gray-300 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700" : "border-gray-300 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700"
@ -238,7 +238,7 @@ export function LocalLoginForm() {
<button <button
type="submit" type="submit"
disabled={isLoggingIn} disabled={isLoggingIn}
className="w-full rounded-md bg-blue-600 px-4 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-colors" className="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"
> >
{isLoggingIn ? tCommon("loading") : t("sign_in")} {isLoggingIn ? tCommon("loading") : t("sign_in")}
</button> </button>

6
surfsense_web/app/(home)/login/page.tsx
View file

@ -85,7 +85,7 @@ function LoginContent() {
// Get the auth type from environment variables // Get the auth type from environment variables
setAuthType(process.env.NEXT_PUBLIC_FASTAPI_BACKEND_AUTH_TYPE || "GOOGLE"); setAuthType(process.env.NEXT_PUBLIC_FASTAPI_BACKEND_AUTH_TYPE || "GOOGLE");
setIsLoading(false); setIsLoading(false);
}, [searchParams]); }, [searchParams, t, tCommon]);
// Show loading state while determining auth type // Show loading state while determining auth type
if (isLoading) { if (isLoading) {
@ -111,8 +111,8 @@ function LoginContent() {
<div className="relative w-full overflow-hidden"> <div className="relative w-full overflow-hidden">
<AmbientBackground /> <AmbientBackground />
<div className="mx-auto flex h-screen max-w-lg flex-col items-center justify-center"> <div className="mx-auto flex h-screen max-w-lg flex-col items-center justify-center">
<Logo className="rounded-md" /> <Logo className="h-16 w-16 md:h-32 md:w-32 rounded-md transition-all" />
<h1 className="my-8 text-xl font-bold text-neutral-800 dark:text-neutral-100 md:text-4xl"> <h1 className="mt-4 mb-6 text-xl font-bold text-neutral-800 dark:text-neutral-100 md:mt-8 md:mb-8 md:text-3xl lg:text-4xl transition-all">
{t("sign_in")} {t("sign_in")}
</h1> </h1>

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

@ -157,17 +157,17 @@ export default function RegisterPage() {
return ( return (
<div className="relative w-full overflow-hidden"> <div className="relative w-full overflow-hidden">
<AmbientBackground /> <AmbientBackground />
<div className="mx-auto flex h-screen max-w-lg flex-col items-center justify-center"> <div className="mx-auto flex h-screen max-w-lg flex-col items-center justify-center px-6 md:px-0">
<Logo className="rounded-md" /> <Logo className="h-16 w-16 md:h-32 md:w-32 rounded-md transition-all" />
<h1 className="my-8 text-xl font-bold text-neutral-800 dark:text-neutral-100 md:text-4xl"> <h1 className="mt-4 mb-6 text-xl font-bold text-neutral-800 dark:text-neutral-100 md:mt-8 md:mb-8 md:text-3xl lg:text-4xl transition-all">
{t("create_account")} {t("create_account")}
</h1> </h1>
<div className="w-full max-w-md"> <div className="w-full max-w-md">
<form onSubmit={handleSubmit} className="space-y-4"> <form onSubmit={handleSubmit} className="space-y-3 md:space-y-4">
{/* Enhanced Error Display */} {/* Enhanced Error Display */}
<AnimatePresence> <AnimatePresence>
{error && error.title && ( {error?.title && (
<motion.div <motion.div
initial={{ opacity: 0, y: -10, scale: 0.95 }} initial={{ opacity: 0, y: -10, scale: 0.95 }}
animate={{ opacity: 1, y: 0, scale: 1 }} animate={{ opacity: 1, y: 0, scale: 1 }}
@ -239,7 +239,7 @@ export default function RegisterPage() {
required required
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-2 shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 dark:bg-gray-800 dark:text-white transition-colors ${ 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 ${
error.title error.title
? "border-red-300 focus:border-red-500 focus:ring-red-500 dark:border-red-700" ? "border-red-300 focus:border-red-500 focus:ring-red-500 dark:border-red-700"
: "border-gray-300 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700" : "border-gray-300 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700"
@ -261,7 +261,7 @@ export default function RegisterPage() {
required required
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-2 shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 dark:bg-gray-800 dark:text-white transition-colors ${ 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 ${
error.title error.title
? "border-red-300 focus:border-red-500 focus:ring-red-500 dark:border-red-700" ? "border-red-300 focus:border-red-500 focus:ring-red-500 dark:border-red-700"
: "border-gray-300 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700" : "border-gray-300 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700"
@ -283,7 +283,7 @@ export default function RegisterPage() {
required required
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-2 shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 dark:bg-gray-800 dark:text-white transition-colors ${ 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 ${
error.title error.title
? "border-red-300 focus:border-red-500 focus:ring-red-500 dark:border-red-700" ? "border-red-300 focus:border-red-500 focus:ring-red-500 dark:border-red-700"
: "border-gray-300 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700" : "border-gray-300 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700"
@ -295,7 +295,7 @@ export default function RegisterPage() {
<button <button
type="submit" type="submit"
disabled={isRegistering} disabled={isRegistering}
className="w-full rounded-md bg-blue-600 px-4 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-colors" className="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"
> >
{isRegistering ? t("creating_account_btn") : t("register")} {isRegistering ? t("creating_account_btn") : t("register")}
</button> </button>