petits ajustements et début boutton cart

GrossesMitaines/grosses-mitaines-ui/src/components/CartButton.js

@@ -0,0 +1,15 @@
+import { Button } from "react-bootstrap";
+import { faCartShopping } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const CartButton = () =>{
+
+    return(
+        <Button id="cart-button">
+            <FontAwesomeIcon icon={faCartShopping}/>
+            <div id="cart-count">3</div>
+        </Button>
+    )
+}
+
+export default CartButton;

GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js

@@ -6,6 +6,7 @@ import Button from 'react-bootstrap/Button';
 import { Link } from "react-router-dom";
 import Dropdown from "react-bootstrap/Dropdown";
 import { useCookies } from "react-cookie";
+import CartButton from "./CartButton";
 
 const Topbar = () => {
     const [cookies, setCookie, removeCookie] = useCookies(['name']);
@@ -119,6 +120,7 @@ const Topbar = () => {
                             </Dropdown>
                         }
                     </Nav>
+                    <CartButton />
                 </Navbar.Collapse>
             </Container>
         </Navbar>

GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css

@@ -243,14 +243,13 @@ a {
     margin-bottom: 10px;
     background-color: rgba(245, 245, 220, 0.75);
     display: inline-block;
-    height: 300px;
+    height: 375px;
     width: 30%;
 }
 
 .item-img {
-    /* box-shadow: 2px 5px rgba(0, 0, 0, 0.608); */
     border-radius: 2px;
-    margin-top: 5px;
+    margin-top: 15px;
     display: block;
     margin-right: auto;
     margin-left: auto;
@@ -656,6 +655,17 @@ a {
 }
 
 
+#cart-button {
+    background-color: transparent;
+    border: none;
+    color: purple;
+}
+
+#cart-count {
+   color:green;
+}
+
+
 /* -------------------------------------------------------- */
 /* specification pour les moyennes écrans
 /* -------------------------------------------------------- */