UI adjustments

Author: modularcoder

src/Dashboard/Subscriptions/Subscriptions.js

@@ -2,11 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import {
   makeStyles,
-  ButtonGroup,
-  Button,
   Grid,
-  Paper,
-  Avatar,
   Card,
   CardHeader,
   CardContent,
@@ -16,6 +12,14 @@ import {
 } from '@material-ui/core'
 import { Timeline as IconTimeline, MoreVert as IconMoreVert } from '@material-ui/icons'
 
+const subscriptionsItems = [
+  { name: 'GitHub', ratio: 55.3, value: Math.round(55.3 * 144) },
+  { name: 'MaterialUI', ratio: 25.7, value: Math.round(25.7 * 144) },
+  { name: 'Google', ratio: 15.6, value: Math.round(15.6 * 144) },
+  { name: 'ModularCode', ratio: 8.4, value: Math.round(8.4 * 144) },
+  { name: 'GH', ratio: 5.5, value: Math.round(5.5 * 144) },
+]
+
 const Subscriptions = props => {
   const classes = useStyles()
 
@@ -37,26 +41,34 @@ const Subscriptions = props => {
             <div className={classes.chart}></div>
           </Grid>
           <Grid item sm={3} className={classes.ratingBox}>
-            <div>
-              <Typography>GitHub.com</Typography>
-              <LinearProgress variant="determinate" value={55} color="primary" />
-            </div>
-            <div>
-              <Typography>MaterialUI.com</Typography>
-              <LinearProgress variant="determinate" value={25} color="primary" />
-            </div>
-            <div>
-              <Typography>Google</Typography>
-              <LinearProgress variant="determinate" value={15} color="primary" />
-            </div>
-            <div>
-              <Typography>ModularCode.io</Typography>
-              <LinearProgress variant="determinate" value={8} color="primary" />
-            </div>
-            <div>
-              <Typography>TypeScript</Typography>
-              <LinearProgress variant="determinate" value={5} color="primary" />
-            </div>
+            {subscriptionsItems.map(({ name, ratio, value }) => (
+              <div>
+                <Grid container>
+                  <Grid item xs>
+                    <Typography variant="body1">{name}</Typography>
+                  </Grid>
+                  <Grid item xs className={classes.ratingItemValueBox}>
+                    <Typography
+                      align="right"
+                      variant="body2"
+                      display="inline"
+                      className={classes.ratingItemValue}
+                    >
+                      {value}
+                    </Typography>
+                    <Typography
+                      align="left"
+                      variant="body2"
+                      color="textSecondary"
+                      className={classes.ratingItemRatio}
+                    >
+                      {ratio}%
+                    </Typography>
+                  </Grid>
+                </Grid>
+                <LinearProgress variant="determinate" value={ratio} color="primary" />
+              </div>
+            ))}
           </Grid>
         </Grid>
       </CardContent>
@@ -68,7 +80,8 @@ Subscriptions.propTypes = {}
 
 const useStyles = makeStyles(theme => ({
   cardHeader: {
-    borderBottom: '1px solid rgba(24,28,33,0.06)',
+    borderBottom: '1px solid',
+    borderBottomColor: theme.palette.divider,
   },
   cardBody: {
     overflow: 'hidden',
@@ -83,11 +96,12 @@ const useStyles = makeStyles(theme => ({
     marginRight: '.3em',
   },
   chartBox: {
-    borderRight: '1px solid rgba(24,28,33,0.06)',
+    borderRight: '1px solid',
+    borderRightColor: theme.palette.divider,
   },
   chart: {
     width: '100%',
-    paddingBottom: '30%',
+    paddingBottom: '25%',
     background: '#efefef',
   },
   cardContent: {
@@ -100,6 +114,19 @@ const useStyles = makeStyles(theme => ({
     flexDirection: 'column',
     justifyContent: 'space-between',
   },
+  ratingItemValueBox: {
+    textAlign: 'right',
+    fontSize: '0.7em',
+  },
+  ratingItemValue: {
+    display: 'inline-block',
+  },
+  ratingItemRatio: {
+    marginLeft: 4,
+    display: 'inline-block',
+    width: '3em',
+    // fontSize: '1em',
+  },
 }))
 
 export default Subscriptions

src/_common/AppFooter/AppFooter.js

@@ -9,13 +9,15 @@ const Footer = () => {
   return (
     <footer className={classes.footer}>
       <Typography variant="body2" color="textSecondary" align="left">
-        {'Find me on: '}
-        <Link color="primary" href="https://github.com/modularcoder">
-          GitHub
-        </Link>
+        {'Copyright your company 2020 '}
         {' | '}
         <Link color="primary" href="https://twitter.com/modularcoder">
-          Twitter
+          MIT License
+        </Link>
+      </Typography>
+      <Typography variant="body2" color="textSecondary" align="center">
+        <Link color="primary" href="https://github.com/modularcoder">
+          GitHub
         </Link>
         {' | '}
         <Link color="primary" href="https://www.linkedin.com/in/modularcoder/">

src/_theme/index.js

@@ -73,6 +73,7 @@ const baseTheme = createMuiTheme({
     },
   },
   palette: {
+    divider: 'rgba(30, 30, 30, 0.06)',
     secondary: {
       main: '#8cd136', //indigo[600],
     },
@@ -81,6 +82,9 @@ const baseTheme = createMuiTheme({
       // main: '#9027d1', //'#619f30',
       // main: blue[600], //'#619f30',
     },
+    text: {
+      secondary: 'rgba(102, 102, 102, 0.83)',
+    },
   },
   typography: {
     h1: {