REFACTOR: AuthModal styling to better suit large screens

frontend/src/components/Auth/AuthModal.tsx

@@ -48,9 +48,9 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
         id="auth-modal"
         className="fixed inset-0 flex items-start justify-center z-[9000] h-[95vh] m-auto pt-[15vh] rounded-[5rem] transition-all animate-floating"
       >
-        <div className="relative w-[35vw] min-w-[300px]">
+        <div className="relative min-w-[30em]">
           {/* Login/Register Buttons Container */}
-          <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-20 w-[250px] flex justify-center gap-8 transition-transform overflow-visible">
+          <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-20 flex justify-center gap-8 transition-transform overflow-visible">
             {/* Login Toggle */}
             <ToggleButton
               toggled={selectedTab === "Login"}
@@ -75,13 +75,13 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
           {/* Form Container */}
           <div
             className="container flex flex-col items-center justify-around z-[9999] 
-            h-[70vh] m-auto rounded-[5rem] transition-all"
+            h-[70vh] m-auto w-full rounded-[5rem] transition-all"
             style={{ "--spin-duration": spinDuration } as React.CSSProperties}
           >
             {/*Border Container*/}
             <div
               id="border-container"
-              className="front-content bg-authForm flex flex-col justify-center
+              className="front-content bg-authForm flex flex-col justify-center items-center
                 z-50 rounded-[5rem] transition-all"
             >
               <button
@@ -92,7 +92,7 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
               </button>
               <div
                 id="login-methods"
-                className="flex flex-row items-center justify-evenly h-full py-[10%]"
+                className="flex flex-row items-center w-[20em] justify-evenly h-full py-[10%]"
               >
                 {authSwitch()}
               </div>

frontend/src/components/Auth/LoginForm.tsx

@@ -100,72 +100,69 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
 
   return (
     <>
-      <div className="flex flex-col items-center h-full">
+      <div className="flex flex-col items-center h-full overflow-hidden">
         <h1 className="flex flex-col text-white text-[1.5em] font-[800] md:text-[1.75em] lg:text-[2em]">
           Login
         </h1>
-        <div className="flex flex-col justify-evenly flex-grow mt-[4vh] bg-white/10 backdrop-blur-md p-6 rounded-xl shadow-lg w-full border border-white/10 sm:max-w-[16em] md:max-w-[18em] lg:max-w-[20em]">
+        <form
-          <form
+          onSubmit={handleSubmit}
-            onSubmit={handleSubmit}
+          id="login-form"
-            id="login-form"
+          className="flex flex-col justify-evenly flex-grow mt-[4vh] bg-white/10 backdrop-blur-md p-6 rounded-xl shadow-lg w-full border border-white/10 sm:max-w-[16em] md:max-w-[18em] lg:max-w-[20em] overflow-auto"
-            className="flex flex-col justify-evenly flex-grow"
+        >
-          >
+          {errors.general && (
-            {errors.general && (
+            <p className="text-red-500 text-sm text-center text-[0.75em]">
-              <p className="text-red-500 text-sm text-center text-[0.75em]">
+              {errors.general}
-                {errors.general}
+            </p>
-              </p>
+          )}
-            )}
 
-            {errors.username && (
+          {errors.username && (
-              <p className="text-red-500 text-center text-[0.75em]">
+            <p className="text-red-500 text-center text-[0.75em]">
-                {errors.username}
+              {errors.username}
-              </p>
+            </p>
-            )}
+          )}
+          <Input
+            name="username"
+            placeholder="Username"
+            value={formData.username}
+            onChange={handleInputChange}
+            extraClasses={`w-full focus:w-[120%] p-3 ${
+              errors.username ? "border-red-500" : ""
+            }`}
+          />
+
+          {errors.password && (
+            <p className="text-red-500 text-center text-[0.75em]">
+              {errors.password}
+            </p>
+          )}
+
+          <div className="pb-4">
             <Input
-              name="username"
+              name="password"
-              placeholder="Username"
+              type="password"
-              value={formData.username}
+              placeholder="Password"
+              value={formData.password}
               onChange={handleInputChange}
               extraClasses={`w-full focus:w-[120%] p-3 ${
-                errors.username ? "border-red-500" : ""
+                errors.password ? "border-red-500" : ""
               }`}
-            />
+            ></Input>
-
+            <div className="flex justify-end">
-            {errors.password && (
+              <button
-              <p className="text-red-500 text-center text-[0.75em]">
+                type="button"
-                {errors.password}
+                className="flex items-center w-fit text-white font-semibold hover:scale-105 mt-2 transition-all ease-in"
-              </p>
+                onClick={onForgotPassword}
-            )}
+              >
-
+                <ForgotIcon size={16} className="flex flex-row mr-1" />
-            <div className="pb-4">
+                <span className="text-[calc((1.5vw+1vh)/2)]">
-              <Input
+                  Forgot Password
-                name="password"
+                </span>
-                type="password"
+              </button>
-                placeholder="Password"
-                value={formData.password}
-                onChange={handleInputChange}
-                extraClasses={`w-full focus:w-[120%] p-3 ${
-                  errors.password ? "border-red-500" : ""
-                }`}
-              ></Input>
-              <div className="flex justify-end">
-                <button
-                  type="button"
-                  className="flex items-center w-fit text-white font-semibold hover:scale-105 mt-2 transition-all ease-in"
-                  onClick={onForgotPassword}
-                >
-                  <ForgotIcon size={16} className="flex flex-row mr-1" />
-                  <span className="text-[calc((1.5vw+1vh)/2)]">
-                    Forgot Password
-                  </span>
-                </button>
-              </div>
             </div>
-            <Button type="submit">Login</Button>
+          </div>
-          </form>
+          <Button type="submit">Login</Button>
-
           <GoogleLogin />
-        </div>
+        </form>
       </div>
     </>
   );

