Dashboard page improvements

Author: kulgavy

src/components/Widget/WidgetView.js

@@ -1,28 +1,56 @@
-import React from 'react';
-import classnames from 'classnames';
-import { Paper, IconButton, Menu, MenuItem, withStyles } from "@material-ui/core";
-import { MoreVert as MoreIcon } from '@material-ui/icons';
+import React from "react";
+import classnames from "classnames";
+import {
+  Paper,
+  IconButton,
+  Menu,
+  MenuItem,
+  withStyles
+} from "@material-ui/core";
+import { MoreVert as MoreIcon } from "@material-ui/icons";
 import Typography from "@material-ui/core/es/Typography/Typography";
 
-const Widget = ({ classes, children, title, noBodyPadding, bodyClass, className, disableWidgetMenu, ...props }) => (
+const Widget = ({
+  classes,
+  children,
+  title,
+  noBodyPadding,
+  bodyClass,
+  className,
+  disableWidgetMenu,
+  ...props
+}) => (
   <div className={classes.widgetWrapper}>
     <Paper className={classes.paper} classes={{ root: classes.widgetRoot }}>
       <div className={classes.widgetHeader}>
-        <Typography variant="headline" color="textSecondary">{title}</Typography>
-        {!disableWidgetMenu && (
-          <IconButton
-            color="primary"
-            classes={{ root: classes.moreButton }}
-            aria-owns="widget-menu"
-            aria-haspopup="true"
-            onClick={() => props.setMoreMenuOpen(true)}
-            buttonRef={props.setMoreButtonRef}
-          >
-            <MoreIcon />
-          </IconButton>
+        {props.header ? (
+          props.header
+        ) : (
+          <React.Fragment>
+            <Typography variant="headline" color="textSecondary">
+              {title}
+            </Typography>
+            {!disableWidgetMenu && (
+              <IconButton
+                color="primary"
+                classes={{ root: classes.moreButton }}
+                aria-owns="widget-menu"
+                aria-haspopup="true"
+                onClick={() => props.setMoreMenuOpen(true)}
+                buttonRef={props.setMoreButtonRef}
+              >
+                <MoreIcon />
+              </IconButton>
+            )}
+          </React.Fragment>
         )}
       </div>
-      <div className={classnames(classes.widgetBody, { [classes.noPadding]: noBodyPadding, [bodyClass]: bodyClass })}>
+      <div
+        className={classnames(classes.widgetBody, {
+          [classes.noPadding]: noBodyPadding,
+          [bodyClass]: bodyClass
+        })}
+      >
         {children}
       </div>
     </Paper>
@@ -33,54 +61,62 @@ const Widget = ({ classes, children, title, noBodyPadding, bodyClass, className,
       onClose={() => props.setMoreMenuOpen(false)}
       disableAutoFocusItem
     >
-      <MenuItem><Typography>Edit</Typography></MenuItem>
-      <MenuItem><Typography>Copy</Typography></MenuItem>
-      <MenuItem><Typography>Delete</Typography></MenuItem>
-      <MenuItem><Typography>Print</Typography></MenuItem>
+      <MenuItem>
+        <Typography>Edit</Typography>
+      </MenuItem>
+      <MenuItem>
+        <Typography>Copy</Typography>
+      </MenuItem>
+      <MenuItem>
+        <Typography>Delete</Typography>
+      </MenuItem>
+      <MenuItem>
+        <Typography>Print</Typography>
+      </MenuItem>
     </Menu>
   </div>
 );
 
 const styles = theme => ({
   widgetWrapper: {
-    display: 'flex',
-    minHeight: '100%',
+    display: "flex",
+    minHeight: "100%"
   },
   widgetHeader: {
     padding: theme.spacing.unit * 3,
     paddingBottom: theme.spacing.unit,
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center"
   },
   widgetRoot: {
-    boxShadow: theme.customShadows.widget,
+    boxShadow: theme.customShadows.widget
   },
   widgetBody: {
     paddingBottom: theme.spacing.unit * 3,
     paddingRight: theme.spacing.unit * 3,
-    paddingLeft: theme.spacing.unit * 3,
+    paddingLeft: theme.spacing.unit * 3
   },
   noPadding: {
-    padding: 0,
+    padding: 0
   },
   paper: {
-    display: 'flex',
-    flexDirection: 'column',
+    display: "flex",
+    flexDirection: "column",
     flexGrow: 1,
-    overflow: 'hidden',
+    overflow: "hidden"
   },
   moreButton: {
     margin: -theme.spacing.unit,
     padding: 0,
     width: 40,
     height: 40,
     color: theme.palette.text.hint,
-    '&:hover': {
+    "&:hover": {
       backgroundColor: theme.palette.primary.main,
-      color: 'rgba(255, 255, 255, 0.35)',
-    },
-  },
+      color: "rgba(255, 255, 255, 0.35)"
+    }
+  }
 });
 
 export default withStyles(styles, { withTheme: true })(Widget);