Skip to content

Feat: Implement or Edit authentication module mobile responsiveness to match Figma design #142

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

Merged
DioChuks merged 2 commits into from
Aug 4, 2025
Merged

Feat: Implement or Edit authentication module mobile responsiveness to match Figma design #142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0e9432b
Merge pull request #2 from StarkBid/main
Jayrodri088 Aug 3, 2025
42bee8d
feat: authentication module mobile responsiveness
Jayrodri088 Aug 4, 2025
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
53 changes: 41 additions & 12 deletions app/auth/signup/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,14 @@ import { useRouter } from "next/navigation";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import Image from "next/image";
import { Nunito_Sans } from 'next/font/google';

const nunitoSans = Nunito_Sans({
subsets: ['latin'],
weight: ['300', '400', '600', '700'],
});

const signUpSchema = z.object({
email: z
.string()
Expand All @@ -30,22 +38,43 @@ const SignUp = () => {
<>
<motion.form
onSubmit={handleSubmit(onSubmit)}
className="w-full h-full flex flex-col items-center justify-start px-6 pt-20 md:w-4/5 md:mx-auto md:justify-center md:pt-0"
className={`w-full h-full flex flex-col items-center justify-start px-6 pt-12 md:w-4/5 md:mx-auto md:justify-center md:pt-0 ${nunitoSans.className}`}
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 30 }}
transition={{ duration: 0.6, ease: "easeOut" }}
>
{/* Logo */}
<motion.div
className="w-full"
className="mb-8"
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.1, duration: 0.5 }}
>
<div className="flex items-center gap-2 mb-5 sm:hidden">
<div className="w-8 h-8 bg-purple rounded-xl flex items-center justify-center">
<Image
src="/starkbid.png"
alt="StarkBid"
width={24}
height={24}
className="w-6 h-6"
/>
</div>
<span className="text-white text-xl font-bold">StarkBid</span>
</div>
</motion.div>

