diff --git a/client/src/components/LoggedInUser.js b/client/src/components/LoggedInUser.js
index 706c4e448..8c06db481 100644
--- a/client/src/components/LoggedInUser.js
+++ b/client/src/components/LoggedInUser.js
@@ -1,61 +1,60 @@
-import React, { Component } from 'react';
-import {graphql} from 'react-apollo';
-import {getUserByAuthIdQuery} from '../queries/queries';
-import {auth} from '../App';
-import LoggedInUserMenu from './LoggedInUserMenu';
-import Button from '@material-ui/core/Button';
+import React, { Component } from 'react'
+import {graphql} from 'react-apollo'
+import {getUserByAuthIdQuery} from '../queries/queries'
+import {auth} from '../App'
+import LoggedInUserMenu from './LoggedInUserMenu'
+import Button from '@material-ui/core/Button'
class LoggedInUser extends Component {
- displayLoggedInUser(){
+ displayLoggedInUser () {
+ const user = this.props.data.userByAuthId
- const user = this.props.data.userByAuthId;
-
- if(user){
-
- let displayName = "No Display Name";
+ if (user) {
+ let displayName = 'No Display Name'
if (
user.alias !== null &&
- user.alias !== ""
- ) { displayName = user.alias;}
+ user.alias !== ''
+ ) { displayName = user.alias }
if (
user.firstName !== null &&
- user.firstName !== ""
- ) { displayName = user.firstName;}
+ user.firstName !== ''
+ ) { displayName = user.firstName }
if (
user.firstName !== null &&
- user.firstName !== "" &&
+ user.firstName !== '' &&
user.lastName !== null &&
- user.lastName !== ""
- ) { displayName = user.firstName + " " + user.lastName;}
-
- return(
-
- );
+ user.lastName !== ''
+ ) { displayName = user.firstName + ' ' + user.lastName }
+ return (
+
+ )
} else {
- return( auth.login()}>
);
+ return (
+ auth.login()}>
+
+
+ )
}
}
- componentDidMount() {
+ componentDidMount () {
}
- render() {
-
+ render () {
if (this.loggedInUserStored !== true) {
-
- let user = this.props.data.userByAuthId;
+ let user = this.props.data.userByAuthId
if (user !== undefined) {
- localStorage.setItem('loggedInUser', JSON.stringify(this.props.data.userByAuthId));
- this.loggedInUserStored = true;
+ localStorage.setItem('loggedInUser', JSON.stringify(this.props.data.userByAuthId))
+ this.loggedInUserStored = true
}
}
@@ -63,7 +62,7 @@ class LoggedInUser extends Component {
{this.displayLoggedInUser()}
- );
+ )
}
}
@@ -75,4 +74,4 @@ export default graphql(getUserByAuthIdQuery, { // What follows is the way to pas
}
}
}
-})(LoggedInUser); // This binds the querty to the component
+})(LoggedInUser) // This binds the querty to the component
diff --git a/client/src/components/LoggedInUserMenu.js b/client/src/components/LoggedInUserMenu.js
index 392bd79a5..4ebed2e5f 100644
--- a/client/src/components/LoggedInUserMenu.js
+++ b/client/src/components/LoggedInUserMenu.js
@@ -1,60 +1,79 @@
-import React, { Component } from 'react';
-import Button from '@material-ui/core/Button';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import toRenderProps from 'recompose/toRenderProps';
-import withState from 'recompose/withState';
-import { Link } from 'react-router-dom';
+import React, { Component } from 'react'
+import toRenderProps from 'recompose/toRenderProps'
+import withState from 'recompose/withState'
+import { Link } from 'react-router-dom'
+import {compose} from 'react-apollo'
-import ProfileIcon from '@material-ui/icons/Person';
-import LogoutIcon from '@material-ui/icons/DirectionsWalk';
+// Materia UI
-const UserLink = props =>
-const LogoutLink = props =>
+import { withStyles } from '@material-ui/core/styles'
+import Button from '@material-ui/core/Button'
+import Menu from '@material-ui/core/Menu'
+import MenuItem from '@material-ui/core/MenuItem'
-const WithState = toRenderProps(withState('anchorEl', 'updateAnchorEl', null));
+// Images
+import GithubLogo from '../img/github-head-negative.png'
+import ProfileIcon from '@material-ui/icons/Person'
+import LogoutIcon from '@material-ui/icons/DirectionsWalk'
+
+const UserLink = props =>
+const LogoutLink = props =>
+
+const WithState = toRenderProps(withState('anchorEl', 'updateAnchorEl', null))
+
+const styles = {
+ img: {
+ margin: 20,
+ display: 'block',
+ maxWidth: 120,
+ maxHeight: 24
+ }
+}
class LoggedInUserMenu extends Component {
- constructor(props){
- super(props);
+ constructor (props) {
+ super(props)
this.state = {
user: {}
}
}
- render() {
-
+ render () {
+ const { classes } = this.props
return (
{({ anchorEl, updateAnchorEl }) => {
- const open = Boolean(anchorEl);
+ const open = Boolean(anchorEl)
const handleClose = () => {
- updateAnchorEl(null);
- };
+ updateAnchorEl(null)
+ }
return (
-
- );
+ )
}}
- );
+ )
}
}
-export default LoggedInUserMenu;
+export default compose(
+ withStyles(styles)
+)(LoggedInUserMenu)
diff --git a/client/src/img/github-head-negative.png b/client/src/img/github-head-negative.png
new file mode 100644
index 000000000..1a1d757b1
Binary files /dev/null and b/client/src/img/github-head-negative.png differ
diff --git a/client/src/img/github-head.png b/client/src/img/github-head.png
new file mode 100644
index 000000000..a815207a3
Binary files /dev/null and b/client/src/img/github-head.png differ
diff --git a/client/src/img/github-negative.png b/client/src/img/github-negative.png
new file mode 100644
index 000000000..967efa057
Binary files /dev/null and b/client/src/img/github-negative.png differ
diff --git a/client/src/img/github.png b/client/src/img/github.png
new file mode 100644
index 000000000..92d3c954b
Binary files /dev/null and b/client/src/img/github.png differ