Fix some issues on main screen

3 files changed, 33 insertions, 26 deletions

diff --git a/modern/src/LoginPage.js b/modern/src/LoginPage.js
index 9934106e..3ba6bacb 100644
--- a/modern/src/LoginPage.js
+++ b/modern/src/LoginPage.js
@@ -8,7 +8,7 @@ import Paper from '@material-ui/core/Paper';
 import withStyles from '@material-ui/core/styles/withStyles';
 
 const styles = theme => ({
-  layout: {
+  root: {
     width: 'auto',
     display: 'block', // Fix IE11 issue.
     marginLeft: theme.spacing.unit * 3,
@@ -86,7 +86,7 @@ class LoginPage extends Component {
     const { classes } = this.props;
     const { failed, email, password } = this.state;
     return (
-      <main className={classes.layout}>
+      <main className={classes.root}>
         <Paper className={classes.paper}>
 
           <img className={classes.logo} src="/logo.svg" alt="Traccar" />
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index 02d98dca..36181a98 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -2,6 +2,18 @@ import React, { Component } from 'react';
 import ContainerDimensions from 'react-container-dimensions';
 import MainToobar from './MainToolbar';
 import MainMap from './MainMap';
+import withStyles from '@material-ui/core/styles/withStyles';
+
+const styles = theme => ({
+  root: {
+    height: "100vh",
+    display: "flex",
+    flexDirection: "column"
+  },
+  mapContainer: {
+    flexGrow: 1
+  }
+});
 
 class MainPage extends Component {
   constructor(props) {
@@ -24,6 +36,7 @@ class MainPage extends Component {
   }
 
   render() {
+    const { classes } = this.props;
     const { loading } = this.state;
     if (loading) {
       return (
@@ -31,11 +44,9 @@ class MainPage extends Component {
       );
     } else {
       return (
-        <div style={{height: "100vh", display: "flex", flexDirection: "column"}}>
-          <div style={{flex: 0}}>
-            <MainToobar />
-          </div>
-          <div style={{flex: 1}}>
+        <div className={classes.root}>
+          <MainToobar />
+          <div className={classes.mapContainer}>
             <ContainerDimensions>
               <MainMap/>
             </ContainerDimensions>
@@ -46,4 +57,4 @@ class MainPage extends Component {
   }
 }
 
-export default MainPage;
+export default withStyles(styles)(MainPage);
diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js
index e8294ab1..1420135f 100644
--- a/modern/src/MainToolbar.js
+++ b/modern/src/MainToolbar.js
@@ -1,5 +1,4 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
@@ -9,22 +8,23 @@ import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
 
 const styles = {
-  root: {
-    flexGrow: 1,
-  },
   flex: {
-    flexGrow: 1,
+    flexGrow: 1
   },
   menuButton: {
     marginLeft: -12,
-    marginRight: 20,
+    marginRight: 20
   },
 };
 
-function MainToobar(props) {
-  const { classes } = props;
-  return (
-    <div className={classes.root}>
+class MainToobar extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const { classes } = this.props;
+    return (
       <AppBar position="static">
         <Toolbar>
           <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
@@ -33,15 +33,11 @@ function MainToobar(props) {
           <Typography variant="title" color="inherit" className={classes.flex}>
             Traccar
           </Typography>
-          <Button color="inherit">Login</Button>
+          <Button color="inherit">Logout</Button>
         </Toolbar>
       </AppBar>
-    </div>
-  );
+    );
+  }
 }
 
-MainToobar.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
 export default withStyles(styles)(MainToobar);