Merge branch 'develop' of github.com:atlp-rwanda/e-commerce-ninjas-fe…

… into fx-fixes
atlp-rwanda · Aug 4, 2024 · 9ddf28f · 9ddf28f
2 parents 858830d + 41c539c
commit 9ddf28f
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 4 deletions.
diff --git a/src/assets/styles/LandingPage.scss b/src/assets/styles/LandingPage.scss
@@ -60,11 +60,13 @@
     padding: 2rem;
   }
 
+
   .head {
     display: flex;
     justify-content: space-between;
     align-items: center;
 
+
     h1 {
       font-size: 3.6rem;
     }
@@ -201,6 +203,7 @@
     width: 40vw;
   }
 
+
   .not-found-text {
     font-family: $text-family;
     font-weight: 700;
@@ -213,8 +216,20 @@
     color: $text2-color;
     text-decoration: none;
     transition: all 0.3s ease-in-out;
+    font-family: $text-family;
+    font-weight: 700;
+    font-size: 1.2rem;
+    margin-top: 1rem;
+    margin-bottom: 2rem;
+    text-align: center;
+    line-height: 1.5;
+    letter-spacing: 0.05em;
+    color: $text2-color;
+    text-decoration: none;
+    transition: all 0.3s ease-in-out;
   }
 
+
   .btn-link {
     border: none;
     background-color: $primary-color;
@@ -226,6 +241,16 @@
     font-size: 1.2rem;
     border-radius: 2rem;
     cursor: pointer;
+    border: none;
+    background-color: $primary-color;
+    padding: 1rem 4rem;
+    text-decoration: none;
+    color: $white-color;
+    font-family: $text-family;
+    font-weight: 700;
+    font-size: 1.2rem;
+    border-radius: 2rem;
+    cursor: pointer;
   }
 
   .btn-link:hover {
@@ -234,13 +259,19 @@
     border: 1px solid $border-color;
     box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
     transition: all 0.3s ease-in-out;
+    background-color: $white-color;
+    color: $primary-color;
+    border: 1px solid $border-color;
+    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
+    transition: all 0.3s ease-in-out;
   }
 }
 
 @media screen and (max-width: 768px) {
   .landing-container {
     padding: 3rem 4rem 4rem 4rem;
 
+
     .head {
       h1 {
         font-size: 2.6rem;

diff --git a/src/assets/styles/Sample.scss b/src/assets/styles/Sample.scss
@@ -11,7 +11,6 @@
     display: flex;
     flex-direction: column;
     width: 20%;
-    z-index: 100;
     height: 40rem;
     gap: 1rem;
   }
@@ -72,7 +71,6 @@
       display: flex;
       align-items: center;
       position: relative;
-      z-index: 100;
       height: 40rem;
       img{
         width: 100%;

diff --git a/src/assets/styles/toastify.scss b/src/assets/styles/toastify.scss
@@ -20,7 +20,7 @@
       background: gray;
     }
     .Toastify__toast--error {
-      color: rgb(178, 3, 3);
+      color: $white-color;
       text-align: center;
       background:$toastify-color-error;
     }
@@ -34,7 +34,7 @@
         background: var(--toastify-color-progress-warning);
       }
       .Toastify__progress-bar--error {
-        background: $red-color;
+        background: rgb(178, 3, 3);
       }
       .Toastify__toast-icon{
         svg{

diff --git a/src/pages/Products.tsx b/src/pages/Products.tsx
@@ -38,6 +38,17 @@ const ProductsPage: React.FC = () => {
     }
   }, [products]);
 
+  useEffect(() => {
+    if (products.length > 0) {
+      const calculatedMaxPrice = products.reduce((max, product) => Math.max(max, product.price), 0);
+      const calculatedMinPrice = products.reduce((min, product) => Math.min(min, product.price), calculatedMaxPrice);
+
+      setMaxPrice(calculatedMaxPrice);
+      setMinPrice(calculatedMinPrice);
+      setPriceRange([calculatedMinPrice, calculatedMaxPrice]);
+    }
+  }, [products]);
+
   const handleAddProductToCart = async (productId: string, quantity = 1) => {
     try {
       const response = await dispatch(
@@ -62,6 +73,7 @@ const ProductsPage: React.FC = () => {
     }
   };
 
+
   useEffect(() => {
     const checkProductToCartPending = async () => {
       const pendingProduct = localStorage.getItem("pendingCartProduct");
@@ -89,6 +101,7 @@ const ProductsPage: React.FC = () => {
 
   return (
     <>
+      <Meta title="Products - E-Commerce Ninjas" />
       <Meta title="Products - E-Commerce Ninjas" />
       <div className="landing-container">
         {isLoading ? (
@@ -104,6 +117,22 @@ const ProductsPage: React.FC = () => {
             <div className="head">
               <h1>Products</h1>
             </div>
+            <div className="filters">
+              <div>
+                <label>Price Range: </label>
+                <input
+                  type="range"
+                  min={minPrice}
+                  max={maxPrice}
+                  value={priceRange[1]}
+                  onChange={(e) =>
+                    setPriceRange([priceRange[0], Number(e.target.value)])
+                  }
+                />
+                <span className="span">${priceRange[0]} - ${priceRange[1]}</span>
+              </div>
+              <h1>Products</h1>
+            </div>
             <div className="filters">
               <div>
                 <label>Price Range: </label>