frontend/src/components/Auth/RegisterForm.tsx

@@ -108,97 +108,86 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
 
   return (
     <>
-      <div className="mb-2">
+      <div className="flex flex-col items-center h-full overflow-hidden">
-        <div className="flex flex-col items-center p-[2.5rem]">
+        <h1 className="flex flex-col text-white text-[1.5em] font-[800] md:text-[1.75em] lg:text-[2em]">
-          <h1 className="flex flex-col text-white text-[1.5em] font-[800] md:text-[1.75em] lg:text-[2em]">
+          Register
-            Register
+        </h1>
-          </h1>
+        <form
-          <div className="mt-10 bg-white/10 backdrop-blur-md p-6 rounded-xl shadow-lg w-full max-w-[10em] min-w-[14em] border border-white/10 sm:max-w-[16em] md:max-w-[18em] lg:max-w-[20em]">
+          onSubmit={handleSubmit}
-            <form
+          id="register-form"
-              onSubmit={handleSubmit}
+          className="flex flex-col justify-evenly flex-grow mt-[4vh] bg-white/10 backdrop-blur-md p-6 rounded-xl shadow-lg w-full border border-white/10 sm:max-w-[16em] md:max-w-[18em] lg:max-w-[20em] overflow-auto"
-              id="register-form"
+        >
-              className="flex flex-col"
+          {errors.general && (
-            >
+            <p className="text-red-500 text-sm text-center text-[0.75em]">
-              <div className="relative w-full">
+              {errors.general}
-                {errors.general && (
+            </p>
-                  <p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">
+          )}
-                    {errors.general}
+  
-                  </p>
+          {errors.username && (
-                )}
+            <p className="text-red-500 text-center text-[0.75em]">
-
+              {errors.username}
-                {errors.username && (
+            </p>
-                  <p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">
+          )}
-                    {errors.username}
+          <Input
-                  </p>
+            name="username"
-                )}
+            placeholder="Username"
-                <Input
+            value={formData.username}
-                  name="username"
+            onChange={handleInputChange}
-                  placeholder="Username"
+            extraClasses={`w-full focus:w-[120%] p-3 ${
-                  value={formData.username}
+              errors.username ? "border-red-500" : ""
-                  onChange={handleInputChange}
+            }`}
-                  extraClasses={`w-full focus:w-[120%] mb-[1.5em] p-[0.5rem] ${
+          />
-                    errors.username ? "border-red-500" : ""
+  
-                  }`}
+          {errors.email && (
-                />
+            <p className="text-red-500 text-center text-[0.75em]">
-              </div>
+              {errors.email}
-
+            </p>
-              <div className="relative w-full">
+          )}
-                {errors.email && (
+          <Input
-                  <p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">
+            name="email"
-                    {errors.email}
+            type="email"
-                  </p>
+            placeholder="Email"
-                )}
+            value={formData.email}
-                <Input
+            onChange={handleInputChange}
-                  name="email"
+            extraClasses={`w-full focus:w-[120%] p-3 ${
-                  type="email"
+              errors.email ? "border-red-500" : ""
-                  placeholder="Email"
+            }`}
-                  value={formData.email}
+          />
-                  onChange={handleInputChange}
+  
-                  extraClasses={`w-full focus:w-[120%] mb-[1.5em] p-[0.5rem] ${
+          {errors.password && (
-                    errors.email ? "border-red-500" : ""
+            <p className="text-red-500 text-center text-[0.75em]">
-                  }`}
+              {errors.password}
-                />
+            </p>
-              </div>
+          )}
-
+          <Input
-              <div className="relative w-full">
+            name="password"
-                {errors.password && (
+            type="password"
-                  <p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">
+            placeholder="Password"
-                    {errors.password}
+            value={formData.password}
-                  </p>
+            onChange={handleInputChange}
-                )}
+            extraClasses={`w-full focus:w-[120%] p-3 ${
-                <Input
+              errors.password ? "border-red-500" : ""
-                  name="password"
+            }`}
-                  type="password"
+          />
-                  placeholder="Password"
+  
-                  value={formData.password}
+          {errors.confirmPassword && (
-                  onChange={handleInputChange}
+            <p className="text-red-500 text-center text-[0.75em]">
-                  extraClasses={`w-full focus:w-[120%] mb-[1.5em] p-[0.5rem] ${
+              {errors.confirmPassword}
-                    errors.password ? "border-red-500" : ""
+            </p>
-                  }`}
+          )}
-                />
+          <Input
-              </div>
+            name="confirmPassword"
-              <div className="relative w-full">
+            type="password"
-                {errors.confirmPassword && (
+            placeholder="Confirm Password"
-                  <p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">
+            value={formData.confirmPassword}
-                    {errors.confirmPassword}
+            onChange={handleInputChange}
-                  </p>
+            extraClasses={`w-full focus:w-[120%] p-3 ${
-                )}
+              errors.confirmPassword ? "border-red-500" : ""
-                <Input
+            }`}
-                  name="confirmPassword"
+          />
-                  type="password"
+  
-                  placeholder="Confirm Password"
+          <Button type="submit">Register</Button>
-                  value={formData.confirmPassword}
+        </form>
-                  onChange={handleInputChange}
-                  extraClasses={`w-full focus:w-[120%] mb-[1.5em] p-[0.5rem] ${
-                    errors.confirmPassword ? "border-red-500" : ""
-                  }`}
-                />
-              </div>
-
-              <Button type="submit">Register</Button>
-            </form>
-          </div>
-        </div>
       </div>
     </>
   );