Fix header.js bug

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

+import React, { Component } from 'react'
+import Nav from 'react-bootstrap/Nav'
+import Navbar from 'react-bootstrap/Navbar'
+import NavDropdown from 'react-bootstrap/NavDropdown'
+import {NavLink} from 'react-router-dom'
+import Session from '../session/session-container'
+import {LinkContainer} from 'react-router-bootstrap'
+import { AiOutlineShoppingCart } from 'react-icons/ai'
+import AnimateOnChange from 'react-animate-on-change'
+import { GoogleLogout } from 'react-google-login';
+import './header.css';
+const clientId = `${process.env.REACT_APP_GOOGLE_CLIENT_ID}.apps.googleusercontent.com`;
+export default class Header extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            isLoggedIn: true
+        }
+        this.logOutSuccess = this.logOutSuccess.bind(this);
+        this.toggleLoggedIn = this.toggleLoggedIn.bind(this);
+    }
+    toggleLoggedIn() {
+        const prevState = this.state.isLoggedIn;
+        this.setState({ isLoggedIn: !prevState })
+    }
+    logOutSuccess = (response) => {
+        this.props.logOut()
+        this.props.clearCart()
+        this.toggleLoggedIn()
+    }
+    render() {
+        let userName
+        if (!!this.props.user?.currentUser){
+            userName = this.props.user.currentUser.firstName
+        } else{
+            userName = "Guest"
+        }
+        return (
+            <div>
+                <Navbar id="header-nav" collapseOnSelect expand="sm" bg="light">
+                    <LinkContainer to="/product-market" >
+                        <Navbar.Brand>Ascend</Navbar.Brand>
+                    </LinkContainer>
+                    <div id="ecom-title">Ecommerce</div>
+                    <Navbar.Toggle aria-controls="responsive-navbar-nav" />
+                    <Navbar.Collapse id="responsive-navbar-nav">
+                        <Nav className="ms-auto">
+                            {!this.props.user?.currentUser ? 
+                                <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
+                                            clientId={clientId}
+                                            buttonText="Logout"
+                                            onLogoutSuccess={this.logOutSuccess}
+                                            render={props => (<div onClick={props.onClick}>Logout</div>)}
+                                        >
+                                        </GoogleLogout>
+                                    </NavDropdown.Item>
+                                </NavDropdown>
+                            }
+                            {
+                                this.state.isLoggedIn ? 
+                                <Session className="nav-bar-text" toggleLoggedIn={ this.toggleLoggedIn } />
+                                :
+                                ""
+                            }
+                            <LinkContainer to="/cart" >
+                                <Nav.Link to="/cart" className="cart-link" id={this.props.user?.currentUser ? "" : "disabled-cart-link"} disabled={ !this.props.user?.currentUser }>
+                                    <AiOutlineShoppingCart fill="#EBEBEB" size={30} />
+                                </Nav.Link>
+                            </LinkContainer>
+                            <AnimateOnChange
+                                baseClassName="items-in-cart"
+                                animationClassName="items-in-cart-animation"
+                                animate={ this.props.diff != 0 }
+                            >
+                                <LinkContainer to="/cart" >
+                                    <Nav.Link to="/cart" className={ this.props.cartLength > 0 ? "items-in-cart" : "no-show" }>{ this.props.cartLength }</Nav.Link>
+                                </LinkContainer>
+                            </AnimateOnChange>
+                        </Nav>
+                    </Navbar.Collapse>
+                </Navbar>
+            </div>
+        )
+    }
+}
\ No newline at end of file

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

@@ -361,8 +361,7 @@
     left: 3px;
     bottom: 89px;
     height: 48px;
-    padding: 12px;
-    padding: 3px 10px;
+    padding: 12px 10px;
     border-radius: 5px;
     cursor: default;
     background-color: rgb(248, 76, 76);