Fix svg import & update dependencies

(Fixes #132)

src/components/SideBar.js

@@ -1,7 +1,7 @@
 // @flow
 import * as React from "react";
 
-import withStyles from "@material-ui/core/styles/withStyles";
+import { makeStyles } from "@material-ui/core/styles";
 import Drawer from "@material-ui/core/Drawer";
 import Typography from "@material-ui/core/Typography";
 import IconButton from "@material-ui/core/IconButton";
@@ -21,42 +21,43 @@ export type SideBarProps = {
   children?: React.Node
 };
 
-type Props = SideBarProps & Classes;
-
-const SideBar = (props: Props) => (
-  <Drawer open={props.open}
-    anchor="right"
-    onClose={props.onCloseRequest}
-    classes={{paper: props.classes.drawerPaper}}
-    variant="persistent"
-  >
-    <AppBar position="static">
-      <Toolbar>
-        <span>
-          {props.icon == null || renderRawIcon(props.icon, "mdi-36px")}
-        </span>
-        <Typography variant="title" className={props.classes.title}>
-          {props.control == null ? "" : props.control.name}
-        </Typography>
-        <IconButton onClick={props.onCloseRequest}>
-          <i className="mdi mdi-close"></i>
-        </IconButton>
-      </Toolbar>
-    </AppBar>
-    <List id="drawer_uiComponents">
-      <React.Fragment>{props.children}</React.Fragment>
-    </List>
-  </Drawer>
-);
-
-const styles = (theme) => ({
+const useStyles = makeStyles((theme) => ({
   drawerPaper: {
     width: 340
   },
   title: {
     flex: 1,
-    marginLeft: theme.spacing.unit
+    marginLeft: theme.spacing(1)
   }
-});
+}));
 
-export default withStyles(styles)(SideBar);
+const SideBar = (props: SideBarProps) => {
+  const classes = useStyles();
+  return (
+    <Drawer open={props.open}
+      anchor="right"
+      onClose={props.onCloseRequest}
+      classes={{paper: classes.drawerPaper}}
+      variant="persistent"
+    >
+      <AppBar position="static">
+        <Toolbar>
+          <span>
+            {props.icon == null || renderRawIcon(props.icon, "mdi-36px")}
+          </span>
+          <Typography variant="subtitle1" className={classes.title}>
+            {props.control == null ? "" : props.control.name}
+          </Typography>
+          <IconButton onClick={props.onCloseRequest}>
+            <i className="mdi mdi-close"></i>
+          </IconButton>
+        </Toolbar>
+      </AppBar>
+      <List id="drawer_uiComponents">
+        <React.Fragment>{props.children}</React.Fragment>
+      </List>
+    </Drawer>
+  );
+};
+
+export default SideBar;