From 108c3442df713ae9030f659a3478bde0cccf5d5d Mon Sep 17 00:00:00 2001
From: Daniel Martinez <danielmartinezdm@hotmail.com>
Date: Sun, 6 Sep 2020 23:53:58 -0500
Subject: [PATCH] Se ajustan estilos de modal coins para safari

---
 src/Utils/index.jsx                      | 10 +++++-----
 src/components/Modals/modal.scss         |  7 ++++---
 src/components/Products/ProductsList.jsx | 23 ++++++++---------------
 src/components/Products/products.scss    |  2 +-
 4 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/src/Utils/index.jsx b/src/Utils/index.jsx
index 19704fb..25ebeee 100644
--- a/src/Utils/index.jsx
+++ b/src/Utils/index.jsx
@@ -1,15 +1,15 @@
 export const priceFilter = (cost) => {
   return (product) => {
     switch (cost) {
-      case 1:
+      case "1":
         return product.cost <= 200;
-      case 2:
+      case "2":
         return product.cost > 200 && product.cost <= 500;
-      case 3:
+      case "3":
         return product.cost > 500 && product.cost <= 1000;
-      case 4:
+      case "4":
         return product.cost > 1001 && product.cost <= 2000;
-      case 5:
+      case "5":
         return product.cost > 2000;
       default:
         return product;
diff --git a/src/components/Modals/modal.scss b/src/components/Modals/modal.scss
index 7bc9468..d4f8e69 100644
--- a/src/components/Modals/modal.scss
+++ b/src/components/Modals/modal.scss
@@ -44,7 +44,7 @@
   background: #43a764;
 }
 .coins-header {
-  background: #c7aa0a;
+  background: #e0ca49;
 }
 
 .modal-close-button {
@@ -85,10 +85,11 @@ button {
 
   .coins {
     cursor: pointer;
-    font-size: 20px;
+    font-size: 30px;
     margin-top: 10px;
+    background-color: transparent;
     outline: none;
-    color: #c7aa0a;
+    color: #e0ca49;
   }
 
   .gif {
diff --git a/src/components/Products/ProductsList.jsx b/src/components/Products/ProductsList.jsx
index 2301457..752c1b0 100644
--- a/src/components/Products/ProductsList.jsx
+++ b/src/components/Products/ProductsList.jsx
@@ -11,28 +11,21 @@ const ITEMS_PER_PAGE = 16;
 const ProductsList = () => {
   const { products, setProductResponse } = useContext(ProductsContext);
 
+  const [filteredProducts, setProducts] = useState([]);
+
   useEffect(() => {
     if (!products) return;
+    setProducts(products);
   }, [products]);
 
-  const [filteredProducts, setProducts] = useState(products);
-
-  const { next, prev, currentData, currentAmount } = usePagination(
+  const { next, prev, currentData, currentAmount, jump } = usePagination(
     filteredProducts,
     ITEMS_PER_PAGE
   );
 
-  const onPrev = () => {
-    prev();
-    window.scrollTo(0, 0);
-  };
-  const onNext = () => {
-    next();
-    window.scrollTo(0, 0);
-  };
-
   const handleFilter = (event) => {
     setProducts(products.filter(priceFilter(event.target.value)));
+    jump(1);
   };
 
   if (filteredProducts.length) {
@@ -40,7 +33,7 @@ const ProductsList = () => {
       <>
         <FilterPanel
           currentAmount={currentAmount()}
-          totalAmount={products.length}
+          totalAmount={filteredProducts.length}
           onFilter={handleFilter}
         />
         <div className="cards">
@@ -53,8 +46,8 @@ const ProductsList = () => {
         <div className="container-pagination">
           <div className="pagination">
             <ul>
-              <button onClick={onPrev}>Previous</button>
-              <button onClick={onNext}>Next</button>
+              <button onClick={() => prev()}>Previous</button>
+              <button onClick={() => next()}>Next</button>
             </ul>
           </div>
         </div>
diff --git a/src/components/Products/products.scss b/src/components/Products/products.scss
index 7ebb0c8..f2888d7 100644
--- a/src/components/Products/products.scss
+++ b/src/components/Products/products.scss
@@ -12,7 +12,7 @@
   margin: 15px;
   transition: all 0.4s cubic-bezier(0.175, 0.885, 0, 1);
   background-color: #fff;
-  width: 250px;
+  width: 270px;
   height: 300px;
   position: relative;
   border-radius: 12px;