Enhance key numbers section

Author: modularcoder

src/Dashboard/KeyNumbers/KeyNumbers.js

@@ -1,25 +1,75 @@
 import React from 'react'
+import clsx from 'clsx'
 import PropTypes from 'prop-types'
 import { makeStyles } from '@material-ui/core/styles'
-import Paper from '@material-ui/core/Paper'
-import Grid from '@material-ui/core/Grid'
+import { Paper, Grid, Typography } from '@material-ui/core'
 
 const KeyNumbers = props => {
   const classes = useStyles()
 
   return (
     <>
       <Grid item xs={6} sm={3}>
-        <Paper className={classes.paper}>xs=3</Paper>
+        <Paper className={classes.paper}>
+          Subscriptions
+          <Grid container spacing={0}>
+            <Grid item xs={6} md={12} lg={6}>
+              <Typography variant="body1" className={classes.value}>
+                139 <sup className={clsx(classes.valueChange, classes.positive)}>+5%</sup>
+              </Typography>
+            </Grid>
+            <Grid item xs={6} md={12} lg={6}>
+              -
+            </Grid>
+          </Grid>
+        </Paper>
       </Grid>
       <Grid item xs={6} sm={3}>
-        <Paper className={classes.paper}>xs=3</Paper>
+        <Paper className={classes.paper}>
+          Monthly Revenue
+          <Grid container spacing={0}>
+            <Grid item xs={6} md={12} lg={6}>
+              <Typography variant="body1" className={classes.value}>
+                24350${' '}
+                <sup className={clsx(classes.valueChange, classes.positive)}>+13%</sup>
+              </Typography>
+            </Grid>
+            <Grid item xs={6} md={12} lg={6}>
+              -
+            </Grid>
+          </Grid>
+        </Paper>
       </Grid>
       <Grid item xs={6} sm={3}>
-        <Paper className={classes.paper}>xs=3</Paper>
+        <Paper className={classes.paper}>
+          Monthly Churn
+          <Grid container spacing={0}>
+            <Grid item xs={6} md={12} lg={6}>
+              <Typography variant="body1" className={classes.value}>
+                13 <sup className={clsx(classes.valueChange, classes.negative)}>+10%</sup>
+              </Typography>
+            </Grid>
+            <Grid item xs={6} md={12} lg={6}>
+              -
+            </Grid>
+          </Grid>
+        </Paper>
       </Grid>
       <Grid item xs={6} sm={3}>
-        <Paper className={classes.paper}>xs=3</Paper>
+        <Paper className={classes.paper}>
+          Total Users
+          <Grid container spacing={0}>
+            <Grid item xs={6} md={12} lg={6}>
+              <Typography variant="body1" className={classes.value}>
+                48205{' '}
+                <sup className={clsx(classes.valueChange, classes.positive)}>+30%</sup>
+              </Typography>
+            </Grid>
+            <Grid item xs={6} md={12} lg={6}>
+              -
+            </Grid>
+          </Grid>
+        </Paper>
       </Grid>
     </>
   )
@@ -33,8 +83,19 @@ const useStyles = makeStyles(theme => ({
   },
   paper: {
     padding: theme.spacing(2),
-    textAlign: 'center',
+    textAlign: 'left',
     color: theme.palette.text.secondary,
+    height: '100%',
+  },
+  value: {
+    fontWeight: 'bold',
+  },
+  valueChange: {},
+  negative: {
+    color: theme.palette.text.negative,
+  },
+  positive: {
+    color: theme.palette.text.positive,
   },
 }))
 

src/Dashboard/Subscriptions/Subscriptions.js

@@ -32,7 +32,7 @@ const Subscriptions = props => {
       />
       <CardContent className={classes.cardContent}>
         <Grid container spacing={4}>
-          <Grid item sm={9} className={classes.chartBox}>
+          <Grid item xs={12} sm={8} md={9} className={classes.chartBox}>
             <div className={classes.chartContainer}>
               <div className={classes.chart}>
                 <Line
@@ -42,7 +42,7 @@ const Subscriptions = props => {
               </div>
             </div>
           </Grid>
-          <Grid item sm={3} className={classes.ratingBox}>
+          <Grid item xs={12} sm={4} md={3} className={classes.ratingBox}>
             {subscriptionsItems.map(({ name, ratio, value }) => (
               <div key={name}>
                 <Grid container>

src/_theme/index.js

@@ -84,6 +84,8 @@ const baseTheme = createMuiTheme({
     },
     text: {
       secondary: 'rgba(102, 102, 102, 0.83)',
+      positive: '#8cd136',
+      negative: '#e35959',
     },
   },
   typography: {