From f94a703be8d00ba3faa3347dec1d4ffba7aa3c72 Mon Sep 17 00:00:00 2001
From: Soumya Jaiswal <soumyajaiswal7708@gmail.com>
Date: Fri, 1 Nov 2024 22:41:29 +0530
Subject: [PATCH] Enhanced Design of the HomePage, Removed Corner Glitches,
 added new button to add product, etc

---
 client/package-lock.json                    | 14 ++++++++++++++
 client/package.json                         |  1 +
 client/src/TrailingCursor.css               |  1 +
 client/src/components/BuyCard.jsx           | 17 ++++++++++-------
 client/src/components/Carousel.jsx          |  3 ++-
 client/src/components/TopCategoriesList.jsx |  6 +++---
 client/src/index.css                        |  3 +++
 7 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/client/package-lock.json b/client/package-lock.json
index 9b07533..ed05cba 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -35,6 +35,7 @@
         "react-redux": "^9.1.0",
         "react-router-dom": "^6.22.0",
         "react-social-login-buttons": "^4.1.0",
+        "react-toastify": "^10.0.6",
         "redux": "^5.0.1",
         "styled-components": "^6.1.8"
       },
@@ -10457,6 +10458,19 @@
         "react": "^16.0.0 || ^17.x || ^18.x"
       }
     },
+    "node_modules/react-toastify": {
+      "version": "10.0.6",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.6.tgz",
+      "integrity": "sha512-yYjp+omCDf9lhZcrZHKbSq7YMuK0zcYkDFTzfRFgTXkTFHZ1ToxwAonzA4JI5CxA91JpjFLmwEsZEgfYfOqI1A==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
diff --git a/client/package.json b/client/package.json
index 94f19b4..1ba3d87 100644
--- a/client/package.json
+++ b/client/package.json
@@ -37,6 +37,7 @@
     "react-redux": "^9.1.0",
     "react-router-dom": "^6.22.0",
     "react-social-login-buttons": "^4.1.0",
+    "react-toastify": "^10.0.6",
     "redux": "^5.0.1",
     "styled-components": "^6.1.8"
   },
diff --git a/client/src/TrailingCursor.css b/client/src/TrailingCursor.css
index 413913f..1f4606f 100644
--- a/client/src/TrailingCursor.css
+++ b/client/src/TrailingCursor.css
@@ -22,6 +22,7 @@ body {
   pointer-events: none;
   transition: transform 0.2s ease, opacity 0.2s ease;
   opacity: 0.7;
+  z-index: 9999;
 }
 
 .button:hover .cursor {
diff --git a/client/src/components/BuyCard.jsx b/client/src/components/BuyCard.jsx
index 2d379e0..f13f509 100644
--- a/client/src/components/BuyCard.jsx
+++ b/client/src/components/BuyCard.jsx
@@ -16,7 +16,7 @@ function BuyCard({ bogo, mrp, discountPrice, imageUrl, productName, discount, id
 
   return (
     <div className='card w-56  flex justify-center align-middle flex-col border-2 rounded-[15px] relative hover:scale-105 transition transform ease-in-out duration-300'>
-      <div className='bg-slate-200 w-full flex justify-center rounded-t-[15px] align-top cursor-pointer' onClick={() => {
+      <div className='bg-slate-200 w-full flex justify-center rounded-t-[12px] align-top cursor-pointer' onClick={() => {
         navigate(`/product/${id}`)
       }}>
         <img src={imageUrl} alt="" />
@@ -47,29 +47,32 @@ function BuyCard({ bogo, mrp, discountPrice, imageUrl, productName, discount, id
               borderColor: '#54B22C',
               color: '#249B3E',
               width: '60px',
-              borderRadius: '5px',
+              borderRadius: '75px',
               border: '1px solid',
             }}>ADD</button>
           </div>
         ))}
         {count > 0 && (
-          <div className='mr-2 flex gap-2'>
+          <div className='mr-2 flex gap-2 border rounded-full border-green-500'>
             <span
               style={{
                 cursor: 'pointer',
                 marginTop: '1px',
-                userSelect: 'none'
+                userSelect: 'none',
+                paddingLeft:"8px",
+                
               }} onClick={() => {
                 if (count >= 1 && count < 10)
                   setCount(count + 1);
                 addToCart({ id, productName, discountPrice, imageUrl, count: count + 1 });
               }}>+</span>
-            <div><input type="text" className='w-6 border-2 indent-1' value={count} /></div>
+            <div><input type="text" className=' w-8 bg-green-500 text-white  text-center select-none h-full' value={count} /></div>
             <span
               style={{
                 cursor: 'pointer',
                 marginTop: '1px',
-                userSelect: 'none'
+                userSelect: 'none',
+                paddingRight:"8px",
               }}
               onClick={() => {
                 if (count >= 1) {
@@ -86,7 +89,7 @@ function BuyCard({ bogo, mrp, discountPrice, imageUrl, productName, discount, id
         backgroundColor: '#54B22C',
         color: 'white',
         padding: '5px',
-        borderRadius: '0 17px 0 15px',
+        borderRadius: '0 13px 0 15px',
       }}>
         {discount || parseInt((mrp - discountPrice) / mrp * 100) || '$'}% OFF
       </div>
diff --git a/client/src/components/Carousel.jsx b/client/src/components/Carousel.jsx
index e01804d..f729061 100644
--- a/client/src/components/Carousel.jsx
+++ b/client/src/components/Carousel.jsx
@@ -12,11 +12,12 @@ const CarouselComponent = () => {
     PrevIcon={<NextIcon reverse/>}
     >
       {images.map((imageUrl, index) => (
-        <Paper key={index}>
+        <Paper key={index} style={{borderBottomLeftRadius: '40px',borderBottomRightRadius: '40px'}}>
           <img src={imageUrl} alt="" style={{
             width: '100%',
             height: '100%',
             objectFit: 'cover',
+            borderBottomLeftRadius: '40px',borderBottomRightRadius: '40px'
           
           }}/>
         </Paper>
diff --git a/client/src/components/TopCategoriesList.jsx b/client/src/components/TopCategoriesList.jsx
index 2db16d3..c31c697 100644
--- a/client/src/components/TopCategoriesList.jsx
+++ b/client/src/components/TopCategoriesList.jsx
@@ -31,7 +31,7 @@ function TopCategoriesList() {
             {categories.map((category, index) => (
               <motion.div
                 key={index}
-                className='flex flex-col items-center cursor-pointer'
+                className='flex flex-col items-center cursor-pointer border p-1.5 rounded-2xl'
                 variants={listItemVariants}
                 onClick={()=>{
                   navigate(`/categories/${encodeURIComponent(category.name.toLowerCase())}`);
@@ -40,9 +40,9 @@ function TopCategoriesList() {
                 <img
                   src={`/images/${category.image}`}
                   alt={category.name}
-                  className=' transition transform ease-in-out hover:scale-105 duration-300'
+                  className=' transition transform ease-in-out hover:scale-105 duration-300 rounded-2xl'
                 />
-                <p className='text-center font hover:underline'>{category.name}</p>
+                <p className='text-center font hover:underline mt-2 sm:text-sm'>{category.name}</p>
               </motion.div>
             ))}
           </motion.div>
diff --git a/client/src/index.css b/client/src/index.css
index 0a4055d..1b21a77 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -14,4 +14,7 @@ body {
   background-color: #46d346;
   border-radius: 20px;
 }
+*{
+  user-select: none;
+}