add styling

frontend/public/stylesheets/filter.css

@@ -49,11 +49,11 @@
 }
 
 .filter-all:hover {
-  background: #2b4162;
+  background: #00567D;
   color: white;
 }
 .filter-all.selected {
-  background: #2b4162;
+  background: #00567D;
 }
 .filter-rec:hover {
   background: #2292A4;
@@ -103,7 +103,7 @@
 .collapse-btn:hover,
 .expand-btn:hover {
   color: white;
-  background: #2b4162;
+  background: #00567D;
 }
 
 .search-select-error,

frontend/public/stylesheets/header.css

@@ -2,14 +2,26 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  position: relative;
   padding: 10px 20px;
   height: 50px;
-  background: #2b4162;
-  color: #fff;;
+  background: #00567D;
+  color: #EBEBEB;
   font-size: 28px;
   font-weight: 700;
 }
 
+.header-module {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .header > div {
   display: flex;
   align-items: center;
@@ -19,4 +31,47 @@
   margin-right: 10px;
   width: 32px;
   height: 32px;
+}
+
+.user {
+  cursor: pointer;
+  position: relative;
+  display: flex;
+  align-items: center;
+  font-size: 20px;
+  padding: 10px;
+}
+
+.user:hover {
+  border-radius: 5px;
+  background: red;
+}
+
+.dropdown {
+  cursor: auto;
+  width: 100%;
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  background: white;
+  color: black;
+  padding: 10px;
+  border-radius: 4px;;
+  border: 1px solid black;
+  font-size: 16px;
+  font-weight: 400;
+  top: 40px;
+  right: 10px;
+}
+
+.dropdown > * ~ * {
+  margin-top: 5px;
+}
+
+.logout {
+  cursor: pointer;
+}
+
+.logout-btn {
+  border: none;
 }
\ No newline at end of file

frontend/public/stylesheets/master.css

@@ -5,7 +5,7 @@
 @import './order.css';
 @import './session.css';
 
-/* background: #2b4162; */
+/* background: #00567D; */
 /* background: #4daa57 */
 /* background: #c1292e */
 /* background: #2292A4; */

frontend/public/stylesheets/order.css

@@ -4,7 +4,7 @@
 .order-index > h1 {
   padding: 10px 20px;
   margin-bottom: 2px;
-  background: #2b4162;
+  background: #00567D;
   color: white;
   font-size: 24px;
   font-weight: 700;

frontend/src/components/header/Dropdown.jsx

+import Logout from "../session/Logout"
+
+const Dropdown = ({ }) => {
+
+  return (
+    <div className="dropdown">
+      <div>Profile</div>
+      <Logout />
+    </div>
+  )
+}
+
+export default Dropdown;
\ No newline at end of file

frontend/src/components/header/Header.jsx

 import { connect } from "react-redux";
 import Image from "../atoms/Image";
 import Logout from "../session/Logout";
+import User from "./User";
 
-const Header = ({ isLoggedIn, logout }) => {
+const Header = ({ isLoggedIn, user, logout }) => {
   return (
     <div className="header">
-      <div>
-        <Image src="./logo.svg" />
+      <div>Ascend</div>
+      <div className="header-module">
+        {/* <Image src="./logo.svg" /> */}
         <div>Warehouse Management</div>
       </div>
-      {isLoggedIn ? <Logout onClick={logout} /> : null}
+      <div>{isLoggedIn ? <User user={user.user} /> : null}</div>
     </div>
   );
 };
 
 const mapStateToProps = (state) => ({
   isLoggedIn: state.session.isAuthenticated,
+  user: state.session.user,
 });
 
 const mapDispatchToProps = (dispatch) => ({});

frontend/src/components/header/User.jsx

+import { useState } from "react";
+import Image from "../atoms/Image";
+import Dropdown from "./Dropdown";
+
+const User = ({ user }) => {
+
+  const [showDropdown, setShowDropdown] = useState(false);
+  
+  return (
+    <div className="user" onClick={() => setShowDropdown(!showDropdown)}>
+      <Image src={user.imageUrl} />
+      <div>{user.givenName}</div>
+      {showDropdown ? <Dropdown /> : null}
+    </div>
+  );
+}
+
+export default User;
\ No newline at end of file

frontend/src/components/session/Logout.jsx

@@ -11,11 +11,14 @@ const Logout = ({ logout }) => {
   };
 
   return (
-    <div>
+    <div className="logout">
+      {/* Logout */}
       <GoogleLogout
         clientId={clientId}
-        buttonText="Logout"
+        // buttonText="Logout"
+        className="logout-btn"
         onLogoutSuccess={responseGoogle}
+        render={props => (<div onClick={props.onClick}>Logout</div>)}
       />
     </div>
   );

src/main/java/com/ascendfinalproject/warehouse/models/Address.java

@@ -9,15 +9,14 @@ import lombok.ToString;
 @ToString
 public class Address {
 
-    public Address() {
-
-    }
-
     private String street;
     private String city;
     private String state;
     private String zip;
 
+    public Address() {
+    }
+
     public Address(String street, String city, String state, String zip) {
         this.street = street;
         this.city = city;

src/main/java/com/ascendfinalproject/warehouse/models/Item.java

@@ -17,6 +17,9 @@ public class Item {
     private double itemPrice;
     private int itemSku;
 
+    public Item() {
+    }
+
     public Item(String itemId, String itemName, int itemQuantity, double itemPrice, int itemSku) {
         this.itemId = itemId;
         this.itemName = itemName;
@@ -25,7 +28,4 @@ public class Item {
         this.itemSku = itemSku;
     }
 
-    public Item() {
-
-    }
 }

src/main/java/com/ascendfinalproject/warehouse/models/Session.java

@@ -8,6 +8,7 @@ import org.springframework.data.annotation.Id;
 @Setter
 public class Session {
 
-    @Id
     private String token;
+    private User user;
+
 }

src/main/java/com/ascendfinalproject/warehouse/models/User.java

+package com.ascendfinalproject.warehouse.models;
+
+import lombok.Getter;
+import lombok.Setter;
+
+@Getter
+@Setter
+public class User {
+
+  private String email;
+  private String familyName;
+  private String givenName;
+  private String googleId;
+  private String imageUrl;
+  private String name;
+
+  public User() {
+  }
+
+}