From adb8b926e5140db89ecd7b48bc32f379e8dcb4b6 Mon Sep 17 00:00:00 2001
From: sogav21 <sogav@hotmail.com>
Date: Mon, 11 May 2026 16:25:26 +0300
Subject: [PATCH] Update recover password view to Tailwind

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

diff --git a/frontend/src/views/MainPage/RecoverPassword/index.jsx b/frontend/src/views/MainPage/RecoverPassword/index.jsx
index 4fc2a0e..b5f7d30 100644
--- a/frontend/src/views/MainPage/RecoverPassword/index.jsx
+++ b/frontend/src/views/MainPage/RecoverPassword/index.jsx
@@ -1,13 +1,18 @@
 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 inputClass =
+    'mt-2.5 mb-1.5 w-full rounded border border-[#cadbe3] bg-white px-4 py-3 font-["SourceSansPro-Regular"] text-lg text-[#335065] outline-none placeholder:text-[#7291a0] focus:border-[#6254ff]';
+const invalidInputClass = 'border-[#d83341] focus:border-[#d83341]';
+const messageClass =
+    'mt-2.5 flex w-full items-center gap-1 font-["SourceSansPro-Regular"] text-[13px]';
+
 const RecoverPassword = () => {
-    const navigate=useNavigate()
+    const navigate = useNavigate();
     const [successful, setSuccessful] = useState('');
     const [data, setData] = useState({
         email: ''
@@ -35,54 +40,60 @@ const RecoverPassword = () => {
         const regex = /^[-\w.%+]{1,64}@(?:[A-Z0-9-]{1,63}\.){1,125}[A-Z]{2,63}$/i;
         return regex.test(string);
     };
+    const isInvalidEmail = !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%] flex-col md:w-[80%] xl:w-[68%]"
+            onSubmit={handleSubmit}
+        >
+            <button
+                className="mb-8 flex w-fit items-center text-[#0d1e38] transition hover:text-[#2764ff]"
+                type="button"
+                onClick={() => navigate('/log-in')}
+            >
+                <MdOutlineArrowBack className="h-6 w-6" />
+                <span className="ml-2 font-['SourceSansPro-SemiBold'] text-lg">Volver</span>
+            </button>
+            <p className="mb-5 font-['Rubik-Bold'] text-[28px] leading-tight text-[#0d1e38]">
+                Recuperar contraseña
+            </p>
+            <p className="mb-8 font-['SourceSansPro-SemiBold'] text-lg leading-snug 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={`${inputClass} ${isInvalidEmail ? invalidInputClass : ''}`}
                     type="email"
                     name="email"
                     value={data.email}
                     onChange={handleChange}
                     placeholder="Email"
                 />
-                {!validateEmail(data.email) && data.email !== '' && (
-                    <p className={Styles[`form-input-error`]}>
+                {isInvalidEmail && (
+                    <p className="flex items-center gap-1 font-['SourceSansPro-Regular'] text-sm text-[#d83341]">
                         <BiError />
                         Invalid email. Please try again.
                     </p>
                 )}
             </div>
             <button
-                className={Styles[`form-button`]}
+                className="my-2.5 h-[47px] rounded border-0 bg-[#6254ff] font-['SourceSansPro-Regular'] text-base text-white transition enabled:hover:cursor-pointer enabled:hover:bg-[#5145e6] disabled:bg-[#f0f0f0] disabled:text-[#7291a0]"
                 disabled={!data.email || !validateEmail(data.email) || successful}
                 type="submit"
             >
                 Recuperar contraseña
             </button>
-            <div className={Styles[`additional-text`]}>
+            <div className="h-auto w-full">
                 {error && !successful && (
-                    <p className={Styles[`form-error`]}>
-                        <BiError className={Styles[`form-icon-error`]} />
+                    <p className={`${messageClass} text-[#d83341]`}>
+                        <BiError className="h-5 w-5" />
                         {error}
                     </p>
                 )}
                 {successful && (
-                    <p className={Styles[`form-successful`]}>
-                        <MdOutlineMarkEmailRead className={Styles[`form-icon-error`]} />
+                    <p className={`${messageClass} text-[#0b790b]`}>
+                        <MdOutlineMarkEmailRead className="h-5 w-5" />
                         {successful}
                     </p>
                 )}