Skip to content
Permalink
Browse files

Updated styles

  • Loading branch information...
devias-io committed May 13, 2019
1 parent 7f07d05 commit 6109c74820fec3d4d15e628f57529c258a0f81af
@@ -8,8 +8,8 @@
- Updated few icons to match @material-ui v4 updates
- Updated React version to `16.8.6` to support React Hooks
- Implemented `jsconfig.json` file and removed `.env` to match React v16.8.6 absolute paths
- Updated Dashboard view top widgets styles and structure
- Updated chart styles and options
- [#7](https://github.com/devias-io/react-material-dashboard/issues/7) Removed yarn.lock from commit

## [0.1.1] 2019-05-11

@@ -12,7 +12,7 @@ import { Typography } from '@material-ui/core';

// Material icons
import {
ArrowDropDown as ArrowDropDownIcon,
ArrowDownward as ArrowDownwardIcon,
Money as MoneyIcon
} from '@material-ui/icons';

@@ -34,25 +34,38 @@ class Budget extends Component {
className={rootClassName}
>
<div className={classes.content}>
<Typography
className={classes.title}
variant="body2"
>
BUDGET
</Typography>
<div className={classes.details}>
<Typography variant="h3">$24,000</Typography>
<Typography
className={classes.difference}
className={classes.title}
variant="body2"
>
<ArrowDropDownIcon />
12%
BUDGET
</Typography>
<Typography
className={classes.value}
variant="h3"
>
$24,000
</Typography>
</div>
<div className={classes.iconWrapper}>
<MoneyIcon className={classes.icon} />
</div>
</div>
<div className={classes.iconWrapper}>
<MoneyIcon className={classes.icon} />
<div className={classes.footer}>
<Typography
className={classes.difference}
variant="body2"
>
<ArrowDownwardIcon />
12%
</Typography>
<Typography
className={classes.caption}
variant="caption"
>
Since last month
</Typography>
</div>
</Paper>
);
@@ -1,39 +1,46 @@
export default theme => ({
root: {
padding: theme.spacing.unit * 3,
display: 'flex',
alignItems: 'center'
padding: theme.spacing.unit * 3
},
content: {
flexGrow: 1
alignItems: 'center',
display: 'flex'
},
title: {
fontWeight: 700,
color: theme.palette.text.secondary
color: theme.palette.text.secondary,
fontWeight: 700
},
value: {
marginTop: theme.spacing.unit
},
iconWrapper: {
alignItems: 'center',
backgroundColor: theme.palette.danger.main,
borderRadius: '50%',
display: 'inline-flex',
height: '4rem',
justifyContent: 'center',
marginLeft: 'auto',
width: '4rem'
},
details: {
marginTop: theme.spacing.unit,
icon: {
color: theme.palette.common.white,
fontSize: '2rem',
height: '2rem',
width: '2rem'
},
footer: {
marginTop: theme.spacing.unit * 2,
display: 'flex',
alignItems: 'center'
},
difference: {
fontWeight: 700,
marginLeft: theme.spacing.unit,
backgroundColor: theme.palette.danger.light,
color: theme.palette.danger.dark,
display: 'flex',
alignItems: 'center',
paddingTop: theme.spacing.unit * 0.5,
paddingLeft: theme.spacing.unit * 0.5,
paddingBottom: theme.spacing.unit * 0.5,
paddingRight: theme.spacing.unit,
borderRadius: '3px'
color: theme.palette.danger.dark,
display: 'inline-flex',
fontWeight: 700
},
iconWrapper: {},
icon: {
color: theme.palette.common.neutral,
width: '4rem',
height: '4rem',
fontSize: '4rem'
caption: {
marginLeft: theme.spacing.unit
}
});
@@ -11,7 +11,7 @@ import { withStyles } from '@material-ui/core';
import { Typography } from '@material-ui/core';

// Material icons
import { MonetizationOn as MonetizationOnIcon } from '@material-ui/icons';
import { AttachMoney as AttachMoneyIcon } from '@material-ui/icons';

// Shared components
import { Paper } from 'components';
@@ -31,23 +31,23 @@ class Profit extends Component {
className={rootClassName}
>
<div className={classes.content}>
<Typography
className={classes.title}
variant="body2"
>
TOTAL PROFIT
</Typography>
<div className={classes.details}>
<Typography
className={classes.amount}
className={classes.title}
variant="body2"
>
TOTAL PROFIT
</Typography>
<Typography
className={classes.value}
variant="h3"
>
$23,200
</Typography>
</div>
</div>
<div className={classes.iconWrapper}>
<MonetizationOnIcon className={classes.icon} />
<div className={classes.iconWrapper}>
<AttachMoneyIcon className={classes.icon} />
</div>
</div>
</Paper>
);
@@ -2,30 +2,34 @@ export default theme => ({
root: {
backgroundColor: theme.palette.primary.main,
borderColor: theme.palette.primary.main,
padding: theme.spacing.unit * 3,
display: 'flex',
alignItems: 'center'
padding: theme.spacing.unit * 3
},
content: {
flexGrow: 1
display: 'flex',
alignItems: 'center'
},
details: {},
title: {
fontWeight: 700,
color: theme.palette.common.white
},
details: {
marginTop: theme.spacing.unit,
display: 'flex',
alignItems: 'center'
},
amount: {
value: {
color: theme.palette.common.white
},
iconWrapper: {},
icon: {
color: theme.palette.common.white,
width: '4rem',
iconWrapper: {
alignItems: 'center',
backgroundColor: theme.palette.common.white,
borderRadius: '50%',
display: 'inline-flex',
height: '4rem',
fontSize: '4rem'
justifyContent: 'center',
marginLeft: 'auto',
width: '4rem'
},
icon: {
color: theme.palette.primary.main,
width: '2rem',
height: '2rem',
fontSize: '2rem'
}
});
@@ -11,7 +11,7 @@ import { withStyles } from '@material-ui/core';
import { Typography, LinearProgress } from '@material-ui/core';

// Material icons
import { Timeline as TimelineIcon } from '@material-ui/icons';
import { InsertChartOutlined as InsertChartIcon } from '@material-ui/icons';

// Shared components
import { Paper } from 'components';
@@ -31,24 +31,29 @@ class Progress extends Component {
className={rootClassName}
>
<div className={classes.content}>
<Typography
className={classes.title}
variant="body2"
>
PROGRESS
</Typography>
<div className={classes.details}>
<Typography variant="h3">75.5%</Typography>
<div className={classes.progressWrapper}>
<LinearProgress
value={75.5}
variant="determinate"
/>
</div>
<Typography
className={classes.title}
variant="body2"
>
PROGRESS
</Typography>
<Typography
className={classes.value}
variant="h3"
>
75.5%
</Typography>
</div>
<div className={classes.iconWrapper}>
<InsertChartIcon className={classes.icon} />
</div>
</div>
<div className={classes.iconWrapper}>
<TimelineIcon className={classes.icon} />
<div className={classes.footer}>
<LinearProgress
value={75.5}
variant="determinate"
/>
</div>
</Paper>
);
@@ -1,31 +1,37 @@
export default theme => ({
root: {
padding: theme.spacing.unit * 3,
display: 'flex',
alignItems: 'center'
padding: theme.spacing.unit * 3
},
content: {
flexGrow: 1
display: 'flex',
alignItems: 'center',
paddingRight: theme.spacing.unit * 3
},
details: {},
title: {
fontWeight: 700,
color: theme.palette.text.secondary
color: theme.palette.text.secondary,
fontWeight: 700
},
details: {
marginTop: theme.spacing.unit,
display: 'flex',
alignItems: 'center'
value: {
marginTop: theme.spacing.unit
},
progressWrapper: {
flexGrow: 1,
paddingLeft: theme.spacing.unit * 2,
paddingRight: theme.spacing.unit * 2
iconWrapper: {
alignItems: 'center',
backgroundColor: theme.palette.primary.main,
borderRadius: '50%',
display: 'inline-flex',
height: '4rem',
justifyContent: 'center',
marginLeft: 'auto',
width: '4rem'
},
iconWrapper: {},
icon: {
color: theme.palette.common.neutral,
width: '4rem',
height: '4rem',
fontSize: '4rem'
color: theme.palette.common.white,
fontSize: '2rem',
height: '2rem',
width: '2rem'
},
footer: {
marginTop: theme.spacing.unit * 3
}
});
Oops, something went wrong.

0 comments on commit 6109c74

Please sign in to comment.
You can’t perform that action at this time.