[AFP-131 Shaphen Pangburn]: Reformatted navbark links and added react icon for...

[AFP-131 Shaphen Pangburn]: Reformatted navbark links and added react icon for cart to direct to cart page

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",

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",

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;
+}

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>

ecom-web/src/resources/stylesheets/session.css

 .google-login-button {
-    margin-right: 20px;
+    margin-right: 10px;
 }
 
 .google-login-button button {