From c61a55cfbca1d991a2216fd73a9f6850cbd8cd1c Mon Sep 17 00:00:00 2001
From: Bojay Liu <189326887+BojayL@users.noreply.github.com>
Date: Fri, 19 Jun 2026 15:59:56 +0800
Subject: [PATCH] Update recover password view with Tailwind

---
 .../views/MainPage/RecoverPassword/index.jsx  | 62 +++++++++++--------
 1 file changed, 35 insertions(+), 27 deletions(-)

diff --git a/frontend/src/views/MainPage/RecoverPassword/index.jsx b/frontend/src/views/MainPage/RecoverPassword/index.jsx
index 4fc2a0e..d2b2579 100644
--- a/frontend/src/views/MainPage/RecoverPassword/index.jsx
+++ b/frontend/src/views/MainPage/RecoverPassword/index.jsx
@@ -1,13 +1,12 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import Styles from './../Form.module.css';
 import axios from 'axios';
 //icons
 import { BiError } from 'react-icons/bi';
 import { MdOutlineMarkEmailRead, MdOutlineArrowBack } from 'react-icons/md';
 
 const RecoverPassword = () => {
-    const navigate=useNavigate()
+    const navigate = useNavigate();
     const [successful, setSuccessful] = useState('');
     const [data, setData] = useState({
         email: ''
@@ -35,55 +34,64 @@ const RecoverPassword = () => {
         const regex = /^[-\w.%+]{1,64}@(?:[A-Z0-9-]{1,63}\.){1,125}[A-Z]{2,63}$/i;
         return regex.test(string);
     };
+
+    const hasInvalidEmail = !validateEmail(data.email) && data.email !== '';
+
     return (
-        <form className={Styles[`form`]} onSubmit={handleSubmit}>
-            <div className={Styles[`back`]} onClick={()=>navigate('/log-in')}>
-                <MdOutlineArrowBack  className={Styles[`back-icon`]}/>
-                <p>Volver</p>
-            </div>
-            <p className={Styles[`title`]}>Recuperar contraseña</p>
-            <p className={Styles[`subtitle`]}>
+        <form
+            className="flex w-[90%] max-w-md flex-col sm:w-4/5 xl:w-[68%]"
+            onSubmit={handleSubmit}
+        >
+            <button
+                type="button"
+                className="mb-8 flex w-fit items-center text-[#0D1E38] transition hover:text-[#2764ff]"
+                onClick={() => navigate('/log-in')}
+            >
+                <MdOutlineArrowBack className="h-6 w-6" />
+                <span className="ml-2 font-['SourceSansPro-SemiBold'] text-lg">Volver</span>
+            </button>
+            <h1 className="mb-4 font-['Rubik-Bold'] text-[28px] leading-tight text-[#0d1e38]">
+                Recuperar contraseña
+            </h1>
+            <p className="mb-8 font-['SourceSansPro-SemiBold'] text-lg leading-6 text-[#0d1e38]">
                 Escribí tu mail y te enviaremos un correo para crear una nueva contraseña.
             </p>
-            <div className="container-input">
+            <div className="flex flex-col">
                 <input
-                    className={Styles[`form-input`]}
-                    style={
-                        !validateEmail(data.email) && data.email !== ''
-                            ? { border: '1px solid #D83341' }
-                            : {}
-                    }
+                    className={`mt-2 mb-1 w-full rounded border bg-white px-4 py-3 font-['SourceSansPro-Regular'] text-lg text-[#335065] outline-none transition placeholder:text-[#7291a0] focus:border-[#6254ff] ${
+                        hasInvalidEmail ? 'border-[#D83341]' : 'border-[#cadbe3]'
+                    }`}
                     type="email"
                     name="email"
                     value={data.email}
                     onChange={handleChange}
                     placeholder="Email"
                 />
-                {!validateEmail(data.email) && data.email !== '' && (
-                    <p className={Styles[`form-input-error`]}>
-                        <BiError />
+                {hasInvalidEmail && (
+                    <p className="flex items-center font-['SourceSansPro-Regular'] text-sm text-[#d83341]">
+                        <BiError className="mr-1 h-4 w-4 shrink-0" />
                         Invalid email. Please try again.
                     </p>
                 )}
             </div>
             <button
-                className={Styles[`form-button`]}
+                className="mt-5 mb-3 h-12 rounded bg-[#6254ff] px-4 font-['SourceSansPro-Regular'] text-base text-white transition enabled:hover:bg-[#5144d9] disabled:cursor-not-allowed disabled:bg-[#f0f0f0] disabled:text-[#9aa8b2]"
                 disabled={!data.email || !validateEmail(data.email) || successful}
                 type="submit"
             >
                 Recuperar contraseña
             </button>
-            <div className={Styles[`additional-text`]}>
+            <div className="min-h-[76px] w-full">
                 {error && !successful && (
-                    <p className={Styles[`form-error`]}>
-                        <BiError className={Styles[`form-icon-error`]} />
-                        {error}
+                    <p className="mt-2 flex items-start rounded bg-[#fff5f6] p-3 font-['SourceSansPro-Regular'] text-sm text-[#d83341]">
+                        <BiError className="mr-2 mt-0.5 h-5 w-5 shrink-0" />
+                        <span>{error}</span>
                     </p>
                 )}
                 {successful && (
-                    <p className={Styles[`form-successful`]}>
-                        <MdOutlineMarkEmailRead className={Styles[`form-icon-error`]} />
-                        {successful}
+                    <p className="mt-2 flex items-start rounded bg-[#f1fbf1] p-3 font-['SourceSansPro-Regular'] text-sm text-[#0b790b]">
+                        <MdOutlineMarkEmailRead className="mr-2 mt-0.5 h-5 w-5 shrink-0" />
+                        <span>{successful}</span>
                     </p>
                 )}
             </div>