Responsividade

src/app/ForgetPassword/page.tsx

@@ -12,7 +12,7 @@ export default function ForgetPassword() {
         </div>
         <div className="bg-white rounded-t-4xl py-25 flex flex-col gap-5">
           <Text h1="" h2="Esqueceu a Senha?" p="Digite seu e-mail para que possamos te enviar um acesso para fazer uma nova senha." />
-          <div className="ml-4">
+          <div className="flex flex-col items-center justify-center">
           <Form label="E-mail" placeholder="usuá[email protected]" />
           </div>
           <div  className="flex flex-col items-center justify-center">

src/app/LoginPage/page.tsx

@@ -30,4 +30,4 @@ export default function Home() {
       </div>
     </div>
   );
-}
+}

src/app/components/BackButton/BackButton.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 import { BackButtonProps } from "../BackButton/BackButtonProps";
 import Link from "next/link";
+import {FaArrowLeft} from "react-icons/fa"
 //FIXME: add into the dependencies "react-icons/fa" and test the yarn build before commiting
-// import {FaArrowLeft} from "react-icons/fa"
 
 const BackButton: React.FC<BackButtonProps> = ({ href }) => {
   return (
     <Link href={href}>
       <button className="w-[51px] h-[46px] border rounded-xl bg-white cursor-pointer mt-5 ml-2.5">
-        {/* <FaArrowLeft className="w-[45px] text-[22px]" /> */}
+        {<FaArrowLeft className="w-[45px] text-[22px]" />}
       </button>
     </Link>
   );

src/app/components/Button/Button.tsx

@@ -13,4 +13,4 @@ const Button: React.FC <ButtonProps> = ({title, href}) => {
     )
 }
 
-export default Button
+export default Button;

src/app/components/CustomLink/CustomLink.tsx

@@ -1,13 +1,16 @@
 import React from "react";
 import Link from "next/link";
-import {CustomLinkProps} from "../CustomLink/CustomLinkProps"
+import { CustomLinkProps } from "../CustomLink/CustomLinkProps";
 
-const CustomLink: React.FC <CustomLinkProps> = ({text}) =>{ 
-    return(
-        <Link className="text-customBlue font-bold text-[15px] mt-3 items-end justify-end ml-8" href="./ForgetPassword">
-        {text}
-        </Link>
-    )
-}
+const CustomLink: React.FC<CustomLinkProps> = ({ text }) => {
+  return (
+    <Link
+      className="text-customBlue font-bold text-[15px] sm:text-[16px] md:text-[18px] mt-3 flex flex-col items-center justify-center mr-40 text-[#225991]"
+      href="/ForgetPassword"
+    >
+      {text}
+    </Link>
+  );
+};
 
-export default CustomLink
+export default CustomLink;

src/app/components/Form/Form.tsx

@@ -1,13 +1,19 @@
 import React from "react";
-import {FormProps} from "../Form/FormProps"
+import { FormProps } from "../Form/FormProps";
 
-const Form: React.FC <FormProps> = ({label, placeholder}) => {
-    return (
-        <form className="w-full">
-                <label className="text-2xl font-medium mb-1 px-8 py-10 ">{label}</label>
-                <input type="text " placeholder={placeholder} className="px-5 py-2 rounded-2xl  border border-textClaro bg-backgroundClaro text-sm mt-3  ml-8 w-[320px]"/>
-        </form>
-    )
-}
+const Form: React.FC<FormProps> = ({ label, placeholder }) => {
+  return (
+    <form className="w-full flex flex-col items-center justify-center">
+      <label className="font-medium mb-2 text-base sm:text-lg md:text-xl lg:text-2xl text-center w-full mr-60">
+        {label}
+      </label>
+      <input
+        type="text"
+        placeholder={placeholder}
+        className="px-4 py-2 rounded-2xl border border-textClaro bg-backgroundClaro text-sm mt-2 w-full max-w-xs"
+      />
+    </form>
+  );
+};
 
-export default Form
+export default Form;

src/app/components/Submit/Submit.tsx

@@ -14,4 +14,4 @@ const Submit: React.FC <SubmitProps> =
     )
 }
 
-export default Submit
+export default Submit;

src/app/components/Text/Text.tsx

@@ -12,4 +12,4 @@ const Text: React.FC <TextProps> = ({h1, h2, p}) => {
 }
 
 
-export default Text
+export default Text;