Merge branch 'developer' of https://github.com/ecsistem/ecommece-compass

into developer
ecsistem · Aug 28, 2023 · 1939cd5 · 1939cd5
2 parents 56d4e0f + 9cd58a9
commit 1939cd5
Show file tree

Hide file tree

Showing 18 changed files with 674 additions and 564 deletions.
diff --git a/src/components/Banner/styles.css b/src/components/Banner/styles.css
@@ -1,59 +1,65 @@
 .banner {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background: url(./../../assets/images/banner/banner.png) center/cover no-repeat;
-    padding: 0 20px;
-    height: 500px; /* Defina a altura do banner como aproximadamente 500px */
-    margin-bottom: 60px;
-  }
-  
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: url(./../../assets/images/banner/banner.png) center/cover
+    no-repeat;
+  padding: 0 20px;
+  height: 500px; /* Defina a altura do banner como aproximadamente 500px */
+  margin-bottom: 60px;
+}
 
-  .banner-button-center {
-width: 200px;
-padding: var(--spacing-xl, 16px);
-    border-radius: var(--radius-sm, 4px);
-border: 1px solid #62D0B6;
-background: #62D0B6;
-    border: none;
-    cursor: pointer;
-    color: #FFF;
-text-align: center;
-font-family: Roboto Mono;
-font-size: 16px;
-font-style: normal;
-font-weight: 400;
-line-height: 24px;
-margin: 16px 0;
-  }
-  .banner-content {
-    flex-grow: 1;
-    text-align: center;
-    margin: 0 20px;
-  }
-
-  .banner-button-left {
-    order: -1;
-  }
-
-  .banner-button-right {
-    order: 1;
-  }
-  .title-banner{
-    color: #FFF;
-text-align: center;
-font-family: Roboto Mono;
-font-size: 48px;
-font-style: normal;
-font-weight: 400;
-line-height: 70px; /* 145.833% */
-  }
-  .description-banner{
-color: #F8F8F8;
-text-align: center;
-font-family: Roboto Mono;
-font-size: 16px;
-font-style: normal;
-font-weight: 400;
-line-height: 25px; /* 156.25% */
-  }
+.banner-button-center {
+  width: 200px;
+  padding: var(--spacing-xl, 16px);
+  border-radius: var(--radius-sm, 4px);
+  border: 1px solid #62d0b6;
+  background: #62d0b6;
+  border: none;
+  cursor: pointer;
+  color: #fff;
+  text-align: center;
+  font-family: Roboto Mono;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  margin: 16px 0;
+}
+
+.banner-button-center:hover {
+  background-color: #81D9C5;
+  color: var(--primary);
+}
+
+.banner-content {
+  flex-grow: 1;
+  text-align: center;
+  margin: 0 20px;
+}
+
+.banner-button-left {
+  order: -1;
+}
+
+.banner-button-right {
+  order: 1;
+}
+.title-banner {
+  color: #fff;
+  text-align: center;
+  font-family: Roboto Mono;
+  font-size: 48px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 70px; /* 145.833% */
+}
+.description-banner {
+  color: #f8f8f8;
+  text-align: center;
+  font-family: Roboto Mono;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 25px; /* 156.25% */
+}
diff --git a/src/components/Buttons/Button.module.css b/src/components/Buttons/Button.module.css
@@ -11,6 +11,7 @@
   border-radius: var(--radius-sm, 4px);
   border: 1px solid #eee;
   transition: background-color 0.3s ease;
+  cursor: pointer;
 }
 
 .cartButton {
@@ -31,10 +32,39 @@
   background-color: white;
   border-radius: var(--radius-sm, 4px);
   border: 1px solid #eee;
+  cursor: pointer;
 
   transition: background-color 0.3s ease;
 }
 
+.cartButtonDestaque {
+  color: #333;
+  text-align: right;
+  font-family: Roboto Flex;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px; /* 150% */
+
+  display: flex;
+  padding: var(--spacing-xl, 16px);
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-lg, 8px);
+  flex: 1 0 0;
+  border-radius: var(--radius-sm, 4px);
+  border: 1px solid #62d0b6;
+  background: #62d0b6;
+  color: #fff;
+  text-align: right;
+  font-family: Roboto Flex;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px; /* 150% */
+  cursor: pointer;
+}
+
 .favoriteButton img {
   display: flex;
   width: 18px;
@@ -44,7 +74,8 @@
   align-items: center;
 }
 
