diff --git a/ecom-web/package-lock.json b/ecom-web/package-lock.json index 6b8decdc3d13cd918b990af2ed8817563b65b027..592d46a98f5c8d7b3e5e8f6dc57897d9f46c2ea5 100644 --- a/ecom-web/package-lock.json +++ b/ecom-web/package-lock.json @@ -19,8 +19,10 @@ "react-bootstrap": "^1.5.2", "react-dom": "^17.0.2", "react-google-login": "^5.2.2", + "react-icons": "^4.2.0", "react-modal": "^3.13.1", "react-redux": "^7.2.4", + "react-router-bootstrap": "^0.25.0", "react-router-dom": "^5.2.0", "react-scripts": "4.0.3", "redux": "^4.1.0", @@ -15106,6 +15108,14 @@ "prop-types": "^15.6.0" } }, + "node_modules/react-icons": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.2.0.tgz", + "integrity": "sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -15188,6 +15198,18 @@ "tiny-warning": "^1.0.0" } }, + "node_modules/react-router-bootstrap": { + "version": "0.25.0", + "resolved": "https://registry.npmjs.org/react-router-bootstrap/-/react-router-bootstrap-0.25.0.tgz", + "integrity": "sha512-/22eqxjn6Zv5fvY2rZHn57SKmjmJfK7xzJ6/G1OgxAjLtKVfWgV5sn41W2yiqzbtV5eE4/i4LeDLBGYTqx7jbA==", + "dependencies": { + "prop-types": "^15.5.10" + }, + "peerDependencies": { + "react": ">=0.14.0", + "react-router-dom": ">=4.0.0" + } + }, "node_modules/react-router-dom": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz", @@ -33132,6 +33154,12 @@ "prop-types": "^15.6.0" } }, + "react-icons": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.2.0.tgz", + "integrity": "sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ==", + "requires": {} + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -33217,6 +33245,14 @@ } } }, + "react-router-bootstrap": { + "version": "0.25.0", + "resolved": "https://registry.npmjs.org/react-router-bootstrap/-/react-router-bootstrap-0.25.0.tgz", + "integrity": "sha512-/22eqxjn6Zv5fvY2rZHn57SKmjmJfK7xzJ6/G1OgxAjLtKVfWgV5sn41W2yiqzbtV5eE4/i4LeDLBGYTqx7jbA==", + "requires": { + "prop-types": "^15.5.10" + } + }, "react-router-dom": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz", diff --git a/ecom-web/package.json b/ecom-web/package.json index a274bab93c7fbf8178da9b1f16b7ea1d92f004c0..c39ada69e5b09fc923c10a2ef1c4ec6223c4bbcc 100644 --- a/ecom-web/package.json +++ b/ecom-web/package.json @@ -14,8 +14,10 @@ "react-bootstrap": "^1.5.2", "react-dom": "^17.0.2", "react-google-login": "^5.2.2", + "react-icons": "^4.2.0", "react-modal": "^3.13.1", "react-redux": "^7.2.4", + "react-router-bootstrap": "^0.25.0", "react-router-dom": "^5.2.0", "react-scripts": "4.0.3", "redux": "^4.1.0", diff --git a/ecom-web/src/components/Header/header.css b/ecom-web/src/components/Header/header.css index ced51584b5f636ee20eeadf18657b4c11540e260..9e1fc6365ef3d3282e7ffbbe61974e03d8dd06fd 100644 --- a/ecom-web/src/components/Header/header.css +++ b/ecom-web/src/components/Header/header.css @@ -18,6 +18,13 @@ } */ .nav-bar-text { - padding-right: 20px; + padding: 13px 20px 0px; } +#collasible-nav-dropdown { + padding: 0px; +} + +#cart-link { + margin-right: 12px; +} diff --git a/ecom-web/src/components/Header/header.js b/ecom-web/src/components/Header/header.js index 341a47bc8c9c1162a875d9238ee5adae9de0d22c..20dd256228bfe4de5da51e3cd48b0bb209d0a501 100644 --- a/ecom-web/src/components/Header/header.js +++ b/ecom-web/src/components/Header/header.js @@ -5,6 +5,8 @@ import NavDropdown from 'react-bootstrap/NavDropdown' import {NavLink} from 'react-router-dom' import Session from '../session/session-container' import HeaderCart from './header-cart-container' +import {LinkContainer} from 'react-router-bootstrap' +import { AiOutlineShoppingCart } from 'react-icons/ai' import './header.css'; @@ -25,22 +27,21 @@ export default class Header extends Component { return ( <div> <Navbar className = "header-nav" collapseOnSelect expand="sm" bg="light"> - <Navbar.Brand>Ascend Ecommerce</Navbar.Brand> + <Navbar.Brand href="/">Ascend Ecommerce</Navbar.Brand> <Navbar.Toggle aria-controls="responsive-navbar-nav" /> <Navbar.Collapse id="responsive-navbar-nav"> - <Nav className="mr-auto"> - <Nav.Link to="/product-market" id="nav-home-link">Home</Nav.Link> - <Nav.Link to="/product-market">Products</Nav.Link> - </Nav> <Nav className="ms-auto"> {!this.props.user?.currentUser ? <Navbar.Text className="nav-bar-text">Hello Guest</Navbar.Text> : <NavDropdown className="nav-bar-text" title={"Hello "+userName} id="collasible-nav-dropdown"> <NavDropdown.Item ><NavLink to="/orders">Order History</NavLink></NavDropdown.Item> + <NavDropdown.Item><NavLink to="/product-market">Products</NavLink></NavDropdown.Item> </NavDropdown> } <Session className="nav-bar-text"/> - <HeaderCart className="nav-bar-text"/> + <LinkContainer to="/cart" > + <Nav.Link to="/cart" id="cart-link"><AiOutlineShoppingCart fill="black" size={30} /></Nav.Link> + </LinkContainer> </Nav> </Navbar.Collapse> </Navbar> diff --git a/ecom-web/src/resources/stylesheets/session.css b/ecom-web/src/resources/stylesheets/session.css index c55288d94214e678da97a7e46b3b26a7f65900ed..6f864fa441ddde88741027d353d531c2c2bb8561 100644 --- a/ecom-web/src/resources/stylesheets/session.css +++ b/ecom-web/src/resources/stylesheets/session.css @@ -1,5 +1,5 @@ .google-login-button { - margin-right: 20px; + margin-right: 10px; } .google-login-button button {