style: mobile viewport enhancement (#10)

Co-authored-by: me <ramvignesh-b@github.com>
Reviewed-on: #10

frontend/src/components/ui/PasswordInput.tsx

@@ -2,36 +2,37 @@ import { EyeIcon, EyeSlashIcon } from "@phosphor-icons/react";
 import { useState } from "react";
 
 interface PasswordInputProps
-    extends React.InputHTMLAttributes<HTMLInputElement> {
-    error?: boolean;
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  error?: boolean;
 }
 
 export function PasswordInput({
-    className,
-    error,
-    ...props
+  className,
+  error,
+  ...props
 }: PasswordInputProps) {
-    const [showPassword, setShowPassword] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
 
-    return (
-        <div className="relative w-full">
-            <input
-                {...props}
-                type={showPassword ? "text" : "password"}
-                className={`input input-bordered focus:input-primary w-full pr-12 ${error ? "input-error" : ""
-                    } ${className}`}
-            />
-            <button
-                type="button"
-                className="absolute right-4 top-1/2 -translate-y-1/2 text-neutral-content/40 hover:text-primary transition-all duration-300 cursor-pointer"
-                onClick={() => setShowPassword(!showPassword)}
-            >
-                {showPassword ? (
-                    <EyeSlashIcon size={22} weight="duotone" />
-                ) : (
-                    <EyeIcon size={22} weight="duotone" />
-                )}
-            </button>
-        </div>
-    );
+  return (
+    <div className="relative w-full">
+      <input
+        {...props}
+        type={showPassword ? "text" : "password"}
+        className={`input input-bordered focus:input-primary w-full pr-12 ${
+          error ? "input-error" : ""
+        } ${className}`}
+      />
+      <button
+        type="button"
+        className="absolute right-4 top-1/2 -translate-y-1/2 text-neutral-content/40 hover:text-primary transition-all duration-300 cursor-pointer"
+        onClick={() => setShowPassword(!showPassword)}
+      >
+        {showPassword ? (
+          <EyeSlashIcon size={22} weight="duotone" />
+        ) : (
+          <EyeIcon size={22} weight="duotone" />
+        )}
+      </button>
+    </div>
+  );
 }

frontend/src/components/ui/Saajan.tsx

@@ -45,7 +45,7 @@ export default function Saajan({ message, position = "right" }: SaajanProps) {
         <img
           src={sf_mini}
           alt="saajan"
-          className={`sepia-20 w-35 -mb-6 ${animate ? "animate-[pulse_.5s_ease_2]" : ""}`}
+          className={`sepia-20 w-30 -mb-6 ${animate ? "animate-[pulse_.5s_ease_2]" : ""}`}
         />
       </div>
     </div>

frontend/src/index.css

@@ -66,7 +66,7 @@
 }
 
 .glass-card {
-  @apply bg-glass-bg max-w-xs md:max-w-sm backdrop-blur-xl border border-neutral-content/10 shadow-warm rounded-xl m-4;
+  @apply bg-glass-bg max-w-xs md:max-w-sm backdrop-blur-xl border border-neutral-content/10 shadow-warm rounded-xl m-2 md:m-4;
 }
 
 .ul-wavy {

frontend/src/pages/Home.tsx

@@ -353,7 +353,7 @@ export default function Home() {
             </motion.div>
             {/*  Saajan */}
             <motion.div
-              className="fixed bottom-0 z-10 font-sans -mb-6 scale-85 md:scale-100 md:mb-0"
+              className="fixed bottom-0 z-10 font-sans -mb-6 md:scale-100 md:mb-0"
               style={{
                 opacity: useTransform(
                   scrollYProgress,

frontend/src/pages/Login.tsx

@@ -30,7 +30,7 @@ export default function Login() {
   const { setAuthStore } = useAuth();
   const [showWelcome, setShowWelcome] = useState(!!location.state?.firstTime);
   const [saajanMessage, setSaajanMessage] = useState<string>(
-    "I was wondering when you'd return.",
+    "I was wondering, if you'd ever return.",
   );
   const nextRoute = location.state?.redirectUrl || ROUTES.DRAWER;
 
@@ -82,9 +82,12 @@ export default function Login() {
       {!showWelcome && <Saajan message={saajanMessage} position="top" />}
       {showWelcome && <WelcomeModal setShowWelcome={setShowWelcome} />}
       <div className="glass-card w-full max-w-sm p-2 transition-all duration-500 hover:shadow-2xl fade-zoom">
-        <form onSubmit={handleSubmit(onSubmit)} className="card-body gap-4">
+        <form
+          onSubmit={handleSubmit(onSubmit)}
+          className="card-body gap-4 px-2"
+        >
           <h1 className="flex items-center font-display text-2xl justify-center text-primary/80 tracking-tight">
-            &nbsp;&nbsp;Enter <Logo type="logo" scale={0.7} /> Archive
+            &nbsp;Unlock <Logo type="logo" scale={0.6} /> Archive
           </h1>
 
           {apiError && (

frontend/src/pages/Register.tsx

@@ -75,9 +75,12 @@ export default function Register() {
     <div className="flex flex-col">
       <Saajan message={saajanMessage} position="right" />
       <div className="glass-card w-full max-w-sm p-2 transition-all duration-500 hover:shadow-2xl fade-zoom">
-        <form onSubmit={handleSubmit(onSubmit)} className="card-body gap-4">
-          <div className="card-title font-display text-2xl justify-center text-primary/80 tracking-tight whitespace-nowrap">
-            Create a<Logo type="logo" scale={0.7} />
+        <form
+          onSubmit={handleSubmit(onSubmit)}
+          className="card-body px-2 gap-4"
+        >
+          <div className="card-title font-display text-xl md:text-2xl justify-center text-primary/80 tracking-tight whitespace-nowrap">
+            Create a<Logo type="logo" scale={0.6} />
             Account
           </div>