-.cartButton img {
+.cartButton img,
+.cartButtonDestaque img {
   display: flex;
   width: 16px;
   height: 16px;
@@ -66,9 +97,16 @@
   transition: background-color 0.3s ease;
 }
 
+.cartButtonDestaque:hover {
+  background-color: #81d9c5;
+  color: var(--primary);
+  transition: #81d9c5 0.3s ease;
+}
+
 .favoriteButton.selected img[alt="icon"],
 .favoriteButton:hover img[alt="icon"],
 .cartButton.selected img[alt="icon"],
-.cartButton:hover img[alt="icon"] {
+.cartButton:hover img[alt="icon"],
+.cartButtonDestaque img[alt="icon"] {
   filter: brightness(0) invert(1);
 }
diff --git a/src/components/Buttons/BuyButton.css b/src/components/Buttons/BuyButton.css
@@ -7,18 +7,19 @@
   flex: 1 0 0;
   border-radius: var(--radius-sm, 4px);
   border: 1px solid #62d0b6;
-  background: #fff;
-  color: #62d0b6;
+  background: #62d0b6;
+  color: #fff;
   text-align: right;
   font-family: Roboto Flex;
   font-size: 16px;
   font-style: normal;
   font-weight: 500;
   line-height: 24px; /* 150% */
+  cursor: pointer;
 }
 
 .buyButton:hover {
-    background-color: var(--secondary);
+    background-color: #81D9C5;
     color: var(--primary);
-    transition: background-color 0.3s ease;
+    transition: #81D9C5 0.3s ease;
   }
diff --git a/src/components/Buttons/CartButtonDestaque.jsx b/src/components/Buttons/CartButtonDestaque.jsx
@@ -0,0 +1,40 @@
+import classes from "./Button.module.css";
+import { addToCart } from "../Slices/CartSlice";
+import cartlogo from "../../assets/images/Icons/cart.svg";
+import { useDispatch } from "react-redux";
+import PropTypes from "prop-types";
+
+function CartButtonDestaque({ product }) {
+  const dispatch = useDispatch();
+  const addItemToCartHandler = () => {
+    const item = {
+      id: product.id,
+      price: product.price,
+      image: product.image,
+      title: product.title,
+      amount: 1,
+    };
+    console.log(item);
+    dispatch(addToCart(item));
+  };
+  return (
+    <>
+      <button onClick={addItemToCartHandler} className={classes.cartButtonDestaque}>
+        Carrinho
+        <img src={cartlogo} alt="icon" />
+      </button>
+    </>
+  );
+}
+
+export default CartButtonDestaque;
+
+CartButtonDestaque.propTypes = {
+  product: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    price: PropTypes.number.isRequired,
+    image: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    // Add other required properties here
+  }).isRequired,
+};
diff --git a/src/components/Buttons/CartButtonProductPage.css b/src/components/Buttons/CartButtonProductPage.css
@@ -15,6 +15,7 @@
   font-style: normal;
   font-weight: 500;
   line-height: 24px; /* 150% */
+  cursor: pointer;
 }
 
 .cartButtonPage:hover {

diff --git a/src/components/Buttons/IncrementButton.css b/src/components/Buttons/IncrementButton.css
@@ -19,6 +19,7 @@
   border-radius: 4px;
   border: 1px solid #eee;
   background: #fff;
+  cursor: pointer;
 }
 
 .quantityButton:hover {

diff --git a/src/components/Buttons/ReturnNextButton.css b/src/components/Buttons/ReturnNextButton.css
@@ -10,6 +10,7 @@
   border-radius: 100%;
   border: 1px solid #eee;
   background: #fff;
+  cursor: pointer;
 }
 
 .arrow {

diff --git a/src/components/Buttons/ReturnNextButtonBanner.css b/src/components/Buttons/ReturnNextButtonBanner.css
@@ -12,6 +12,7 @@
   border-radius: 50%;
   border: 1px solid #EEE;
   background: transparent;
+  cursor: pointer;
 }
 
 /* Adicione as media queries conforme necessário */