<motion.div
className="w-full text-center"
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2, duration: 0.5 }}
>
<h1 className="text-3xl font-bold text-left md:text-center lg:text-4xl">
<h1 className="text-2xl font-bold lg:text-4xl">
Sign Up
</h1>
<p className="text-base text-ash text-left mt-4 md:text-center">
<p className="text-base text-ash mt-4">
Please provide your email address to get started.
</p>
</motion.div>
Expand All @@ -56,7 +85,7 @@ const SignUp = () => {
animate={{ opacity: 1, scale: 1 }}
transition={{ delay: 0.4, duration: 0.5 }}
>
<div className="w-full mt-4 flex flex-col">
<div className="w-full mt-6 flex flex-col">
<label
className="font-sm text-white font-normal text-left"
htmlFor="email-input"
Expand All @@ -65,9 +94,9 @@ const SignUp = () => {
</label>
<input
{...register("email")}
className={`outline-none mt-2 border-2 shadow-[#292929] placeholder:text-ash rounded-md text-ash text-sm p-3 bg-transparent font-normal ${errors.email ? "border-red" : "border-[#292929]"
className={`outline-none mt-2 border-2 shadow-[#292929] placeholder:text-ash rounded-md text-white text-sm p-3 bg-transparent font-normal ${errors.email ? "border-red" : "border-[#292929]"
}`}
placeholder="example@gmail.com"
placeholder="Enter email address"
id="email-input"
type="email"
/>
Expand All @@ -80,25 +109,25 @@ const SignUp = () => {
</div>

<motion.div
className="w-full mt-5"
className="w-full mt-6"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.6, duration: 0.5 }}
>
<button className="w-full bg-purple text-white p-3 rounded-md">
<button className="w-full bg-purple text-white p-3 rounded-md font-medium">
Sign Up
</button>
<button
type="button"
onClick={() => {
router.push("/");
}}
className="w-full bg-deepGray text-ash p-3 rounded-md mt-5"
className="w-full bg-[#2a2a2a] text-white p-3 rounded-md mt-4 font-medium text-sm"
>
Continue as Guest
</button>

<p className="text-left text-ash text-sm font-normal mt-5 md:text-center">
<p className="text-center text-ash text-sm font-normal mt-6">
Already have an account?{" "}
<span
onClick={() => {
Expand All @@ -116,4 +145,4 @@ const SignUp = () => {
);
};

export default SignUp;
export default SignUp;
28 changes: 27 additions & 1 deletion components/auth/AccountDetected.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,12 @@
import Image from "next/image";
import { motion } from "framer-motion";
import { useRouter } from "next/navigation";
import { Nunito_Sans } from 'next/font/google';

const nunitoSans = Nunito_Sans({
subsets: ['latin'],
weight: ['300', '400', '600', '700'],
});

const fadeInUp = {
hidden: { opacity: 0, y: 30 },
Expand Down Expand Up @@ -34,8 +40,28 @@ const AccountDetected = () => {
animate="show"
exit="hidden"
variants={containerVariants}
className="w-full h-full flex flex-col items-center justify-start px-6 pt-20 md:w-4/5 md:mx-auto md:justify-center md:pt-20 pb-20"
className={`w-full h-full flex flex-col items-center justify-start px-6 pt-20 md:w-4/5 md:mx-auto md:justify-center md:pt-20 pb-20 ${nunitoSans.className}`}
>
<motion.div
className="mb-8"
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.1, duration: 0.5 }}
>
<div className="flex items-center gap-2 mb-5 sm:hidden">
<div className="w-8 h-8 bg-purple rounded-xl flex items-center justify-center">
<Image
src="/starkbid.png"
alt="StarkBid"
width={24}
height={24}
className="w-6 h-6"
/>
</div>
<span className="text-white text-xl font-bold">StarkBid</span>
</div>
</motion.div>

<motion.div className="w-full" variants={fadeInUp}>
<h1 className="text-3xl font-bold text-center lg:text-4xl">
Account Detected
Expand Down
54 changes: 42 additions & 12 deletions components/auth/SignInForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,14 @@ import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { FC } from "react";
import Image from "next/image";
import { Nunito_Sans } from 'next/font/google';

const nunitoSans = Nunito_Sans({
subsets: ['latin'],
weight: ['300', '400', '600', '700'],
});

const signUpSchema = z.object({
email: z
.string()
Expand All @@ -16,6 +24,7 @@ type SignUpFormData = z.infer<typeof signUpSchema>;
interface SignInFormProps {
setShowAccountDetected: (show: boolean) => void;
}

const SignInForm: FC<SignInFormProps> = ({ setShowAccountDetected }) => {
const {
register,
Expand All @@ -33,22 +42,43 @@ const SignInForm: FC<SignInFormProps> = ({ setShowAccountDetected }) => {
<>
<motion.form
onSubmit={handleSubmit(onSubmit)}
className="w-full h-full flex flex-col items-center justify-start px-6 pt-20 md:w-4/5 md:mx-auto md:justify-center md:pt-0"
className={`w-full h-full flex flex-col items-center justify-start px-6 pt-12 md:w-4/5 md:mx-auto md:justify-center md:pt-0 ${nunitoSans.className}`}
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 30 }}
transition={{ duration: 0.6, ease: "easeOut" }}
>
{/* Logo */}
<motion.div
className="w-full"
className="mb-8"
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.1, duration: 0.5 }}
>
<div className="flex items-center gap-2 mb-5 sm:hidden">
<div className="w-8 h-8 bg-purple rounded-xl flex items-center justify-center">
<Image
src="/starkbid.png"
alt="StarkBid"
width={24}
height={24}
className="w-6 h-6"
/>
</div>
<span className="text-white text-xl font-bold">StarkBid</span>
</div>
</motion.div>

<motion.div
className="w-full text-center"
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2, duration: 0.5 }}
>
<h1 className="text-3xl font-bold text-left md:text-center lg:text-4xl">
<h1 className="text-2xl font-bold lg:text-4xl">
Sign In
</h1>
<p className="text-base text-ash text-left mt-4 md:text-center">
<p className="text-base text-ash mt-4">
Please provide your email address to get started.
</p>
</motion.div>
Expand All @@ -59,7 +89,7 @@ const SignInForm: FC<SignInFormProps> = ({ setShowAccountDetected }) => {
animate={{ opacity: 1, scale: 1 }}
transition={{ delay: 0.4, duration: 0.5 }}
>
<div className="w-full mt-4 flex flex-col">
<div className="w-full mt-6 flex flex-col">
<label
className="font-sm text-white font-normal text-left"
htmlFor="email-input"
Expand All @@ -68,9 +98,9 @@ const SignInForm: FC<SignInFormProps> = ({ setShowAccountDetected }) => {
</label>
<input
{...register("email")}
className={`outline-none mt-2 border-2 shadow-[#292929] placeholder:text-ash rounded-md text-ash text-sm p-3 bg-transparent font-normal ${errors.email ? "border-red" : "border-[#292929]"
className={`outline-none mt-2 border-2 shadow-[#292929] placeholder:text-ash rounded-md text-white text-sm p-3 bg-transparent font-normal ${errors.email ? "border-red" : "border-[#292929]"
}`}
placeholder="example@gmail.com"
placeholder="Enter email address"
id="email-input"
type="email"
/>
Expand All @@ -83,26 +113,26 @@ const SignInForm: FC<SignInFormProps> = ({ setShowAccountDetected }) => {
</div>

<motion.div
className="w-full mt-5"
className="w-full mt-6"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.6, duration: 0.5 }}
>
<button className="w-full bg-purple text-white p-3 rounded-md">
<button className="w-full bg-purple text-white p-3 rounded-md font-medium">
Sign In
</button>
<button
type="button"
onClick={() => {
router.push("/");
}}
className="w-full bg-deepGray text-ash p-3 rounded-md mt-5"
className="w-full bg-[#2a2a2a] text-white p-3 rounded-md mt-4 font-medium"
>
Continue as Guest
</button>

<p className="text-left text-ash text-sm font-normal mt-5 md:text-center">
Don&apos;t have an account?&apos;
<p className="text-center text-ash text-sm font-normal mt-6">
Don&apos;t have an account?{' '}
<span onClick={() => {
router.push("/auth/signup")
}} className="text-purple cursor-pointer">Sign Up</span>
Expand Down
Loading