From a306ba2bb2449dddb4f82415d4ec2a2d7f7aa6a9 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Sun, 30 Sep 2018 12:24:53 +0200
Subject: [PATCH] Format Switching

---
 client/src/App.js                |  1 -
 client/src/components/About.js   | 51 ++++++++++++++++---------------
 client/src/components/Contact.js | 52 +++++++++++++++++---------------
 client/src/components/NavBar.js  | 45 +++++++++++++++++++++------
 4 files changed, 91 insertions(+), 58 deletions(-)

diff --git a/client/src/App.js b/client/src/App.js
index fc381cad5..cca4ebaf5 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -90,7 +90,6 @@ class App extends Component {
                 <Route path='/browse' component={Browse} />
                 <Route path='/search' component={Search} />
                 <Route path='/about' component={About} />
-                <Route path='/modules' component={Modules} />
                 <Route path='/contact' component={Contact} />
                 <Route path='/logout' component={Logout} />
                 <Route path='/:post_id' component={Post} />
diff --git a/client/src/components/About.js b/client/src/components/About.js
index 3c85b4d5e..15dbb3906 100644
--- a/client/src/components/About.js
+++ b/client/src/components/About.js
@@ -1,48 +1,51 @@
-import React from 'react';
-import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogTitle from '@material-ui/core/DialogTitle';
+import React from 'react'
+import Button from '@material-ui/core/Button'
+import Dialog from '@material-ui/core/Dialog'
+import DialogActions from '@material-ui/core/DialogActions'
+import DialogContent from '@material-ui/core/DialogContent'
+import DialogContentText from '@material-ui/core/DialogContentText'
+import DialogTitle from '@material-ui/core/DialogTitle'
+import CssBaseline from '@material-ui/core/CssBaseline'
 
 class About extends React.Component {
   state = {
-    open: true,
-  };
+    open: true
+  }
 
   handleClickOpen = () => {
-    this.setState({ open: true });
-  };
+    this.setState({ open: true })
+  }
 
   handleClose = () => {
-    this.setState({ open: false });
-  };
+    this.setState({ open: false })
+  }
 
-  render() {
+  render () {
     return (
-      <div>
+      <React.Fragment>
+        <CssBaseline />
         <Dialog
           open={this.state.open}
           onClose={this.handleClose}
-          aria-labelledby="alert-dialog-title"
-          aria-describedby="alert-dialog-description"
-        >
-          <DialogTitle id="alert-dialog-title">{"Section under development."}</DialogTitle>
+          aria-labelledby='alert-dialog-title'
+          aria-describedby='alert-dialog-description'>
+          <DialogTitle id='alert-dialog-title'>
+            {"Section under development."}
+          </DialogTitle>
           <DialogContent>
-            <DialogContentText id="alert-dialog-description">
+            <DialogContentText id='alert-dialog-description'>
               The functionality of this section has not been developed yet. We expect to have it for October 2018. Thanks for your understanding.
             </DialogContentText>
           </DialogContent>
           <DialogActions>
-            <Button onClick={this.handleClose} color="primary" autoFocus>
+            <Button onClick={this.handleClose} color='primary' autoFocus>
               Close
             </Button>
           </DialogActions>
         </Dialog>
-      </div>
-    );
+      </React.Fragment>
+    )
   }
 }
 
-export default About;
+export default About
diff --git a/client/src/components/Contact.js b/client/src/components/Contact.js
index db8b43271..0f694b08d 100644
--- a/client/src/components/Contact.js
+++ b/client/src/components/Contact.js
@@ -1,48 +1,52 @@
-import React from 'react';
-import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogTitle from '@material-ui/core/DialogTitle';
+import React from 'react'
+import Button from '@material-ui/core/Button'
+import Dialog from '@material-ui/core/Dialog'
+import DialogActions from '@material-ui/core/DialogActions'
+import DialogContent from '@material-ui/core/DialogContent'
+import DialogContentText from '@material-ui/core/DialogContentText'
+import DialogTitle from '@material-ui/core/DialogTitle'
+import CssBaseline from '@material-ui/core/CssBaseline'
 
 class Contact extends React.Component {
   state = {
-    open: true,
-  };
+    open: true
+  }
 
   handleClickOpen = () => {
-    this.setState({ open: true });
-  };
+    this.setState({ open: true })
+  }
 
   handleClose = () => {
-    this.setState({ open: false });
-  };
+    this.setState({ open: false })
+  }
 
