Skip to content

Login UI update #34

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Afinjuomo wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Login UI update #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9f85ce3
updated login
Afinjuomo Feb 8, 2024
86633eb
Completed merge
Afinjuomo Feb 14, 2024
4632112
ui updated
Afinjuomo Feb 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions apps/Client/src/pages/Auth/Images/Frame 8338.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions apps/Client/src/pages/Auth/Images/image 4.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
41 changes: 29 additions & 12 deletions apps/Client/src/pages/Auth/Login/LoginPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@ import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import Button from "../../../components/Button";
import riderLogo from "../Images/Logo.png";
import riderPhoto from "../Images/image 4.png";
import riderPhoto from "../Images/Frame 8338.svg";
import emailIcon from "../Images/Icon (1).png"; // Import email icon image
import passwordIcon from "../Images/Vector (1).png";
import { useNavigate } from "react-router-dom";

type LoginFormValues = {
Expand Down Expand Up @@ -59,13 +61,16 @@ const LoginPage: React.FC = () => {

return (
<div className="flex flex-col md:flex-row h-screen bg-white">
<div className="w-full hidden md:flex md:w-4/6 relative bg-cover bg-center h-80 md:h-screen overflow-hidden">
<img
src={riderPhoto}
alt="bikeman"
className="w-full h-full object-cover"
/>
<div className="absolute inset-0 flex items-center justify-center text-white text-center bg-black bg-opacity-50">
<div className="hidden md:flex md:w-4/6 relative h-80 md:h-screen overflow-hidden">

<img
src={riderPhoto}
alt="bikeman"
className="w-full h-full object-cover"
/>


{/* <div className="absolute inset-0 flex items-center justify-center text-white text-center bg-black bg-opacity-50">
<div>
<p className="text-lg md:text-xl lg:text-4xl font-bold mt-[720px]">
Delivery service just got <br />
Expand All @@ -74,7 +79,7 @@ const LoginPage: React.FC = () => {
<span style={{ color: "orange" }}>Ryder</span>
</p>
</div>
</div>
</div> */}
</div>

<div className="w-full md:w-1/2 p-4 md:p-8 flex flex-col justify-center">
Expand All @@ -88,7 +93,7 @@ const LoginPage: React.FC = () => {

<form
onSubmit={handleSubmit(onSubmit)}
className="max-w-md mx-auto mb-60"
className="max-w-md mx-auto mb-60 mr-60"
>
<div className="text-xl font-bold pb-10 mr-40">Login</div>

Expand All @@ -97,11 +102,17 @@ const LoginPage: React.FC = () => {
className="block text-gray-700 text-sm font-bold mb-2"
htmlFor="email"
>
{/* Render email icon */}
<img
src={emailIcon}
alt="Email Icon"
className="absolute top-2/4 mt-3.5 left-3 transform -translate-y-1/2"
/>
Email
</label>
<input
{...register("email")}
className="w-full px-3 py-2 text-gray-700 border rounded-md focus:outline-none focus:shadow-outline"
className="w-full px-10 py-2 text-gray-700 border rounded-md focus:outline-none focus:shadow-outline"
id="email"
type="text"
placeholder="Enter your Email"
Expand All @@ -114,11 +125,17 @@ const LoginPage: React.FC = () => {
className="block text-gray-700 text-sm font-bold mb-2"
htmlFor="password"
>
{/* Render password icon */}
<img
src={passwordIcon}
alt="Password Icon"
className="absolute top-2/4 mt-3.5 left-3 transform -translate-y-1/2"
/>
Password
</label>
<input
{...register("password")}
className="w-full px-3 py-2 text-gray-700 border rounded-md focus:outline-none focus:shadow-outline"
className="w-full px-10 py-2 text-gray-700 border rounded-md focus:outline-none focus:shadow-outline"
id="password"
type="password"
placeholder="Enter your password"
Expand Down