fix issues #2

Author: michaeldaineka

package.json

@@ -2,7 +2,7 @@
   "name": "flatlogic-material",
   "version": "1.0.0",
   "dependencies": {
-    "@material-ui/core": "^3.9.2",
+    "@material-ui/core": "3.9.2",
     "@material-ui/icons": "^3.0.2",
     "apexcharts": "^3.6.3",
     "classnames": "^2.2.6",

src/components/App.js

@@ -7,7 +7,12 @@ import Layout from './Layout';
 import Error from '../pages/error';
 import Login from '../pages/login';
 
-const theme = createMuiTheme({...themes.default, ...overrides});
+const theme = createMuiTheme({
+    ...themes.default,
+    ...overrides,
+    typography: {
+        useNextVariants: true,
+    },});
 
 const PrivateRoute = ({ component, ...rest }) => {
   return (
@@ -16,7 +21,7 @@ const PrivateRoute = ({ component, ...rest }) => {
       localStorage.getItem('id_token') ? (
         React.createElement(component, props)
       ) : (
-        <Redirect
+          <Redirect
           to={{
             pathname: '/login',
             state: { from: props.location },

src/components/Header/HeaderView.js

@@ -137,7 +137,7 @@ const Header = ({ classes, isSidebarOpened, toggleSidebar, ...props }) => (
           badgeContent={
             props.isNotificationsUnread ? notifications.length : null
           }
-          color="warning"
+          colortheme="warning"
         >
           <NotificationsIcon classes={{ root: classes.headerIcon }} />
         </Badge>

src/components/Sidebar/SidebarView.js

@@ -43,7 +43,7 @@ const structure = [
   { id: 9, label: 'FAQ', link: '', icon: <FAQIcon />},
   { id: 10, type: 'divider' },
   { id: 11, type: 'title', label: 'PROJECTS' },
-  { id: 12, label: 'My recent', link: '', icon: <Dot size="large" color="warning" /> },
+  { id: 12, label: 'My recent', link: '', icon: <Dot size="large" color="secondary" /> },
   { id: 13, label: 'Starred', link: '', icon: <Dot size="large" color="primary" /> },
   { id: 14, label: 'Background', link: '', icon: <Dot size="large" color="secondary" /> },
 ];

src/components/Widget/WidgetView.js

@@ -27,7 +27,7 @@ const Widget = ({
           props.header
         ) : (
           <React.Fragment>
-            <Typography variant="headline" color="textSecondary">
+            <Typography variant="h5" color="textSecondary">
               {title}
             </Typography>
             {!disableWidgetMenu && (

src/components/Wrappers/Wrappers.js

@@ -68,7 +68,7 @@ const createStyled = (styles, options) => {
 const BadgeExtended = ({ classes, theme, children, colorBrightness, ...props }) => {
   const Styled = createStyled({
     badge: {
-      backgroundColor: getColor(props.color, theme, colorBrightness)
+      backgroundColor: getColor(props.colortheme, theme, colorBrightness)
     }
   });
 
@@ -102,7 +102,7 @@ export const Badge = withStyles(
 const TypographyExtended = ({ theme, children, weight, size, colorBrightness, ...props }) => (
   <TypographyBase
     style={{
-      color: getColor(props.color, theme, colorBrightness),
+      color: getColor(props.colortheme, theme, colorBrightness),
       fontWeight: getFontWeight(weight),
       fontSize: getFontSize(size, props.variant, theme)
     }}
@@ -117,11 +117,11 @@ export const Typography = withTheme()(TypographyExtended);
 const ButtonExtended = ({ theme, children, ...props }) => {
   const Styled = createStyled({
     button: {
-      backgroundColor: getColor(props.color, theme),
+      backgroundColor: getColor(props.colortheme, theme),
       boxShadow: theme.customShadows.widget,
       color: 'white',
       '&:hover': {
-        backgroundColor: getColor(props.color, theme, 'light'),
+        backgroundColor: getColor(props.colortheme, theme, 'light'),
         boxShadow: theme.customShadows.widgetWide,
       }
     }

src/pages/dashboard/Dashboard.js

@@ -314,7 +314,7 @@ const Dashboard = ({ classes, theme, ...props }) => {
             bodyClass={classes.mainChartBody}
             header={
               <div className={classes.mainChartHeader}>
-                <Typography variant="headline" color="textSecondary">
+                <Typography variant="h5" color="textSecondary">
                   Daily Line Chart
                 </Typography>
                 <div className={classes.mainChartHeaderLabels}>

src/pages/dashboard/components/BigStat/BigStat.js

@@ -61,7 +61,7 @@ class BigStat extends PureComponent {
             <Typography size="xxl" color="textSecondary">
               {total[value]}
             </Typography>
-            <Typography color={total.percent.profit ? "success" : "secondary"}>
+            <Typography color={total.percent.profit ? "primary" : "secondary"}>
               &nbsp;{total.percent.profit ? "+" : "-"}
               {total.percent.value}%
             </Typography>

src/pages/dashboard/components/Table/Table.js

@@ -21,8 +21,8 @@ const TableComponent = ({ data }) => {
     <Table className="mb-0">
       <TableHead>
         <TableRow>
-          {keys.map(key => (
-            <TableCell>{key}</TableCell>
+          {keys.map((key, i) => (
+            <TableCell key={i}>{key}</TableCell>
           ))}
         </TableRow>
       </TableHead>
@@ -37,7 +37,7 @@ const TableComponent = ({ data }) => {
             <TableCell>{city}</TableCell>
             <TableCell>
               <Button
-                color={states[status.toLowerCase()]}
+                colortheme={states[status.toLowerCase()]}
                 size="small"
                 className="px-2"
                 variant="contained"

src/pages/notifications/NotificationsContainer.js

@@ -17,7 +17,7 @@ const positions = [
 
 export default compose(
   withStyles(theme => ({
-    progress: {
+    /*progress: {
       visibility: "hidden"
     },
     notification: {
@@ -29,7 +29,7 @@ export default compose(
     },
     notificationComponent: {
       paddingRight: theme.spacing.unit * 4
-    }
+    }*/
   })),
   withState("notificationsPosition", "setNotificationPosition", 2),
   withState("errorToastId", "setErrorToastId", null),