User Profile on its own Full Screen Dialog

client/src/components/Footer.js

@@ -3,6 +3,7 @@ import { NavLink } from 'react-router-dom'
 import { compose } from 'recompose';
 import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
+import Divider from '@material-ui/core/Divider';
 
 // Images
 import AALogo from '../img/aa-logo.png'
@@ -54,6 +55,7 @@ class Footer extends Component {
       <footer>
 
           <div className={classes.links}>
+            <Divider />
             <ul>
               <li className={classes.horizontal}>
                 <Button color="primary" className={classes.button}>

client/src/components/UserList.js

@@ -13,6 +13,17 @@ import CardMedia from '@material-ui/core/CardMedia';
 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
+// Full screen dialog imports
+
+import PropTypes from 'prop-types';
+import Dialog from '@material-ui/core/Dialog';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import IconButton from '@material-ui/core/IconButton';
+
+import CloseIcon from '@material-ui/icons/Close';
+import Slide from '@material-ui/core/Slide';
+
 // components
 import UserProfile from './UserProfile';
 
@@ -35,17 +46,36 @@ const styles = theme => ({
      display: 'inline',
      margin: theme.spacing.unit,
    },
+   appBar: {
+  position: 'relative',
+  },
+  flex: {
+    flex: 1,
+  },
 });
 
+function Transition(props) {
+  return <Slide direction="up" {...props} />;
+}
+
 class UserList extends Component {
 
   constructor(props){
     super(props);
     this.state = {
-      selected: null
+      selected: null,
+      open: false
     }
   }
 
+  handleClickOpen = () => {
+    this.setState({ open: true });
+  };
+
+  handleClose = () => {
+    this.setState({ open: false });
+  };
+
   displayUsers(){
     let data = this.props.getUsersQuery;
     const { classes } = this.props;
@@ -78,9 +108,30 @@ class UserList extends Component {
                 </CardContent>
               </CardActionArea>
               <CardActions>
-                <Button size="small" color="primary">
-                  User Profile
-                </Button>
+
+                  <Button onClick={this.handleClickOpen}>User Profile</Button>
+                  <Dialog
+                    fullScreen
+                    open={this.state.open}
+                    onClose={this.handleClose}
+                    TransitionComponent={Transition}
+                  >
+                    <AppBar className={classes.appBar}>
+                      <Toolbar>
+                        <IconButton color="inherit" onClick={this.handleClose} aria-label="Close">
+                          <CloseIcon />
+                        </IconButton>
+                        <Typography variant="title" color="inherit" className={classes.flex}>
+                          User Profile
+                        </Typography>
+                        <Button color="inherit" onClick={this.handleClose}>
+                          Close
+                        </Button>
+                      </Toolbar>
+                    </AppBar>
+                      <UserProfile userId={this.state.selected}/>
+                  </Dialog>
+                 
                 <Button disabled size="small" color="primary">
                   Extended Profile
                 </Button>
@@ -99,12 +150,15 @@ class UserList extends Component {
         <ul>
           {this.displayUsers()}
         </ul>
-        <UserProfile userId={this.state.selected}/>
       </div>
     );
   }
 }
 
+UserList.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
 export default compose(
   graphql(getUsersQuery, {name: "getUsersQuery"}),
   withStyles(styles)