fix

src/components/App.js

@@ -2,7 +2,7 @@ import React from "react";
 import { HashRouter, Route, Switch, Redirect } from "react-router-dom";
 
 // components
-import Layout from "./Layout";
+import Layout from "./Layout/Layout";
 
 // pages
 import Error from "../pages/error";
@@ -37,7 +37,7 @@ export default function App() {
     return (
       <Route
         {...rest}
-        render={props =>
+        render={(props) =>
           isAuthenticated ? (
             React.createElement(component, props)
           ) : (
@@ -45,8 +45,8 @@ export default function App() {
               to={{
                 pathname: "/login",
                 state: {
-                  from: props.location,
+                  from: props.location
-                },
+                }
               }}
             />
           )
@@ -59,11 +59,11 @@ export default function App() {
     return (
       <Route
         {...rest}
-        render={props =>
+        render={(props) =>
           isAuthenticated ? (
             <Redirect
               to={{
-                pathname: "/",
+                pathname: "/"
               }}
             />
           ) : (

src/components/Layout/Layout.js

@@ -2,7 +2,7 @@ import React from "react";
 import { withRouter } from "react-router-dom";
 
 // components
-import Header from "../Header";
+import Header from "../Header/Header";
 import Sidebar from "../Sidebar";
 import Content from "./Content";
 

src/components/Notification/index.js

@@ -0,0 +1,2 @@
+import Notification from "./Notification";
+export default Notification;

src/components/PageTitle/index.js

@@ -0,0 +1,2 @@
+import PageTitle from "./PageTitle";
+export default PageTitle;

src/components/Sidebar/index.js

@@ -0,0 +1,2 @@
+import Sidebar from "./Sidebar";
+export default Sidebar;

src/components/Sidebar/menu.js

@@ -24,7 +24,7 @@ const menu = [
   {
     id: 1,
     label: "Resources",
-    link: "/app/typography",
+    link: "/app/resources",
     icon: <ImageIcon />
   },
 
@@ -33,13 +33,13 @@ const menu = [
   {
     id: 4,
     label: "Admin",
-    link: "/app/typography",
+    link: "/app/admin",
     icon: <BuildIcon />
   },
   {
     id: 5,
     label: "Settings",
-    link: "/app/typography",
+    link: "/app/settings",
     icon: <SettingsIcon />,
     children: [
       {
@@ -53,7 +53,7 @@ const menu = [
   {
     id: 6,
     label: "Health",
-    link: "/app/typography",
+    link: "/app/health",
     icon: <NetworkCheckIcon />
   },
   { id: 7, type: "divider" },

src/components/Widget/Widget.js

@@ -4,7 +4,7 @@ import {
   IconButton,
   Menu,
   MenuItem,
-  Typography,
+  Typography
 } from "@material-ui/core";
 import { MoreVert as MoreIcon } from "@material-ui/icons";
 import classnames from "classnames";
@@ -32,14 +32,21 @@ export default function Widget({
   var [isMoreMenuOpen, setMoreMenuOpen] = useState(false);
 
   return (
-    <div className={classes.widgetWrapper} style={style && {...style}}>
+    <div className={classes.widgetWrapper} style={style && { ...style }}>
-      <Paper className={classes.paper} classes={{ root: classnames(classes.widgetRoot, {
+      <Paper
-        [classes.noWidgetShadow]: noWidgetShadow
+        className={classes.paper}
-        }) }}>
+        classes={{
-        <div className={classnames(classes.widgetHeader, {
+          root: classnames(classes.widgetRoot, {
-          [classes.noPadding]: noHeaderPadding,
+            [classes.noWidgetShadow]: noWidgetShadow
-          [headerClass]: headerClass
+          })
-        })}>
+        }}
+      >
+        <div
+          className={classnames(classes.widgetHeader, {
+            [classes.noPadding]: noHeaderPadding,
+            [headerClass]: headerClass
+          })}
+        >
           {header ? (
             header
           ) : (
@@ -65,7 +72,7 @@ export default function Widget({
         <div
           className={classnames(classes.widgetBody, {
             [classes.noPadding]: noBodyPadding,
-            [bodyClass]: bodyClass,
+            [bodyClass]: bodyClass
           })}
         >
           {children}

src/components/Widget/index.js

@@ -0,0 +1,2 @@
+import Widget from "./Widget";
+export default Widget;

src/components/Wrappers/Wrappers.js

@@ -3,18 +3,18 @@ import {
   withStyles,
   Badge as BadgeBase,
   Typography as TypographyBase,
-  Button as ButtonBase,
+  Button as ButtonBase
 } from "@material-ui/core";
 import { useTheme, makeStyles } from "@material-ui/styles";
 import classnames from "classnames";
 
 // styles
-var useStyles = makeStyles(theme => ({
+var useStyles = makeStyles((theme) => ({
   badge: {
     fontWeight: 600,
     height: 16,
-    minWidth: 16,
+    minWidth: 16
-  },
+  }
 }));
 
 function Badge({ children, colorBrightness, color, ...props }) {
@@ -22,16 +22,16 @@ function Badge({ children, colorBrightness, color, ...props }) {
   var theme = useTheme();
   var Styled = createStyled({
     badge: {
-      backgroundColor: getColor(color, theme, colorBrightness),
+      backgroundColor: getColor(color, theme, colorBrightness)
-    },
+    }
   });
 
   return (
     <Styled>
-      {styledProps => (
+      {(styledProps) => (
         <BadgeBase
           classes={{
-            badge: classnames(classes.badge, styledProps.classes.badge),
+            badge: classnames(classes.badge, styledProps.classes.badge)
           }}
           {...props}
         >
@@ -57,7 +57,7 @@ function Typography({
       style={{
         color: getColor(color, theme, colorBrightness),
         fontWeight: getFontWeight(weight),
-        fontSize: getFontSize(size, props.variant, theme),
+        fontSize: getFontSize(size, props.variant, theme)
       }}
       {...props}
     >
@@ -71,7 +71,7 @@ function Button({ children, color, className, ...props }) {
 
   var Styled = createStyled({
     root: {
-      color: getColor(color, theme),
+      color: getColor(color, theme)
     },
     contained: {
       backgroundColor: getColor(color, theme),
@@ -79,20 +79,20 @@ function Button({ children, color, className, ...props }) {
       color: `${color ? "white" : theme.palette.text.primary} !important`,
       "&:hover": {
         backgroundColor: getColor(color, theme, "light"),
-        boxShadow: theme.customShadows.widgetWide,
+        boxShadow: theme.customShadows.widgetWide
       },
       "&:active": {
-        boxShadow: theme.customShadows.widgetWide,
+        boxShadow: theme.customShadows.widgetWide
-      },
+      }
     },
     outlined: {
       color: getColor(color, theme),
-      borderColor: getColor(color, theme),
+      borderColor: getColor(color, theme)
     },
     select: {
       backgroundColor: theme.palette.primary.main,
-      color: "#fff",
+      color: "#fff"
-    },
+    }
   });
 
   return (
@@ -102,14 +102,14 @@ function Button({ children, color, className, ...props }) {
           classes={{
             contained: classes.contained,
             root: classes.root,
-            outlined: classes.outlined,
+            outlined: classes.outlined
           }}
           {...props}
           className={classnames(
             {
-              [classes.select]: props.select,
+              [classes.select]: props.select
             },
-            className,
+            className
           )}
         >
           {children}
@@ -172,7 +172,7 @@ function getFontSize(size, variant = "", theme) {
 }
 
 function createStyled(styles, options) {
-  var Styled = function(props) {
+  var Styled = function (props) {
     const { children, ...other } = props;
     return children(other);
   };

src/components/Wrappers/index.js

@@ -0,0 +1 @@
+export { Badge, Typography, Button } from "./Wrappers";

src/pages/tables/Tables.js

@@ -28,14 +28,14 @@ const datatableData = [
   ["Anna Siranush", "Example Inc.", "Yonkers", "NY"],
   ["Avram Sylva", "Example Inc.", "Hartford", "CT"],
   ["Serafima Babatunde", "Example Inc.", "Tampa", "FL"],
-  ["Gaston Festus", "Example Inc.", "Tampa", "FL"],
+  ["Gaston Festus", "Example Inc.", "Tampa", "FL"]
 ];
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   tableOverflow: {
-    overflow: 'auto'
+    overflow: "auto"
   }
-}))
+}));
 
 export default function Tables() {
   const classes = useStyles();
@@ -49,12 +49,17 @@ export default function Tables() {
             data={datatableData}
             columns={["Name", "Company", "City", "State"]}
             options={{
-              filterType: "checkbox",
+              filterType: "checkbox"
             }}
           />
         </Grid>
         <Grid item xs={12}>
-          <Widget title="Material-UI Table" upperTitle noBodyPadding bodyClass={classes.tableOverflow}>
+          <Widget
+            title="Material-UI Table"
+            upperTitle
+            noBodyPadding
+            bodyClass={classes.tableOverflow}
+          >
             <Table data={mock.table} />
           </Widget>
         </Grid>