Merge branch 'uniform-styling' into 'dev'

Uniform styling

See merge request !22

src/App.js

@@ -14,7 +14,7 @@ export const AuthContext = createContext();
 function App() {
   const[isLoggedIn, setIsLoggedIn] = useState(false);
   const[user, setUser] = useState(null);
-
+  console.log(user);
   const state = {
     user,
     setUser,

src/component/Header.jsx

@@ -4,14 +4,14 @@ import Search from "./Search";
 import ".././styles/Header.css"
 import LogoutButton from "./session/LogoutButton";
 
-const Header = ({login, setLogin}) => {
+const Header = ({ login, setLogin }) => {
   const [show, setShow] = useState(false);
 
   return (
     <nav className="navbar navbar-expand-lg navbar-dark">
-      <div className="container-fluid">
+      <div id="parent" className="container-fluid">
         <Link className="navbar-brand" to="/">
-          Ascend
+          <img id="logo" src="../../../logo.jpeg" alt="Nisum Logo"></img>
         </Link>
         <button
           className="navbar-toggler"
@@ -30,7 +30,7 @@ const Header = ({login, setLogin}) => {
           id="navbarSupportedContent"
         >
           <ul className="navbar-nav me-auto mb-2 mb-lg-0">
-            <li className="nav-item" style={{color: "red"}}>
+            <li className="nav-item">
               <Link className="nav-link" to="/products">
                 Products
               </Link>
@@ -41,11 +41,8 @@ const Header = ({login, setLogin}) => {
               </Link>
             </li>
           </ul>
-          <div id="page-title" className="nav-item mx-auto"> <h1>Inventory, Promotions, Pricing</h1>
-          </div>
-
-     
-        <LogoutButton/>
+          <h1 id="page-title">Inventory, Promotions, Pricing</h1>
+          <LogoutButton />
         </div>
       </div>
     </nav>

src/component/ProductIndex.jsx

@@ -10,7 +10,7 @@ export default function ProductIndex() {
   const [categories, setCategories] = useState([]);
   const [activeCategory, setActiveCategory] = useState("");
 
-  console.log(displayProducts);
+  // console.log(displayProducts);
   const fetchProducts = async () => {
     const res = await fetch(`${Config.inventoryUrl}`);
     if (res.ok) {

src/component/session/LoginButton.jsx

@@ -8,13 +8,14 @@ const clientId = `${google_ClientID}.apps.googleusercontent.com`;
 
 function LoginButton({}){
 
-    const { isLoggedIn, setIsLoggedIn } = useContext(AuthContext);
-
+    const { isLoggedIn, setIsLoggedIn,setUser } = useContext(AuthContext);
     const onSuccessLogin = (res) =>{
         setIsLoggedIn(true);
-        const { tokenId, profileObj } = res;    
+        const { tokenId, profileObj } = res;
+        setUser(profileObj);
     };
 
+
     const onFailure = (res) =>{
         setIsLoggedIn(false);
     };
@@ -32,6 +33,7 @@ function LoginButton({}){
                 onSuccess= {onSuccessLogin}
                 onFailure= {onFailure}
                 cookiePolicy={'single_host_origin'}
+                isSignedIn={true}
             />
             </div>
         </div>

src/component/session/LoginButtonPage.css

@@ -2,4 +2,5 @@
     padding: 50px;
     justify-content: center;
 
-}
\ No newline at end of file
+}
+

src/component/session/LogoutButton.jsx

 import React, {useContext} from 'react';
 import {GoogleLogout} from 'react-google-login';
 import {AuthContext} from "../../App";
-
+import { Dropdown } from 'react-bootstrap';
+import "./LogoutDropDown.css";
 const google_ClientID = process.env.REACT_APP_GOOGLE_CLIENT_ID;
 const clientId = `${google_ClientID}.apps.googleusercontent.com`;
 
 function LogoutButton(){
 
-    const { isLoggedIn, setIsLoggedIn } = useContext(AuthContext);
+    const { isLoggedIn, setIsLoggedIn, user , setUser } = useContext(AuthContext);
 
     const onSuccessLogout= (res) =>{
         setIsLoggedIn(false);
@@ -15,11 +16,26 @@ function LogoutButton(){
 
     return(
         <div>
-            <GoogleLogout
+            <Dropdown>
+                <Dropdown.Toggle  className="dropdown">
+                    {user != null ?  
+                    <p><img className="profile-pic" src={user.imageUrl}/>
+                    {user.name}</p>
+                    : <p>User</p>
+                    }
+                </Dropdown.Toggle>
+                <Dropdown.Menu>
+                <Dropdown.Item>Profile</Dropdown.Item>
+                <Dropdown.Item><GoogleLogout
+                render={props => (<div onClick={props.onClick}>Logout</div>)}
                 clientId= {clientId}
                 buttonText="Logout"
                 onLogoutSuccess={onSuccessLogout}
-            />
+                isSignedIn={false}
+            /></Dropdown.Item>
+                </Dropdown.Menu>
+            </Dropdown>
+
         </div>
     );
 }

src/component/session/LogoutDropDown.css

+.profile-pic{
+    position: relative;
+    width: 28px;
+    height: 28px;
+    overflow: hidden;
+    border-radius: 50%;
+    padding: 2px;
+}
+
+.dropdown{
+    color:#EBEBEB;
+    background-color: transparent;
+    
+}
+
+.dropdown:hover{
+    color:#CCCDCF;
+    background-color: transparent;
+}
+

src/styles/Header.css

@@ -3,5 +3,31 @@
 }
 
 #page-title{
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: auto;
+    margin-bottom: auto;
+    left: 0;
+    right: 0;
     color: #EBEBEB;
+    pointer-events: none;
+}
+
+#navbarSupportedContent{
+    position: relative;
+}
+
+#logo{
+    width: 100px;
+    height: 50px;
+}
+
+.nav-link{
+    color: #EBEBEB !important;
+}
+
+.nav-link:hover{
+    color: #CCCDCF !important;
 }
\ No newline at end of file