Merge pull request #22 from bhagirathpaliyal/Add-Products

bhagirathpaliyal · web-flow · commit d39039046c7b · 2024-08-13T17:25:36.000+05:30
add dynamic colors
diff --git a/src/components/AllProducts.jsx b/src/components/AllProducts.jsx
@@ -22,7 +22,7 @@ const skeleton=[1,2,3,4,5,6,7,8,9,10,11,12]
   }, [user, dispatch]);
 
   return (
-    <div className="bg-[#F1F1F1] flex flex-col pt-[50px]">
+    <div className="bg-secondary flex flex-col pt-[50px]">
       
 
       {loading ? (
@@ -40,7 +40,7 @@ const skeleton=[1,2,3,4,5,6,7,8,9,10,11,12]
             ))
           ) : (
            
-            <div className="text-white">No products availableee</div>
+            <div className="text-white">No products available</div>
           )}
         </div>
       )}
diff --git a/src/components/Electronics/Electronics.jsx b/src/components/Electronics/Electronics.jsx
@@ -18,7 +18,7 @@ function Electronics(){
   }, []);
 
     return(
-        <div className="bg-[#0055E9] flex flex-col gap-[50px] ">
+        <div className="bg-primary flex flex-col gap-[50px] ">
       <H_section0 />
 
       <div className="flex flex-wrap gap-[20px] justify-center">
diff --git a/src/components/Header/Loginbtn.jsx b/src/components/Header/Loginbtn.jsx
@@ -19,7 +19,7 @@ const Loginbtn = () => {
         {user ? (<div className="flex gap-5 items-center ">
           <Link to='Profile'>
 
-            <div className="bg-[#F1F1F1] px-[10px] py-[5px] rounded-[50%] text-black" >{user?.email[0]}</div>
+            <div className="bg-secondary px-[10px] py-[5px] rounded-[50%] text-black" >{user?.email[0]}</div>
           </Link>
           <div>
             {!user?.isMerchant ? <Link to={'/Cart'}>
diff --git a/src/components/Header/ResponsiveNav.jsx b/src/components/Header/ResponsiveNav.jsx
@@ -27,7 +27,7 @@ useEffect(() => {
       </button>
 
       <div
-        className={`duration-300 fixed top-[64px] w-[50%] h-[100%] bg-[#0055E9] opacity-80 
+        className={`duration-300 fixed top-[64px] w-[50%] h-[100%] bg-primary opacity-80 
          ${isOpen ? "left-[0px]" : "left-[-100%]"}`}
       >
         <ul
diff --git a/src/components/Home/H_section1.jsx b/src/components/Home/H_section1.jsx
@@ -24,7 +24,7 @@ function H_section1() {
 
 
         <div className="flex flex-col items-center ">
-        <div className="border-b-[2px] border-solid border-[#0055E9] mt-[40px] rounded-[7px] ">
+        <div className="border-b-[2px] border-solid border-primary mt-[40px] rounded-[7px] ">
           <Link to="/AllProducts">
             <h1 className="text-[30px] md:text-[40px] text-black animate-bounce ">
               Shop Now!
diff --git a/src/components/Home/H_section2.jsx b/src/components/Home/H_section2.jsx
@@ -20,7 +20,7 @@ function H_section2() {
   }, []);
 
   return (
-    <div id="section2" className="bg-[#0055E9] flex flex-col gap-[50px] items-center justify-center text-white p-[50px]">
+    <div id="section2" className="bg-primary flex flex-col gap-[50px] items-center justify-center text-white p-[50px]">
       <div className="text-[30px] md:text-[40px] ">Our collection</div>
       <div className="flex w-[100%] justify-evenly flex-wrap">
 
diff --git a/src/components/Home/H_section3.jsx b/src/components/Home/H_section3.jsx
@@ -2,7 +2,7 @@ import About from './../../assets/About.jpg'
 
 function H_section3() {
   return (
-    <div id='section3' className="bg-[#F1F1F1] flex flex-col items-center gap-[50px] text-black p-[50px] ">
+    <div id='section3' className="bg-secondary flex flex-col items-center gap-[50px] text-black p-[50px] ">
       <div className="text-[30px] md:text-[40px] ">About Us</div>
       <div className='w-[100%] flex justify-around gap-[20px]  flex-wrap'>
          <div className='min-h-[300px] max-w-[500px] rounded-[10px] overflow-hidden'>
diff --git a/src/components/Home/H_section4.jsx b/src/components/Home/H_section4.jsx
@@ -3,7 +3,7 @@
 function H_section4(){
 
     return(
-        <div id="section4" className="bg-[#0055E9] flex flex-col items-center text-white p-[50px] gap-[50px]" >
+        <div id="section4" className="bg-primary flex flex-col items-center text-white p-[50px] gap-[50px]" >
     <div className="text-[30px] md:text-[40px] text-center">Our Customer service</div>
        <div className="flex justify-evenly w-[100%] text-center gap-[20px] flex-wrap text-[14px] md:text-[18px]">
         <div className="flex flex-col items-center w-[200px] gap-[20px] ">
diff --git a/src/components/Home/H_section5.jsx b/src/components/Home/H_section5.jsx
@@ -4,7 +4,7 @@
 function H_section5(){
 
     return(
-        <div className="bg-[#F1F1F1] flex flex-col items-center gap-[50px] text-black p-[50px] " >
+        <div className="bg-secondary flex flex-col items-center gap-[50px] text-black p-[50px] " >
     <div className="text-[30px] md:text-[40px] text-center">Frequently Asked Questions</div>
         <div className="flex flex-col text-center gap-[30px] text-[14px] md:text-[18px]">
             <div className="">
diff --git a/src/components/Item.jsx b/src/components/Item.jsx
@@ -13,7 +13,7 @@ function Item(prop){
       const dispatch =useDispatch()
 console.log(window.location.href.includes('Cart'))
     return(
-        <div key={prop.index} className="flex flex-col gap-[10px] border-[2px] border-solid border-brown-900  w-[200px] bg-[#F1F1F1] rounded-[6px] overflow-hidden p-[10px] relative">
+        <div key={prop.index} className="flex flex-col gap-[10px] border-[2px] border-solid border-brown-900  w-[200px] bg-secondary rounded-[6px] overflow-hidden p-[10px] relative">
             <div><LazyLoadImage src={prop.data?.image ? prop.data?.image:`https://picsum.photos/id/${prop.index}/200/300`} alt="Image"  className='bg-cover w-full  h-[200px] rounded-[6px]'/></div>
             <div className=' flex flex-col h-[100%] justify-between'>
 
diff --git a/src/components/Jewelery/Jewelery.jsx b/src/components/Jewelery/Jewelery.jsx
@@ -22,7 +22,7 @@ function Jewelery() {
   
 
   return (
-    <div className="bg-[#F1F1F1] flex flex-col gap-[50px] ">
+    <div className="bg-secondary flex flex-col gap-[50px] ">
       <H_section0 />
 
       <div className="flex flex-wrap gap-[20px] justify-center">
diff --git a/src/components/Login/Login.jsx b/src/components/Login/Login.jsx
@@ -56,13 +56,13 @@ const dispatch=useDispatch()
         <button
           onClick={() =>{dispatch(logInUser({ isMerchant,email,password,loginUserWithEmailAndPassword }));
         }}
-          className=" border border-brown rounded-[5px] text-white bg-[#0055E9] w-[100%]"
+          className=" border border-brown rounded-[5px] text-white bg-primary w-[100%]"
         >
           Log In
         </button>
         <div className=" flex flex-col items-center">
           <p>Don't have an Account ..?</p>
-          <Link to="/SignUp" className="text-[#0055E9] font-medium">
+          <Link to="/SignUp" className="text-primary font-medium">
             Sign Up
           </Link>
         </div>
diff --git a/src/components/Men/Men.jsx b/src/components/Men/Men.jsx
@@ -19,7 +19,7 @@ function Men(){
   }, []);
 
     return(
-        <div className="bg-[#F1F1F1] flex flex-col gap-[50px]">
+        <div className="bg-secondary flex flex-col gap-[50px]">
            
         
       <H_section0 />
diff --git a/src/components/Profile.jsx b/src/components/Profile.jsx
@@ -23,7 +23,7 @@ const Profile = () => {
     <div>
       <H_section0 />
       <div className="h-[100vh]   flex flex-col items-center justify-center gap-[20px]">
-        <div className="bg-[#F1F1F1] w-[50px] h-[50px]  rounded-[50%] text-black flex justify-center items-center">
+        <div className="bg-secondary w-[50px] h-[50px]  rounded-[50%] text-black flex justify-center items-center">
           {user?.email[0]}
         </div>
 
diff --git a/src/components/SignUp/SignUp.jsx b/src/components/SignUp/SignUp.jsx
@@ -79,14 +79,14 @@ const SignUp = ({isMerchant}) => {
           onClick={() => {
             dispatch(addUser({ isMerchant, name, email, password, signupUserWithEmailAndPassword }));
           }}
-          className="bg-[#0055E9] w-[100%] rounded-[5px] text-white"
+          className="bg-primary w-[100%] rounded-[5px] text-white"
         >
           SignUp
         </button>
 
         <div className="text-center ">
           <p>Already have Account</p>
-          <Link to="/Login" className="text-[#0055E9] font-medium">
+          <Link to="/Login" className="text-primary font-medium">
             Login
           </Link>
         </div>
diff --git a/src/components/Women/Women.jsx b/src/components/Women/Women.jsx
@@ -17,7 +17,7 @@ function Women(){
   }, []);
 
     return(
-        <div className="bg-[#0055E9] flex flex-col gap-[50px] ">
+        <div className="bg-primary flex flex-col gap-[50px] ">
             <H_section0/>
            
 
diff --git a/src/main.jsx b/src/main.jsx
@@ -29,7 +29,7 @@ const theme = createTheme({
   },
   palette: {
     primary: {
-      main: '#0055E9', 
+      main: '#74b9ff', 
     },
     secondary: {
       main: '#000', 
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -8,10 +8,10 @@ export default {
   theme: {
     extend: {
       colors: {
-        primary: '#74b9ff', // Custom primary color
-        secondary: '#FFC107', // Custom secondary color
-        accent: '#FF5722', // Custom accent color
-        neutral: '#9E9E9E', // Custom neutral color
+        primary: '#74b9ff', 
+        secondary: '#dfe6e9',
+        accent: '#FF5722',
+        neutral: '#9E9E9E', 
       },
       backgroundImage: {
         'hero-image': "url('./assets/hero.jpg')",

Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@ useEffect(() => {`
`27`	`27`	`</button>`
`28`	`28`
`29`	`29`	`<div`
`30`		- className={`duration-300 fixed top-[64px] w-[50%] h-[100%] bg-[#0055E9] opacity-80
	`30`	+ className={`duration-300 fixed top-[64px] w-[50%] h-[100%] bg-primary opacity-80
`31`	`31`	${isOpen ? "left-[0px]" : "left-[-100%]"}`}
`32`	`32`	`>`
`33`	`33`	`<ul`