From 3af78141d99494446204087432f4935aebeb7a2c Mon Sep 17 00:00:00 2001
From: Bojay Liu <189326887+BojayL@users.noreply.github.com>
Date: Sat, 20 Jun 2026 00:39:27 +0800
Subject: [PATCH] Update login view with Tailwind

---
 frontend/src/views/MainPage/LogIn/index.jsx | 83 +++++++++++++--------
 1 file changed, 52 insertions(+), 31 deletions(-)

diff --git a/frontend/src/views/MainPage/LogIn/index.jsx b/frontend/src/views/MainPage/LogIn/index.jsx
index 12257c1..3979777 100644
--- a/frontend/src/views/MainPage/LogIn/index.jsx
+++ b/frontend/src/views/MainPage/LogIn/index.jsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
-import Styles from './../Form.module.css';
 import { useDispatch } from 'react-redux';
 //icons
 import { AiOutlineEyeInvisible, AiOutlineEye } from 'react-icons/ai';
@@ -32,70 +31,92 @@ const LogIn = () => {
         const regex = /^[-\w.%+]{1,64}@(?:[A-Z0-9-]{1,63}\.){1,125}[A-Z]{2,63}$/i;
         return regex.test(string);
     };
+    const emailInvalid = !validateEmail(data.email) && data.email !== '';
+
+    const inputClasses = `mt-2 mb-1 w-full rounded border bg-white px-4 py-3 text-lg text-[#335065] outline-none transition focus:border-[#6254ff] focus:ring-2 focus:ring-[#6254ff]/20 ${
+        emailInvalid ? 'border-[#D83341]' : 'border-[#cadbe3]'
+    }`;
+
     return (
-        <form className={Styles[`form`]} onSubmit={handleSubmit}>
-            <p className={Styles[`title`]}>¡Hola otra vez! 👋</p>
-            <div className="container-input">
+        <form className="flex w-[90%] flex-col md:w-4/5 xl:w-[68%]" onSubmit={handleSubmit}>
+            <p className="mb-6 text-[28px] leading-tight text-[#0d1e38] [font-family:'Rubik-Bold',serif]">
+                ¡Hola otra vez! 👋
+            </p>
+            <div className="flex flex-col">
+                <label className="sr-only" htmlFor="login-email">
+                    Email
+                </label>
                 <input
-                    className={Styles[`form-input`]}
-                    style={
-                        !validateEmail(data.email) && data.email !== ''
-                            ? { border: '1px solid #D83341' }
-                            : {}
-                    }
+                    id="login-email"
+                    className={inputClasses}
                     type="email"
                     name="email"
                     value={data.email}
                     onChange={handleChange}
                     placeholder="Email"
+                    aria-invalid={emailInvalid}
                 />
-                {!validateEmail(data.email) && data.email !== '' && (
-                    <p className={Styles[`form-input-error`]}>
-                        <BiError />
+                {emailInvalid && (
+                    <p className="flex items-center gap-1 text-sm text-[#D83341]">
+                        <BiError aria-hidden="true" />
                         Invalid email. Please try again.
                     </p>
                 )}
             </div>
-            <div className={Styles[`form-div-password`]}>
+            <div className="relative">
+                <label className="sr-only" htmlFor="login-password">
+                    Password
+                </label>
                 <input
-                    className={Styles[`form-input`]}
+                    id="login-password"
+                    className="mt-2 mb-1 w-full rounded border border-[#cadbe3] bg-white py-3 pl-4 pr-12 text-lg text-[#335065] outline-none transition focus:border-[#6254ff] focus:ring-2 focus:ring-[#6254ff]/20"
                     type={hidden ? 'text' : 'password'}
                     name="password"
                     value={data.password}
                     onChange={handleChange}
                     placeholder="Password"
                 />
-                {hidden ? (
-                    <AiOutlineEyeInvisible
-                        className={Styles[`form-icon-eye`]}
-                        onClick={handleHidden}
-                    />
-                ) : (
-                    <AiOutlineEye className={Styles[`form-icon-eye`]} onClick={handleHidden} />
-                )}
+                <button
+                    aria-label={hidden ? 'Hide password' : 'Show password'}
+                    className="absolute right-4 top-[22px] text-2xl text-[#7291a0] transition hover:text-[#335065] focus:outline-none focus:ring-2 focus:ring-[#6254ff]/30"
+                    type="button"
+                    onClick={handleHidden}
+                >
+                    {hidden ? (
+                        <AiOutlineEyeInvisible aria-hidden="true" />
+                    ) : (
+                        <AiOutlineEye aria-hidden="true" />
+                    )}
+                </button>
             </div>
-            <p className={Styles[`additional-text2`]}>
-                <Link to="/recover-password" className={Styles[`additional-link`]}>
+            <p className="mb-6 w-full text-right text-sm text-[#335065]">
+                <Link
+                    to="/recover-password"
+                    className="font-semibold text-[#2764ff] no-underline transition hover:text-[#1d4ed8]"
+                >
                     Olvidé mi contraseña
                 </Link>
             </p>
             <button
-                className={Styles[`form-button`]}
+                className="mb-3 mt-1 h-[47px] rounded border-0 bg-[#6254ff] text-base text-white transition hover:bg-[#5145d9] disabled:bg-[#f0f0f0] disabled:text-[#8f9aa3]"
                 disabled={!data.email || !data.password || !validateEmail(data.email)}
                 type="submit"
             >
                 Login
             </button>
-            <div className={Styles[`additional-text`]}>
-                <p className={Styles[`additional-text3`]}>
+            <div className="min-h-[76px] w-full">
+                <p className="mt-6 text-center text-sm text-[#335065]">
                     ¿Aún no tienes una cuenta?{' '}
-                    <Link to="/sign-up" className={Styles[`additional-link`]}>
+                    <Link
+                        to="/sign-up"
+                        className="font-semibold text-[#2764ff] no-underline transition hover:text-[#1d4ed8]"
+                    >
                         Regístrate aquí
                     </Link>
                 </p>
                 {error && (
-                    <p className={Styles[`form-error`]}>
-                        <BiError className={Styles[`form-icon-error`]} />
+                    <p className="mt-3 flex w-full items-center rounded text-sm text-[#D83341]">
+                        <BiError className="mr-1 h-5 w-5" aria-hidden="true" />
                         {error}
                     </p>
                 )}