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']);
@@ -89,7 +90,7 @@ const Topbar = () => {
                                     </Dropdown.Item>
                                     {user.role === "Administrateur" &&
                                         <Container>
-                            <Dropdown.Divider/>
+                                            <Dropdown.Divider />
                                             <Dropdown.ItemText>
                                                 Gestion
                                             </Dropdown.ItemText>
@@ -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;
@@ -485,28 +484,28 @@ a {
 }
 
 
- /* width */
- ::-webkit-scrollbar {
+/* width */
+::-webkit-scrollbar {
     width: 10px;
-  }
+}
 
-  /* Track */
-  ::-webkit-scrollbar-track {
+/* Track */
+::-webkit-scrollbar-track {
     background: beige;
-  }
+}
 
-  /* Handle */
-  ::-webkit-scrollbar-thumb {
+/* Handle */
+::-webkit-scrollbar-thumb {
     background: plum;
-  }
+}
 
-  /* Handle on hover */
-  ::-webkit-scrollbar-thumb:hover {
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
     background: purple;
-  } 
+}
 
-.morceaux-container{
-    padding-top:10px;
+.morceaux-container {
+    padding-top: 10px;
     height: 620px;
     overflow-y: scroll;
     border: purple 2px solid;
@@ -514,24 +513,24 @@ a {
     background-color: rgba(245, 245, 220, 0.25);
 }
 
-.filters-btn-container{
-    width:100%;
-    display:flex;
+.filters-btn-container {
+    width: 100%;
+    display: flex;
 }
 
-.filters-btn{
-    margin:auto;
-    width:90% !important;
+.filters-btn {
+    margin: auto;
+    width: 90% !important;
 }
 
-.filters-dropdown button{
+.filters-dropdown button {
     width: 100%;
 }
 
-.filters-menu{
-    width:fit-content;
-    display:flex;
-    margin:5px 15px 10px 15px;
+.filters-menu {
+    width: fit-content;
+    display: flex;
+    margin: 5px 15px 10px 15px;
 }
 
 .filters-container {
@@ -539,32 +538,32 @@ a {
     margin-left: 25px;
 }
 
-.filters-price-container{
+.filters-price-container {
     white-space: nowrap;
-    padding:0px 10px 0px 10px;
+    padding: 0px 10px 0px 10px;
 }
 
-.filters-state-container{
+.filters-state-container {
     white-space: nowrap;
-    padding:0px 10px 0px 10px;
+    padding: 0px 10px 0px 10px;
 }
 
-.filters-info{
-    width:fit-content;
-    height:fit-content;
+.filters-info {
+    width: fit-content;
+    height: fit-content;
     background-color: beige;
     margin-top: 5px;
     padding: 5px 10px 5px 10px;
     border-radius: 5px;
 }
 
-.img-preview-container{
+.img-preview-container {
     margin-top: 15px;
-    display:flex;
+    display: flex;
 }
 
-.img-preview{
-    margin:auto;
+.img-preview {
+    margin: auto;
     max-width: 90%;
     max-height: 200px;
 }
@@ -572,7 +571,7 @@ a {
 .sorting-container {
     width: 20%;
     height: fit-content;
-    margin:auto;
+    margin: auto;
     margin-right: 25px;
 }
 
@@ -656,6 +655,17 @@ a {
 }
 
 
+#cart-button {
+    background-color: transparent;
+    border: none;
+    color: purple;
+}
+
+#cart-count {
+   color:green;
+}
+
+
 /* -------------------------------------------------------- */
 /* specification pour les moyennes écrans
 /* -------------------------------------------------------- */
@@ -720,7 +730,7 @@ a {
     }
 
     .sorting-container {
-        margin:auto;
+        margin: auto;
         width: 90%;
         float: none;
     }
@@ -736,43 +746,43 @@ a {
         border: 2px white solid;
     }
 
-    .filters-dropdown button{
-        height:60px;
+    .filters-dropdown button {
+        height: 60px;
     }
 
-    .filters-container{
-        width:90%;
-        margin:auto;
+    .filters-container {
+        width: 90%;
+        margin: auto;
         margin-bottom: 16px;
         background-color: rgba(0, 0, 0, 0.25);
         border-radius: 10px;
         padding-bottom: 16px;
     }
 
-    .filters-info{
-        margin:auto;
-        margin-top:16px;
+    .filters-info {
+        margin: auto;
+        margin-top: 16px;
     }
 
-    .filters-menu{
-        padding:0px;
-        margin:10px;
+    .filters-menu {
+        padding: 0px;
+        margin: 10px;
     }
 
-    .filters-menu .form-check-label{
-        margin-left:5px;
+    .filters-menu .form-check-label {
+        margin-left: 5px;
     }
 
-    .filters-menu .form-check{
-        margin-bottom:20px;
+    .filters-menu .form-check {
+        margin-bottom: 20px;
     }
 
-    .filters-menu input[type='radio']{
+    .filters-menu input[type='radio'] {
         transform: scale(2);
     }
 
-    .morceaux-options-container{
-        display:block;
+    .morceaux-options-container {
+        display: block;
     }
 }
 
@@ -783,7 +793,7 @@ a {
 
 @media (max-width:450px) {
 
-    .morceaux-container{
+    .morceaux-container {
         height: 450px;
     }