petits ajustements et début boutton cart
This commit is contained in:
parent
5c789e2cc7
commit
ed04dc8293
@ -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;
|
@ -6,6 +6,7 @@ import Button from 'react-bootstrap/Button';
|
|||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import Dropdown from "react-bootstrap/Dropdown";
|
import Dropdown from "react-bootstrap/Dropdown";
|
||||||
import { useCookies } from "react-cookie";
|
import { useCookies } from "react-cookie";
|
||||||
|
import CartButton from "./CartButton";
|
||||||
|
|
||||||
const Topbar = () => {
|
const Topbar = () => {
|
||||||
const [cookies, setCookie, removeCookie] = useCookies(['name']);
|
const [cookies, setCookie, removeCookie] = useCookies(['name']);
|
||||||
@ -119,6 +120,7 @@ const Topbar = () => {
|
|||||||
</Dropdown>
|
</Dropdown>
|
||||||
}
|
}
|
||||||
</Nav>
|
</Nav>
|
||||||
|
<CartButton />
|
||||||
</Navbar.Collapse>
|
</Navbar.Collapse>
|
||||||
</Container>
|
</Container>
|
||||||
</Navbar>
|
</Navbar>
|
||||||
|
@ -243,14 +243,13 @@ a {
|
|||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
background-color: rgba(245, 245, 220, 0.75);
|
background-color: rgba(245, 245, 220, 0.75);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
height: 300px;
|
height: 375px;
|
||||||
width: 30%;
|
width: 30%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-img {
|
.item-img {
|
||||||
/* box-shadow: 2px 5px rgba(0, 0, 0, 0.608); */
|
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
margin-top: 5px;
|
margin-top: 15px;
|
||||||
display: block;
|
display: block;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
margin-left: 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
|
/* specification pour les moyennes écrans
|
||||||
/* -------------------------------------------------------- */
|
/* -------------------------------------------------------- */
|
||||||
|
Loading…
Reference in New Issue
Block a user