-  render() {
+  render () {
     return (
-      <div>
+
+      <React.Fragment>
+        <CssBaseline />
         <Dialog
           open={this.state.open}
           onClose={this.handleClose}
-          aria-labelledby="alert-dialog-title"
-          aria-describedby="alert-dialog-description"
-        >
-          <DialogTitle id="alert-dialog-title">{"Section under development."}</DialogTitle>
+          aria-labelledby='alert-dialog-title'
+          aria-describedby='alert-dialog-description'>
+          <DialogTitle id='alert-dialog-title'>
+            {"Section under development."}
+          </DialogTitle>
           <DialogContent>
-            <DialogContentText id="alert-dialog-description">
+            <DialogContentText id='alert-dialog-description'>
               The functionality of this section has not been developed yet. We expect to have it for October 2018. Thanks for your understanding.
             </DialogContentText>
           </DialogContent>
           <DialogActions>
-            <Button onClick={this.handleClose} color="primary" autoFocus>
+            <Button onClick={this.handleClose} color='primary' autoFocus>
               Close
             </Button>
           </DialogActions>
         </Dialog>
-      </div>
-    );
+      </React.Fragment>
+    )
   }
 }
 
-export default Contact;
+export default Contact
diff --git a/client/src/components/NavBar.js b/client/src/components/NavBar.js
index f3139a725..c0ca2aad5 100644
--- a/client/src/components/NavBar.js
+++ b/client/src/components/NavBar.js
@@ -83,16 +83,43 @@ class NavBar extends Component {
           <Toolbar>
             <img className={classes.img} src={AALogo} alt='Advanced Algos' />
             <Typography variant='title' color='inherit' className={classes.flex}>
-                Users
+              Users
             </Typography>
-
-            <IconButton className={classes.menuButton} color='inherit' title='Home' component={HomeLink}><HomeIcon /></IconButton>
-            <IconButton className={classes.menuButton} color='inherit' title='Browse the Users Directory' component={BrowseLink}><BrowseIcon /></IconButton>
-            <IconButton className={classes.menuButton} color='inherit' title='Search Users' component={SearchLink}><SearchIcon /></IconButton>
-            <IconButton className={classes.menuButton} color='inherit' title='Contact Form' component={ContactLink}><ContactIcon /></IconButton>
-            <IconButton className={classes.menuButton} color='inherit' title='About this Module' component={AboutLink}><AboutIcon /></IconButton>
-            <IconButton className={classes.menuButton} color='inherit' title='Go to another Module' component={ModulesLink}><ModulesIcon /></IconButton>
-
+            <IconButton
+              className={classes.menuButton}
+              color='inherit'
+              title='Home'
+              component={HomeLink}>
+              <HomeIcon />
+            </IconButton>
+            <IconButton
+              className={classes.menuButton}
+              color='inherit'
+              title='Browse the Users Directory'
+              component={BrowseLink}>
+              <BrowseIcon />
+            </IconButton>
+            <IconButton
+              className={classes.menuButton}
+              color='inherit'
+              title='Search Users'
+              component={SearchLink}>
+              <SearchIcon />
+            </IconButton>
+            <IconButton
+              className={classes.menuButton}
+              color='inherit'
+              title='Contact Form'
+              component={ContactLink}>
+              <ContactIcon />
+            </IconButton>
+            <IconButton
+              className={classes.menuButton}
+              color='inherit'
+              title='About this Module'
+              component={AboutLink}>
+              <AboutIcon />
+            </IconButton>
             <LoggedInUser authId={this.state.authId} />
           </Toolbar>
         </AppBar>