major mobile/tablet progress

frontend/src/app/login/page.module.css

@@ -0,0 +1,181 @@
+/* Login.css */
+
+.loginContainer {
+  position: relative;
+  height: 100vh;
+  margin: 0;
+}
+
+.loginBox {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 15px;
+  border-radius: 12px;
+  background: #fff;
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+  width: 70%;
+  max-width: 580px;
+}
+
+.logoContainer {
+  position: absolute;
+  top: -65px;
+  display: inline-flex;
+  padding: 15px;
+  align-items: flex-start;
+  gap: 10px;
+  border-radius: 12px;
+  background: #fff;
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+}
+
+.logoImage {
+  background: lightgray no-repeat;
+  width: 190px;
+  height: 90px;
+}
+
+.image {
+  width: 190px;
+  height: 90px;
+}
+
+.welcomeText {
+  color: #000;
+  text-align: center;
+  font-family: Lora;
+  font-size: 40px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  margin-top: 65px; /* Gap between Welcome and Name field */
+}
+
+.loginForm {
+  width: 80%;
+  margin-top: 54px; /* Gap between Name and Password */
+}
+
+.inputGroup {
+  margin-bottom: 16px; /* Gap between Password and Forgot Password */
+  padding-top: 6px;
+}
+
+.label {
+  display: block;
+  margin-bottom: 5px;
+  color: gray;
+  font-size: 16px;
+}
+
+.input {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.forgotPassword {
+  color: #4274f4;
+
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  text-align: center;
+  padding-top: 30px;
+  margin-bottom: 48px; /* Gap between Forgot password and Log In */
+}
+
+.loginButton {
+  width: 100%;
+  height: 50px;
+  flex-shrink: 0;
+  border-radius: 4px;
+  background: var(--Secondary-1, #102d5f);
+  color: #fff;
+  cursor: pointer;
+  text-align: center;
+  font-family: Lora;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  margin-bottom: 49px;
+}
+
+/* tablet version */
+@media screen and (max-width: 850px) {
+  .backgroundImage {
+    object-fit: cover;
+    object-position: 35% 10%;
+  }
+
+  .loginBox {
+    width: 90%;
+    max-width: 500px;
+  }
+
+  .loginForm {
+    margin-top: 32px; /* Gap between Name and Password */
+  }
+
+  .forgotPassword {
+    font-size: 12px;
+    margin-bottom: 38px; /* Gap between Forgot password and Log In */
+  }
+
+  .loginButton {
+    font-size: 18px;
+    font-weight: 600;
+  }
+}
+
+/* mobile version */
+@media screen and (max-width: 550px) {
+  .backgroundImage {
+    object-fit: cover;
+    object-position: 35% 10%;
+  }
+
+  .logoContainer {
+    padding: 10px;
+  }
+
+  .logoImage {
+    width: 130px;
+    height: 60px;
+  }
+
+  .image {
+    width: 130px;
+    height: 60px;
+  }
+
+  .welcomeText {
+    font-size: 28px;
+    margin-top: 17px; /* Gap between Welcome and Name field */
+  }
+
+  .loginForm {
+    width: 100%;
+  }
+
+  .inputGroup {
+    padding-top: 0;
+  }
+
+  .forgotPassword {
+    padding-top: 16px;
+    margin-bottom: 32px; /* Gap between Forgot password and Log In */
+  }
+
+  .loginButton {
+    margin-bottom: 17px;
+  }
+}

frontend/src/app/login/page.tsx

@@ -4,10 +4,11 @@
 import React, { useState } from "react";
 import InputField from "@/components/shared/input/InputField";
 import Image from "next/image";
-import "@/app/login/login.css";
+import styles from "@/app/login/page.module.css";
 import { signInWithEmailAndPassword } from "firebase/auth";
 import { initFirebase } from "@/firebase/firebase";
 import { useRouter } from "next/navigation";
+import { useMediaQuery } from "@mui/material";
 
 const Login = () => {
   const [email, setEmail] = useState("");
@@ -17,6 +18,8 @@ const Login = () => {
 
   const router = useRouter();
 
+  const isMobile = useMediaQuery("@media screen and (max-width: 550px)");
+
   const sendTokenToBackend = async (token: string) => {
     try {
       const response = await fetch(`http://localhost:3001/api/whoami`, {
@@ -60,20 +63,22 @@ const Login = () => {
 
   return (
     <body>
-      <div className="login-container">
+      <div className={styles.loginContainer}>
         <Image
           src="/Images/login_bg.png"
           alt=""
           layout="fill"
+          objectFit="cover"
           priority
           /* Inline styling due to using Image Component*/
           style={{
             position: "absolute",
             top: "0",
             left: "0",
-            right: "0",
+            right: "30",
             bottom: "0",
           }}
+          className={styles.backgroundImage}
         />
         <div
           style={{
@@ -85,15 +90,21 @@ const Login = () => {
             background: "#232220D9",
           }}
         />
-        <div className="login-box">
-          <div className="logo-container">
-            <div className="logo-image">
-              <Image src="/Images/LoginImage.png" alt="Logo" width={190} height={90} />
+        <div className={styles.loginBox}>
+          <div className={styles.logoContainer}>
+            <div className={styles.logoImage}>
+              <Image
+                src="/Images/LoginImage.png"
+                alt="Logo"
+                className={styles.image}
+                width={isMobile ? 130 : 190}
+                height={isMobile ? 60 : 90}
+              />
             </div>
           </div>
-          <div className="welcome-text">Welcome!</div>
-          <form onSubmit={handleLogin} className="login-form">
-            <div className="input-group">
+          <div className={styles.welcomeText}>Welcome!</div>
+          <form onSubmit={handleLogin} className={styles.loginForm}>
+            <div className={styles.inputGroup}>
               <InputField
                 label="Email"
                 id="email"
@@ -102,7 +113,7 @@ const Login = () => {
                 onChange={(e) => setEmail(e.target.value)}
               />
             </div>
-            <div className="input-group">
+            <div className={styles.inputGroup}>
               <InputField
                 label="Password"
                 id="password"
@@ -112,8 +123,8 @@ const Login = () => {
                 type="password"
               />
             </div>
-            <div className="forgot-password">Forgot Password?</div>
-            <button type="submit" className="login-button">
+            <div className={styles.forgotPassword}>Forgot Password?</div>
+            <button type="submit" className={styles.loginButton}>
               Log In
             </button>
           </form>