[AFP-48 Shaphen Pangburn]: Refactor header link routing and styling

ecom-web/src/components/Header/header.css

-.order-history-nav {
+.order-history-nav,
+.products-nav,
+#nav-bar-text,
+.cart-nav {
     padding-left: 10px;
+    padding-top: 11px;
+    padding-bottom: 10px;
     color: white;
 }
+
+.nav-home {
+    color: white;
+    font-size: 20px;
+    margin-left: 10px;
+}
+
+#nav-home-link {
+    margin-bottom: 3px;
+}
+
+#nav-bar-text {
+    opacity: 0.6;
+    cursor: default;
+}
\ No newline at end of file

ecom-web/src/components/Header/header.js

@@ -17,21 +17,19 @@ export default class Header extends Component {
         return (
             <div>
                 <Navbar collapseOnSelect expand="lg" bg="primary" variant="dark">
-                    <Navbar.Brand href="#home">Ascend Ecommerce</Navbar.Brand>
                     <Navbar.Toggle aria-controls="responsive-navbar-nav" />
+                    <NavLink to="/product-market" id="nav-home-link"><span className="nav-home">Ascend Ecommerce</span></NavLink>
                     <Navbar.Collapse id="responsive-navbar-nav">
                         <Nav >
-                            <Navbar.Text>
+                            <Navbar.Text id="nav-bar-text">
                                 Hello Guest!
                             </Navbar.Text>
                         </Nav>
-                        <NavLink to="/product-market"><span className="order-history-nav">Products</span></NavLink>
+                        <NavLink to="/product-market"><span className="products-nav">Products</span></NavLink>
                         <NavLink to="/orders"><span className="order-history-nav">Order History</span></NavLink>
+                        <NavLink to="/cart"><span className="cart-nav">Cart</span></NavLink>
                         <Nav className="ms-auto">
                             <Session />
-                            <Nav.Link>
-                                Cart
-                            </Nav.Link>
                         </Nav>
                     </Navbar.Collapse>
                 </Navbar>

ecom-web/src/components/product-market/product-details.jsx

@@ -11,7 +11,14 @@ export default class ProductDetails extends Component {
             <div className="product-details-container">
                 <div id="product-details-left">
                     <div id="prod-details-container">
+                        {
+                            this.props.product.productImageUrl ?
                             <img alt="" src={ this.props.product.productImageUrl } id="prod-details-img" />
+                            :
+                            <div id="prod-details-no-img">
+                                <p id="prod-details-no-image-display">- No Photo Available -</p>
+                            </div>
+                        }
                         <div id="prod-details-box">
                             <div id="details-brand-and-sku-box">
                                 <p id="details-brand">{ this.props.product.brand }</p>

ecom-web/src/components/root.js

@@ -16,11 +16,7 @@ const Root = ({ store }) => (
         <Route
           exact path="/"
           render={() => {
-              return (
-                // this.state.isUserAuthenticated ? // This can be changed for however our frontend user auth will operate
-                // <Redirect to="/product-market" /> :
-                <Redirect to="/product-market" /> 
-              )
+              return ( <Redirect to="/product-market" /> )
           }}
         />
         <Route path="/session" component={ SessionContainer } /> { /* this can be removed if never used */ }

ecom-web/src/resources/stylesheets/product-market.css

@@ -250,6 +250,25 @@
     height: 65%;
 }
 
+#no-image-display {
+    font-size: 20px;
+    opacity: 0.6;
+}
+
+#prod-details-no-image-display {
+    font-size: 28px;
+    opacity: 0.5;
+    cursor: default;
+}
+
+#prod-details-no-img {
+    width: 100%;
+    height: 65%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 #prod-info-container {
     width: 100%;
     text-align: center;