Skip to content
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

Jump to bottom

added UI-toggling on cart, wishlist, contact and auth pages #717

Merged
merged 1 commit into from
Oct 16, 2024
Merged

added UI-toggling on cart, wishlist, contact and auth pages #717

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
48 changes: 24 additions & 24 deletions Benjamin/app/(auth)/login/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const Login = () => {
toast.error(error);
setError("");
}

// IMP: Dont remove the below comments!!!!
// const handleSubmit = async (e: React.FormEvent) => {
// setloading(true)
// e.preventDefault();
Expand All @@ -43,27 +43,27 @@ const Login = () => {
const [isResetOpen, setIsResetOpen] = useState(false);

return (
<>
<div className="dark:bg-DarkGray ">
{/* <div className="bg-slate-700 h-100 w-100">{switchCss ? "1" : "0"}</div>
<Button onClick={() => setSwitchCss(!switchCss)}>Toggle CSS</Button> */}
<div className="flex h-screen w-full items-center justify-center">
<div className="flex rounded-lg justify-between shadow-xl relative lg:h-4/6 lg:w-2/4 border overflow-hidden">
<div className="flex rounded-2xl justify-between shadow-xl shadow-black dark:shadow-Green relative lg:h-4/6 lg:w-2/4 border overflow-hidden">
{/* First background div */}
<div
className={`w-full h-full absolute left-60 bottom-[9.5rem] rotate-45 transition-opacity duration-1000 ease-in-out bg-gradient-to-r from-Green to-Yellow ${
className={`w-full h-full absolute left-60 bottom-[9.5rem] rotate-45 transition-opacity duration-1000 ease-in-out bg-customTeal dark:bg-gradient-to-r from-Green to-Yellow ${
switchCss ? "opacity-100" : "opacity-0"
}`}
></div>
{/* Second background div */}
<div
className={`w-full h-full absolute right-60 bottom-[9.5rem] -rotate-45 transition-opacity duration-1000 ease-in-out bg-gradient-to-r from-Green to-Yellow ${
className={`w-full h-full absolute right-60 bottom-[9.5rem] -rotate-45 transition-opacity duration-1000 ease-in-out bg-customTeal dark:bg-gradient-to-r from-Green to-Yellow ${
!switchCss ? "opacity-100" : "opacity-0"
}`}
></div>

{switchCss && !isResetOpen && (
<div className="flex flex-col z-10 items-center justify-start pt-24 pr-14 gap-4 w-2/4">
<div className="font-nunito text-4xl text-Green font-extrabold">
<div className="font-nunito text-4xl text-customTeal dark:text-Green font-extrabold">
Login
</div>
<form
Expand All @@ -79,7 +79,7 @@ const Login = () => {
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<User className="h-7 w-7 text-Yellow" />
<User className="h-7 w-7 text-customTeal dark:text-Yellow" />
</div>
<div className="flex items-center w-4/5 justify-center">
<Input
Expand All @@ -89,26 +89,26 @@ const Login = () => {
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<Lock className="h-7 w-7 text-Yellow" />
<Lock className="h-7 w-7 text-customTeal dark:text-Yellow" />
</div>
<Button
type="submit"
disabled={loading}
className="rounded-full bg-Green font-bold h-10 w-4/5 disabled"
className="rounded-full bg-customTeal dark:bg-Green font-bold h-10 w-4/5 disabled"
>
{loading?<Spinner/>:"Login"}
</Button>
</form>
<div
className="text-Green cursor-pointer"
className="text-customTeal dark:text-Green cursor-pointer"
onClick={() => setIsResetOpen(!isResetOpen)}
>
Forgot Password?
</div>
<div className="flex items-center justify-center gap-2">
<div className="flex items-center dark:text-gray-500 justify-center gap-2">
Don&apos;t have an account?
<div
className="text-Green cursor-pointer"
className="text-customTeal dark:text-Green cursor-pointer"
onClick={() => setSwitchCss(!switchCss)}
>
{" "}
Expand All @@ -120,7 +120,7 @@ const Login = () => {

{switchCss && isResetOpen && (
<div className="flex flex-col z-10 items-center justify-start pt-32 pr-14 gap-4 w-2/4">
<div className="font-nunito text-4xl font-extrabold">
<div className="font-nunito text-4xl text-customTeal dark:text-Green font-extrabold">
Forgot Password
</div>
<div className="flex items-center gap-2 w-4/5 justify-center">
Expand All @@ -129,13 +129,13 @@ const Login = () => {
type="text"
placeholder="Email"
/>
<Mail className="h-7 w-7 text-Yellow" />
<Mail className="h-7 w-7 text-customTeal dark:text-Yellow" />
</div>
<Button className="rounded-full font-bold h-10 w-4/5 bg-Green">
<Button className="rounded-full font-bold h-10 w-4/5 bg-customTeal dark:bg-Green">
Send reset link
</Button>
<div
className="text-Green cursor-pointer"
className="text-customTeal dark:text-Green cursor-pointer"
onClick={() => setIsResetOpen(!isResetOpen)}
>
Back to Login
Expand All @@ -159,7 +159,7 @@ const Login = () => {

{!switchCss && (
<div className="flex flex-col z-10 items-center justify-start pt-24 pl-14 gap-4 w-2/4">
<div className="font-nunito text-4xl text-Green font-extrabold">
<div className="font-nunito text-4xl text-customTeal dark:text-Green font-extrabold">
Sign Up
</div>
<div className="flex items-center w-4/5 justify-center">
Expand All @@ -168,31 +168,31 @@ const Login = () => {
type="text"
placeholder="Username"
/>
<User className="h-7 w-7 text-Yellow" />
<User className="h-7 w-7 text-customTeal dark:text-Yellow" />
</div>
<div className="flex items-center w-4/5 justify-center">
<Input
className="rounded-full"
type="password"
placeholder="Enter Password"
/>
<Lock className="h-7 w-7 text-Yellow" />
<Lock className="h-7 w-7 text-customTeal dark:text-Yellow" />
</div>
<div className="flex items-center w-4/5 justify-center">
<Input
className="rounded-full"
type="password"
placeholder="Confirm Password"
/>
<Lock className="h-7 w-7 text-Yellow" />
<Lock className="h-7 w-7 text-customTeal dark:text-Yellow" />
</div>
<Button className="rounded-full h-10 w-4/5 font-bold bg-Green">
<Button className="rounded-full h-10 w-4/5 font-bold bg-customTeal dark:bg-Green">
Sign Up
</Button>
<div className="flex items-center justify-center gap-2">
<div className="flex items-center dark:text-gray-500 justify-center gap-2">
Already have an account?
<div
className="text-Green cursor-pointer"
className="text-customTeal dark:text-Green cursor-pointer"
onClick={() => setSwitchCss(!switchCss)}
>
{" "}
Expand All @@ -204,7 +204,7 @@ const Login = () => {
</div>
</div>
<Toaster />
</>
</div>
);
};

Expand Down
15 changes: 8 additions & 7 deletions Benjamin/app/Cart/components/cart-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,14 @@ const CartItem:React.FC<orderItemProps> = ({
// }

return (
<li className="flex py-6 border-b">
<div className="relative h-24 w-24 rounded-md overflow-hidden sm:h-48 sm:w-48">
<li className="flex py-6 h-40 border-b">
<div className="relative rounded-md overflow-hidden sm:h-48 sm:w-48">
<Image
fill
width={1000}
height={1000}
src={item.image}
alt="product image"
className="object-cover object-center"
className="object-cover h-32 w-32 rounded-lg object-center"
/>
</div>
<div className="relative ml-4 flex flex-1 flex-col justify-between sm:ml-6">
Expand All @@ -33,12 +34,12 @@ const CartItem:React.FC<orderItemProps> = ({
</div>
<div className="relative pr-9 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:pr-0">
<div className="flex justify-between">
<p className="text-lg font-semibold text-black">
<p className="text-lg font-semibold dark:text-gray-200">
{item.name}
</p>
</div>
<div className="mt-1 flex text-sm">
<p className="text-gray-500">
<p className="text-gray-500 dark:text-gray-200">
{/* haha */}
{item.variant}
</p>
Expand All @@ -47,7 +48,7 @@ const CartItem:React.FC<orderItemProps> = ({
{item.count}
</p>
</div>
<div>₹{item.price}</div>
<div className="dark:text-gray-200">₹{item.price}</div>

</div>
</div>
Expand Down
9 changes: 5 additions & 4 deletions Benjamin/app/Cart/components/summary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,12 @@ const Summary = () => {
lg:col-span-5
lg:mt-0
lg:p-8
dark:bg-gray-700
"
>
<div>
<h2 className="text-lg font-bold text-Green pb-2">Order Summary</h2>
<h3 className="text-m font-medium text-gray-900 py-4 border-t">Your Details</h3>
<div >
<h2 className="text-lg font-bold dark:bg-gray-700 text-customTeal dark:text-Green pb-2">Order Summary</h2>
<h3 className="text-m font-medium py-4 border-t">Your Details</h3>
{/* Each Inputbox component handles its respective field */}
<div className="lg:grid gap-2 grid-cols-2">
<Input
Expand Down Expand Up @@ -68,7 +69,7 @@ const Summary = () => {
₹{566}
</div>
</div>
<Button className="w-full bg-Green mt-6">
<Button className="w-full bg-customTeal dark:bg-Green mt-6">
Checkout
</Button>
</div>
Expand Down
4 changes: 2 additions & 2 deletions Benjamin/app/Cart/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,9 +60,9 @@ const CartPage = () => {
if (!isMounted) return null;

return (
<div className="bg-white">
<div className="dark:bg-DarkGray">
<div className="px-4 py-5 sm:px-6 lg:px-8">
<h1 className="text-3xl font-bold text-Green">Shopping Cart</h1>
<h1 className="text-3xl font-bold text-customTeal dark:text-Green">Shopping Cart</h1>
<div className="mt-5 lg:grid lg:grid-cols-12 lg:items-start gap-x-12">
<div className="lg:col-span-7">
{/* {cart.items.length===0&&<NoResults/>} */}
Expand Down
32 changes: 16 additions & 16 deletions Benjamin/app/Contact/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,61 +4,61 @@ import { Clock, Mail, MapPin, Phone } from "lucide-react";

const Contact = () => {
return (
<div className="mb-10">
<div className="pb-10 dark:bg-DarkGray">
<div className="h-full">
<div className="text-white flex items-center justify-center bg-gradient-to-r from-Green to-Yellow h-full mb-20 p-24">
<div className="text-white flex items-center justify-center bg-customTeal dark:bg-gradient-to-r from-Green to-Yellow h-full pb-20 p-24">
<div className="text-4xl pt-5 lg:pt-0 lg:text-7xl text-center text-gray-200 lg:text-start font-extrabold font-handlee">
Contact Us</div>
</div>
</div>
<SeperatorHeading label="Get In Touch" />
<div className="text-Green text-3xl px-5 text-center lg:px-0 lg:text-center mb-10 lg:text-5xl font-bold font-handlee">
<div className="text-customTeal dark:text-Green text-3xl px-5 text-center lg:px-0 lg:text-center mb-10 lg:text-5xl font-bold font-handlee">
Contact Us For Any Query
</div>

<div className="flex flex-col px-10 lg:grid lg:grid-cols-12 lg:gap-5 lg:px-32">
<div className="col-span-7"><ContactUsFrom/></div>
<div className="col-span-5">
<div className="text-md text-gray-200 mb-10">
<div className="text-md dark:text-gray-200 mb-10">
Have a question or need assistance? We&apos;re here to help! Reach out to
us for any inquiries regarding your orders, deliveries, or shopping
experience with EzyShop. We&apos;re happy to assist you with all your
needs.
</div>
<div className="flex items-start flex-col gap-4 justify-center">
<div className="flex gap-7 items-center justify-center">
<div className="rounded-full h-10 w-10 bg-Yellow flex items-center justify-center">
<MapPin className="h-5 w-5 text-Green" />
<div className="rounded-full h-10 w-10 bg-customTeal dark:bg-Yellow flex items-center justify-center">
<MapPin className="h-5 w-5 dark:text-Green" />
</div>
<div className="flex flex-col gap-2">
<div className="text-Green text-xl font-handlee font-bold ">Address</div>
<div className="text-customTeal dark:text-Green text-xl font-handlee font-bold ">Address</div>
<div className="text-md text-gray-500 font-nutino ">Jaipur, Rajisthan</div>
</div>
</div>
<div className="flex gap-7 items-center justify-center">
<div className="rounded-full h-10 w-10 bg-Yellow flex items-center justify-center">
<Mail className="h-5 w-5 text-Green" />
<div className="rounded-full h-10 w-10 bg-customTeal dark:bg-Yellow flex items-center justify-center">
<Mail className="h-5 w-5 dark:text-Green" />
</div>
<div className="flex flex-col gap-2">
<div className="text-Green text-xl font-handlee font-bold ">Email</div>
<div className=" text-customTeal dark:text-Green text-xl font-handlee font-bold ">Email</div>
<div className="text-md text-gray-500 font-nutino ">ezyshop@gmail.com</div>
</div>
</div>
<div className="flex gap-7 items-center justify-center">
<div className="rounded-full h-10 w-10 bg-Yellow flex items-center justify-center">
<Phone className="h-5 w-5 text-Green" />
<div className="rounded-full h-10 w-10 bg-customTeal dark:bg-Yellow flex items-center justify-center">
<Phone className="h-5 w-5 dark:text-Green" />
</div>
<div className="flex flex-col gap-2">
<div className="text-Green text-xl font-handlee font-bold ">Phone</div>
<div className=" text-customTeal dark:text-Green text-xl font-handlee font-bold ">Phone</div>
<div className="text-md text-gray-500 font-nutino ">+91 7739317870</div>
</div>
</div>
<div className="flex gap-7 items-center justify-center">
<div className="rounded-full h-10 w-10 bg-Yellow flex items-center justify-center">
<Clock className="h-5 w-5 text-Green" />
<div className="rounded-full h-10 w-10 bg-customTeal dark:bg-Yellow flex items-center justify-center">
<Clock className="h-5 w-5 dark:text-Green" />
</div>
<div className="flex flex-col gap-2">
<div className="text-Green text-xl font-handlee font-bold ">Opening Hours</div>
<div className="text-customTeal dark:text-Green text-xl font-handlee font-bold ">Opening Hours</div>
<div className="text-md text-gray-500 font-nutino ">Our platform is available 24/7. For customer support</div>
</div>
</div>
Expand Down
8 changes: 4 additions & 4 deletions Benjamin/app/WishList/components/wishlistItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,13 @@ interface wishlistItemProps{
// WishlistItem.js
const WishlistItem:React.FC<wishlistItemProps> = ({ item }) => {
return (
<div className="border max-w-[400px] p-4 rounded-lg shadow-md hover:shadow-lg transition">
<div className="border dark:border-gray-200 max-w-[400px] p-4 rounded-lg shadow-md hover:shadow-lg transition">
<Image width={1000} height={1000} src={item.image} alt={item.name} className="w-full h-40 object-cover rounded" />
<h2 className="mt-2 text-xl font-semibold">{item.name}</h2>
<h2 className="mt-2 text-xl dark:text-gray-200 font-semibold">{item.name}</h2>
<p className="text-lg text-gray-600">₹{item.price}</p>
<div className="mt-4 flex justify-between">
<Button variant="outline">Remove</Button>
<Button variant={"default"} className="bg-Green">Move to Cart</Button>
<Button variant="outline" className="dark:text-gray-200">Remove</Button>
<Button variant={"default"} className= "bg-customTeal dark:bg-Green">Move to Cart</Button>
</div>
</div>
);
Expand Down
6 changes: 3 additions & 3 deletions Benjamin/app/WishList/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ const wishlistItems = [

const Wishlist = () => {
return (
<div className="h-full mb-10">
<div className="text-white flex items-center justify-center bg-gradient-to-r from-Green to-Yellow h-full mb-20 p-24">
<div className="h-full dark:bg-DarkGray pb-10">
<div className="text-white flex items-center justify-center bg-customTeal dark:bg-gradient-to-r from-Green to-Yellow h-full mb-20 p-24">
<div className="text-4xl pt-5 lg:pt-0 lg:text-7xl text-center text-gray-200 lg:text-start font-extrabold font-handlee">
Wish List
</div>
Expand All @@ -35,7 +35,7 @@ const Wishlist = () => {
) : (
<div className="text-center text-gray-500">
<p>Your wishlist is empty!</p>
<Button className="mt-4">Continue Shopping</Button>
<Button className=" bg-Green mt-4">Continue Shopping</Button>
</div>
)}
</div>
Expand Down
2 changes: 1 addition & 1 deletion Benjamin/components/contactUsForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const ContactUsFrom = () => {
<Input placeholder="Your Email"/>
<Input placeholder="Your Subject"/>
<Textarea rows={5} placeholder="Message"/>
<Button variant="default" size={"lg"} className="bg-Green mb-10 lg:mb-0 text-xl rounded-full">
<Button variant="default" size={"lg"} className="bg-customTeal dark:bg-Green mb-10 lg:mb-0 text-xl rounded-full">
Send Message
</Button>
</div>
Expand Down