Apply Color Combination

pu9052473 · Jul 16, 2024 · e69a9cd · e69a9cd
1 parent 0109e78
commit e69a9cd
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 37 deletions.
diff --git a/src/app/CustomerDashboard/MyProfile/page.tsx b/src/app/CustomerDashboard/MyProfile/page.tsx
@@ -1,21 +1,27 @@
 "use client";
 
 import { useEffect, useState } from "react";
+
 import CustomerDashboardBox from "../../../Components/CustomerDashboardBox";
+
 import { User } from "@/types.index";
+
 import { Button } from "@mui/material";
-import Link from "next/link";
 
+import Link from "next/link";
 
 const page = () => {
     const [userData, setUserData] = useState<User>({});
 
     useEffect(() => {
         const UserFromLocalStorage = localStorage.getItem("User");
-        const user = JSON.parse(UserFromLocalStorage)
+
+        const user = JSON.parse(UserFromLocalStorage);
+
         console.log(user);
-        setUserData(user)
-    }, [])
+
+        setUserData(user);
+    }, []);
 
     const displayedUserData = Object.fromEntries(
         Object.entries(userData).filter(
@@ -44,6 +50,7 @@ const page = () => {
                             </ul>
                         </div>
                     </div>
+
                     <Link href="/CustomerDashboard/MyProfile/EditProfile">
                         <Button variant="contained">Edit Profile</Button>
                     </Link>

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -2,3 +2,8 @@
 @tailwind components;
 @tailwind utilities;
 
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
diff --git a/src/components/CustomerDashboardBox.tsx b/src/components/CustomerDashboardBox.tsx
@@ -11,18 +11,18 @@ const page = () => {
   const userObject: User = JSON.parse(user);
   const pathname = usePathname();
 
-  const activePathClassName = "text-gray-950 font-medium";
+  const activePathClassName = "text-gray-950 font-medium bg-theme2 ";
 
   return (
     <>
-      <aside className="w-1/5 bg-white p-4 drop-shadow-md ">
+      <aside className="w-1/5 bg-theme3 p-7 drop-shadow-md ">
         <div className="text-center my-4 flex flex-col gap-4">
           <h2 className=" font-bold text-gray-900">Customer Profile</h2>
 
           <img
             src={userObject.photo}
             alt="User Avatar"
-            className="w-24 h-24 rounded-full mx-auto"
+            className="w-20 h-20 rounded-full mx-auto"
           />
 
           <h3 className="text-xl font-semibold text-gray-900">
@@ -36,7 +36,7 @@ const page = () => {
             <Link
               key={items.title}
               href={items.href}
-              className={`flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 ${pathname === `${items.href}` ? `${activePathClassName}` : ""
+              className={`flex items-center px-4 rounded-lg py-2 text-gray-700 hover:bg-theme2 ${pathname === `${items.href}` ? `${activePathClassName}` : ""
                 }`}
             >
               {items.icon}

diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
- 
+
 import React, { useEffect, useState } from "react";
 
 import { usePathname } from "next/navigation";
@@ -50,43 +50,33 @@ const NavBar = () => {
     const navBarLinksClassName =
         "text-gray-600 flex items-center gap-1 hover:text-gray-950 transition-colors duration-200";
 
-    const activePathClassName = "text-gray-950 font-medium";
+    const activePathClassNameNavBar = "text-gray-950 font-medium";
+    const activePathClassNameHemBurg = "text-gray-950 font-medium bg-theme2";
 
     return (
-        <div className="h-20 w-screen bg-white flex justify-evenly items-center drop-shadow-md">
+        <div className="h-20 w-screen bg-theme3 flex justify-evenly items-center">
             <Link onClick={setFalse} href="/" className="text-2xl font-bold w-1/10 ">
                 Nayi Dukaan
             </Link>
 
             <div className="categories flex items-center gap-7 w-2/3">
-                <div className="relative w-1/2 flex items-evenly rounded-lg bg-gray-100 focus:border-gray-500 border-gray-300">
-                    <button className=" w-1/12 place-content-center rounded-lg bg-gray-100 focus:outline-none">
+                <div className="relative w-1/2 flex items-evenly rounded-lg bg-theme2 focus:border-gray-500 border-gray-300">
+                    <button className=" w-1/12 place-content-center rounded-lg bg-theme2 focus:outline-none">
                         <SearchRoundedIcon className="h-5 w-5" />
                     </button>
 
                     <input
                         type="text"
                         placeholder="Search for products"
                         onClick={setFalse}
-                        className="w-full py-2 px-4 bg-gray-100 focus:outline-none rounded-lg "
+                        className="w-full py-2 px-4 bg-theme2 focus:outline-none rounded-lg "
                     />
                 </div>
 
-                <Link
-                    href="/CustomerDashboard/MyProfile/Wishlist"
-                    onClick={setFalse}
-                    className={`${navBarLinksClassName} ${pathname === "/CustomerDashboard/MyProfile/Wishlist"
-                        ? `${activePathClassName}`
-                        : ""
-                        }`}
-                >
-                    Wishlist
-                </Link>
-
                 <Link
                     href="/BecomeSellerForm"
                     onClick={setFalse}
-                    className={`${navBarLinksClassName} ${pathname === "/BecomeSellerForm" ? `${activePathClassName}` : ""
+                    className={`${navBarLinksClassName} ${pathname === "/BecomeSellerForm" ? `${activePathClassNameNavBar}` : ""
                         }`}
                 >
                     <StorefrontRoundedIcon className="h-5 w-5" />
@@ -106,13 +96,13 @@ const NavBar = () => {
                         </div>
 
                         {menuOpen && (
-                            <div className="absolute top-10 right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10">
+                            <div className="absolute top-10 right-0 mt-2 w-60 p-2 bg-white rounded-lg shadow-lg z-10">
                                 {NavBarHemburgMenuAPI.map((item) => {
                                     return (
                                         <Link
                                             onClick={handleMenuToggle}
                                             href={item.href}
-                                            className={` ${navBarLinksClassName}  px-4 py-2 flex gap-2 hover:bg-gray-100 ${pathname === item.href ? `${activePathClassName}` : ""
+                                            className={` ${navBarLinksClassName}  px-4 py-2 flex gap-2 hover:bg-theme2 rounded-lg ${pathname === item.href ? `${activePathClassNameHemBurg}` : ""
                                                 }`}
                                             key={item.href}
                                         >
@@ -126,7 +116,7 @@ const NavBar = () => {
                                 <Link
                                     href="/Logout"
                                     onClick={handleSetUserNull}
-                                    className="text-red-600 item-center transition-colors duration-200 px-4 py-2 flex gap-2 hover:bg-gray-100 "
+                                    className="text-red-600 item-center transition-colors duration-200 px-4 py-2 rounded-lg flex gap-2 hover:bg-theme2 "
                                 >
                                     <LogoutIcon className=" h-5 w-5 cursor-pointer" />
                                     Logout

diff --git a/src/components/SellerDashboardBox.tsx b/src/components/SellerDashboardBox.tsx
@@ -9,18 +9,18 @@ import { usePathname } from "next/navigation";
 const page = () => {
   const pathname = usePathname();
 
-  const activePathClassName = "text-gray-950 font-medium";
+  const activePathClassName = "text-gray-950 font-medium bg-theme2";
 
   return (
     <>
-      <aside className="w-1/5 bg-white p-4 drop-shadow-md ">
+      <aside className="w-1/5 bg-theme3 p-7 drop-shadow-md ">
         <div className="text-center my-4 flex flex-col gap-4">
           <h2 className=" font-bold text-gray-900">Seller Profile</h2>
 
           <img
             src="https://via.placeholder.com/150"
             alt="User Avatar"
-            className="w-24 h-24 rounded-full mx-auto"
+            className="w-20 h-20 rounded-full mx-auto"
           />
 
           <h3 className="text-xl font-semibold text-gray-900">
@@ -34,7 +34,7 @@ const page = () => {
             <Link
               key={items.title}
               href={items.href}
-              className={`flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 ${pathname === `${items.href}` ? `${activePathClassName}` : ""
+              className={`flex items-center px-4 rounded-lg py-2  text-gray-700 hover:bg-theme2 ${pathname === `${items.href}` ? `${activePathClassName}` : ""
                 }`}
             >
               {items.icon}

diff --git a/src/components/firebaselogin.tsx b/src/components/firebaselogin.tsx
@@ -4,8 +4,11 @@ import { useEffect } from "react";
 
 import { auth, db, GoogleAuthProvider } from "../firebase/config";
 
-
-import { onAuthStateChanged, signInWithEmailAndPassword, signInWithPopup } from "firebase/auth";
+import {
+    onAuthStateChanged,
+    signInWithEmailAndPassword,
+    signInWithPopup,
+} from "firebase/auth";
 
 import { ToastContainer, toast } from "react-toastify";
 
@@ -14,7 +17,9 @@ import "react-toastify/dist/ReactToastify.css";
 import "firebaseui/dist/firebaseui.css";
 
 import { FcGoogle } from "react-icons/fc";
+
 import Link from "next/link";
+
 import { addDoc, collection, getDocs, query, where } from "firebase/firestore";
 
 const FirebaseLogin = () => {
@@ -31,20 +36,28 @@ const FirebaseLogin = () => {
     const handleEmailLogin = async () => {
         const email = (document.getElementById("email") as HTMLInputElement).value;
 
-        const password = (document.getElementById("password") as HTMLInputElement).value;
+        const password = (document.getElementById("password") as HTMLInputElement)
+            .value;
 
         try {
             signInWithEmailAndPassword(auth, email, password)
                 .then((userCredential) => {
                     const user = userCredential?.user;
+
                     console.log(user);
+
                     localStorage.setItem("User", JSON.stringify(user));
+
                     toast.success("Logged in succesfull");
+
                     window.location.href = "/";
                 })
+
                 .catch((error) => {
                     const errorCode = error.code;
+
                     const errorMessage = error.message;
+
                     toast.error(errorCode, errorMessage);
                 });
         } catch (error) {
@@ -55,22 +68,35 @@ const FirebaseLogin = () => {
     const handleGoogleLogin = async () => {
         try {
             const result = await signInWithPopup(auth, new GoogleAuthProvider());
+
             const userObject = {
                 name: result.user.displayName || "",
+
                 email: result.user.email || "",
+
                 address: "",
+
                 pincode: "",
+
                 dateOfBirth: "",
+
                 city: "",
+
                 state: "",
+
                 country: "",
+
                 phone: "",
+
                 isSeller: false,
+
                 photo: result.user.photoURL || "",
+
                 uid: result.user.uid,
             };
 
             const userWithId = { ...userObject };
+
             localStorage.setItem("User", JSON.stringify(userWithId));
         } catch (error) {
             console.error("Error signing in with Google", error);
@@ -114,7 +140,9 @@ const FirebaseLogin = () => {
                     <FcGoogle className="inline-block ml-2" /> Login with Google{" "}
                 </button>
 
-                <Link className="text-blue-400 underline mt-5" href="/Signup">Or Signup</Link>
+                <Link className="text-blue-400 underline mt-5" href="/Signup">
+                    Or Signup
+                </Link>
 
                 <ToastContainer />
             </div>

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -8,6 +8,10 @@ const config: Config = {
   ],
   theme: {
     extend: {
+      colors: {
+        theme2: "#e9eef6",
+        theme3: "#f8fafd"
+      },
       backgroundImage: {
         "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
         "gradient-conic":
@@ -17,4 +21,5 @@ const config: Config = {
   },
   plugins: [],
 };
+
 export default config;