[AFP-131 Shaphen Pangburn]: Add user image when logged in and adjust spaceing...

[AFP-131 Shaphen Pangburn]: Add user image when logged in and adjust spaceing and formatting to fit user image

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

@@ -3,11 +3,13 @@ import Header from './header';
 import { clearUserCart } from '../../actions/cart_actions';
 import { logOut } from '../../actions/session_actions';
 
-const mSTP = state => ({
+const mSTP = state => {
+    return {
         user: state.user,
         cartLength: state.cart.length,
         image: state.user?.userImage
-});
+    }
+};
 
 const mDTP = dispatch => ({
     logOut: () => dispatch(logOut()),

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

@@ -6,7 +6,11 @@
 }
 
 .nav-bar-text {
-    padding: 13px 20px 0px;
+    padding: 2px 20px 0px;
+}
+
+.nav-bar-text-default {
+    padding: 12px 20px 0px;
 }
 
 #white-color,
@@ -30,6 +34,16 @@
     margin-left: -50px;
 }
 
+.ms-auto navbar-nav {
+    align-items: center;
+}
+
+#user-image {
+    width: 40px;
+    margin: 0px 10px 4px;
+    border-radius: 20px;
+}
+
 #collasible-nav-dropdown:hover,
 .navbar-light .navbar-brand:hover,
 .cart-link:hover {
@@ -37,6 +51,11 @@
     color: #CCCDCF;
 }
 
+#collasible-nav-dropdown {
+    display: flex;
+    align-items: center;
+}
+
 #collasible-nav-dropdown {
     padding: 0px;
 }

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

@@ -36,9 +36,9 @@ export default class Header extends Component {
 
     render() {
         let userName
-        if(!!this.props.user?.currentUser){
+        if (!!this.props.user?.currentUser){
             userName = this.props.user.currentUser.firstName
-        }else{
+        } else{
             userName = "Guest"
         }
 
@@ -53,9 +53,17 @@ export default class Header extends Component {
                     <Navbar.Collapse id="responsive-navbar-nav">
                         <Nav className="ms-auto">
                             {!this.props.user?.currentUser ? 
-                                <Navbar.Text className="nav-bar-text" id="white-color">Hello Guest</Navbar.Text> :
-                                <NavDropdown className="nav-bar-text" title={"Hello "+userName} id="collasible-nav-dropdown">
-                                    <image src={ this.props.Image } />
+                                <Navbar.Text className="nav-bar-text-default" id="white-color">Hello Guest</Navbar.Text> :
+                                <NavDropdown 
+                                    className="nav-bar-text"
+                                    title={ 
+                                        <div>
+                                            <img id="user-image" src={ this.props.image } />
+                                            Hello {userName}
+                                        </div>
+                                    }
+                                    id="collasible-nav-dropdown"
+                                >
                                     <NavDropdown.Item ><NavLink to="/orders">Order History</NavLink></NavDropdown.Item>
                                     <NavDropdown.Item>
                                         <GoogleLogout