WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

Reset Page Format

Browse Source
This commit is contained in:
Ebube
2023-04-22 18:44:49 +01:00
parent 23a3426970
commit 425df92dba
3 changed files with 49 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AuthPages/ForgotPassword/index.jsx
+47 -33
View File
@@ -1,6 +1,6 @@
import React from "react";
import { Link } from 'react-router-dom';
import titleShape from "../../../assets/images/shape/title-shape-two.svg";
import WrenchBoard from "../../../assets/images/wrenchboard.png"
import InputCom from "../../Helpers/Inputs/InputCom";
import AuthLayout from "../AuthLayout";
@@ -10,40 +10,54 @@ export default function ForgotPassword() {
<AuthLayout
slogan="Welcome to WrenchBoard"
>
<div className="content-wrapper xl:bg-white dark:bg-dark-white xl:px-[70px] w-full sm:w-auto 2xl:px-[100px] h-[818px] rounded-xl ">
<div className="flex flex-col justify-center w-full h-full px-5">
<div className="w-full">
<div className='mb-12'>
<Link to='#'>
<img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
</Link>
</div>
<div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px] rounded-[0.475rem] sm:p-7 p-5">
<div className="flex flex-col justify-center w-full h-full px-5">
<div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
<h1 className="sm:text-5xl text-4xl font-bold sm:leading-[74px] text-dark-gray dark:text-white">
Forget Password
</h1>
<div className="shape sm:w-[377px] w-[270px] -mt-1 ml-0">
<img src={titleShape} alt="shape" />
<h1 className="text-[#181c32] font-semibold dark:text-white mb-3" style={{
fontSize: 'calc(1rem + .6vw)'
}}>
Forget Password
</h1>
<span className="text-gray-400 font-medium text-xl">Enter your email to reset your password.</span>
</div>
</div>
<div className="input-area">
<div className="input-item mb-5">
<InputCom
placeholder="example@quomodosoft.com"
label="Email Address"
name="email"
type="email"
iconName="message"
/>
</div>
<div className="signin-area mb-3.5">
<a
href="/verify-you"
className="w-full rounded-[50px] mb-5 h-[58px] text-xl text-white font-bold flex justify-center bg-purple items-center"
>
Send Code
</a>
<Link to="/"
className=" my-40 font-bold flex justify-center text-red-500 items-center"
>
Back to Home
</Link>
<div className="input-area">
<div className="input-item mb-5">
<InputCom
placeholder="Your Username/Email"
label="Email"
name="email"
type="email"
iconName="message"
/>
</div>
<div className="signin-area mb-3.5">
<div className="flex justify-center items-center gap-2">
<button
type="button"
className={`rounded-[0.475rem] mb-6 text-[1.15rem] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
>
Send Code
</button>
<button
type="button"
className={`rounded-[0.475rem] mb-6 text-[1.15rem] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem] `}
>
Cancel
</button>
</div>
{/* <a
href="/verify-you"
className="w-full rounded-[50px] mb-5 h-[58px] text-xl text-white font-bold flex justify-center bg-purple items-center"
>
Send Code
</a> */}
</div>
</div>
</div>
</div>
src/components/AuthPages/Login/index.jsx
+1 -3
View File
@@ -4,8 +4,6 @@ import { toast } from "react-toastify";
import googleLogo from "../../../assets/images/google-logo.svg";
import appleLogo from "../../../assets/images/apple-black.svg";
import facebookLogo from "../../../assets/images/facebook-4.svg";
// import titleShape from "../../../assets/images/shape/title-shape.svg";
import titleShape from "../../../assets/images/shape/login_straight_underline.svg";
import WrenchBoard from "../../../assets/images/wrenchboard.png"
import usersService from "../../../services/UsersService";
import InputCom from "../../Helpers/Inputs/InputCom";
@@ -169,7 +167,7 @@ export default function Login() {
Forgot Password
</a>
</div> */}
{loginError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">Invalid username or password- Please <Link to='/#' className='text-[#009ef7]'>reset your password</Link> or <Link to='/signup' className='text-[#009ef7]'>create a new account</Link></div>}
{loginError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-thin leading-[19.5px]">Invalid username or password- Please <Link to='/#' className='text-[#009ef7]'>reset your password</Link> or <Link to='/signup' className='text-[#009ef7]'>create a new account</Link></div>}
{msgError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">{msgError}</div>}
<div className="signin-area mb-3.5">
<div className="flex justify-center">
src/components/Helpers/Inputs/InputCom/index.jsx
+1 -1
View File
@@ -23,7 +23,7 @@ export default function InputCom({
{label}
</label>
)}
{forgotPassword && <Link href="/forgot-password" className="text-base text-[#4687ba] hover:text-[#009ef7]">Forgot Password?</Link>}
{forgotPassword && <Link to="/forgot-password" className="text-base text-[#4687ba] hover:text-[#009ef7]">Forgot Password?</Link>}
</div>
<div className="input-wrapper border border-[#f5f8fa]] dark:border-[#5e6278] w-full rounded-[0.475rem] h-[58px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ">
<input