fix side bar layout

cmd/bbgo-desktop/main.go

@@ -35,7 +35,7 @@ func main() {
 	args = append(args, "--class=bbgo")
 
 	// here allocate a chrome window with a blank page.
-	ui, err := lorca.New("", "", 800, 640, args...)
+	ui, err := lorca.New("", "", 1024, 780, args...)
 	if err != nil {
 		log.WithError(err).Error("failed to initialize the window")
 		return

frontend/components/SaveConfigAndRestart.js

@@ -4,19 +4,6 @@ import { useRouter } from 'next/router';
 
 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
-import List from '@material-ui/core/List';
-import Card from '@material-ui/core/Card';
-import CardHeader from '@material-ui/core/CardHeader';
-import CardContent from '@material-ui/core/CardContent';
-import Avatar from '@material-ui/core/Avatar';
-import IconButton from '@material-ui/core/IconButton';
-import MoreVertIcon from '@material-ui/icons/MoreVert';
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableContainer from '@material-ui/core/TableContainer';
-import TableHead from '@material-ui/core/TableHead';
-import TableRow from '@material-ui/core/TableRow';
 
 import {makeStyles} from '@material-ui/core/styles';
 
@@ -49,20 +36,15 @@ export default function SaveConfigAndRestart({onBack, onRestarted}) {
     const classes = useStyles();
 
     const {push} = useRouter();
-    const [strategies, setStrategies] = React.useState([]);
-
     const [response, setResponse] = React.useState({});
 
-    React.useEffect(() => {
-    }, [])
-
     const handleRestart = () => {
         saveConfig((resp) => {
             setResponse(resp);
 
             setupRestart((resp) => {
                 let t
-                t = setInterval(function() {
+                t = setInterval(() => {
                     ping(() => {
                         clearInterval(t)
                         push("/");

frontend/components/SideBar.js

@@ -11,20 +11,12 @@ import TrendingUpIcon from "@material-ui/icons/TrendingUp";
 import React from "react";
 import {makeStyles} from "@material-ui/core/styles";
 
-const drawerWidth = 260;
+const drawerWidth = 240;
 
 const useStyles = makeStyles((theme) => ({
     root: {
-        // flexGrow: 1,
-        display: 'flex',
-    },
-    content: {
         flexGrow: 1,
-        height: '100vh',
-        overflow: 'auto',
-    },
-    fixedHeight: {
-        height: 240,
+        display: 'flex',
     },
     toolbar: {
         paddingRight: 24, // keep right padding when drawer closed
@@ -38,14 +30,20 @@ const useStyles = makeStyles((theme) => ({
     },
     appBarSpacer: theme.mixins.toolbar,
     drawerPaper: {
+        [theme.breakpoints.up('sm')]: {
+            width: drawerWidth,
+            flexShrink: 0,
+        },
         position: 'relative',
         whiteSpace: 'nowrap',
-        width: drawerWidth,
         transition: theme.transitions.create('width', {
             easing: theme.transitions.easing.sharp,
             duration: theme.transitions.duration.enteringScreen,
         }),
     },
+    drawer: {
+        width: drawerWidth,
+    },
 }));
 
 
@@ -54,7 +52,11 @@ export default function SideBar() {
 
     return <Drawer
         variant="permanent"
-        className={classes.drawerPaper}
+        className={classes.drawer}
+        PaperProps={{
+            className: classes.drawerPaper,
+        }}
+        anchor={"left"}
         open={true}>
 
         <div className={classes.appBarSpacer}/>

frontend/layouts/DashboardLayout.js

@@ -42,7 +42,7 @@ export default function DashboardLayout({children}) {
 
             <main className={classes.content}>
                 <div className={classes.appBarSpacer}/>
-                <Container>
+                <Container maxWidth={false} disableGutters={true}>
                     {children}
                 </Container>
             </main>

frontend/pages/index.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React from 'react';
 import {useRouter} from 'next/router';
 
 import {makeStyles} from '@material-ui/core/styles';
@@ -26,6 +26,7 @@ const useStyles = makeStyles((theme) => ({
         height: 300,
     },
     totalAssetsSummary: {
+        margin: theme.spacing(2),
         padding: theme.spacing(2),
     },
     control: {
@@ -34,11 +35,10 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 
-
 // props are pageProps passed from _app.tsx
 export default function Home() {
     const classes = useStyles();
-    const { push } = useRouter();
+    const router = useRouter();
 
     const [sessions, setSessions] = React.useState([])
 
@@ -47,12 +47,12 @@ export default function Home() {
             if (sessions && sessions.length > 0) {
                 setSessions(sessions)
             } else {
-                push("/setup");
+                router.push("/setup");
             }
         }).catch((err) => {
             console.error(err);
         })
-    }, [])
+    }, [router])
 
     if (sessions.length == 0) {
         return (
@@ -68,7 +68,6 @@ export default function Home() {
 
     return (
         <DashboardLayout>
-            <Box m={4}>
             <Paper className={classes.totalAssetsSummary}>
                 <Typography variant="h4" component="h2" gutterBottom>
                     Total Assets
@@ -90,7 +89,6 @@ export default function Home() {
             <TradingVolumePanel/>
 
             <ExchangeSessionTabPanel/>
-            </Box>
         </DashboardLayout>
     );
 }

pkg/server/setup.go

@@ -117,7 +117,7 @@ func (s *Server) setupRestart(c *gin.Context) {
 			logrus.WithError(err).Error("server forced to shutdown")
 		}
 
-		logrus.Info("web server shutdown completed")
+		logrus.Info("server shutdown completed")
 
 		bin := os.Args[0]
 		args := os.Args[0:]