diff --git a/client/src/components/Charts/OrgPieChart.js b/client/src/components/Charts/OrgPieChart.js index 9131d030e..d55950ee7 100644 --- a/client/src/components/Charts/OrgPieChart.js +++ b/client/src/components/Charts/OrgPieChart.js @@ -98,8 +98,8 @@ export class OrgPieChart extends Component { const { classes } = this.props; return (
- - + + { boxShadow: dark ? '1px 2px 2px rgb(215, 247, 247)' : undefined }, count: { - marginTop: '55%', - color: dark ? '#ffffff' : undefined + color: dark ? '#ffffff' : undefined, + [theme.breakpoints.down('md')]: { + marginTop: '35%' + }, + [theme.breakpoints.up('md')]: { + marginTop: '55%' + } }, statistic: { display: 'block', @@ -65,8 +70,13 @@ const styles = theme => { height: '100%', width: '25%', textAlign: 'center', - fontSize: '18pt', - color: dark ? '#ffffff' : '#000000' + color: dark ? '#ffffff' : '#000000', + [theme.breakpoints.down('md')]: { + fontSize: '8pt' + }, + [theme.breakpoints.up('md')]: { + fontSize: '18pt' + } }, vdivide: { '&::after': { @@ -80,8 +90,14 @@ const styles = theme => { }, avatar: { justifyContent: 'center', - marginLeft: '60%', - marginTop: '65%' + [theme.breakpoints.down('md')]: { + marginLeft: '25%', + marginTop: '15%' + }, + [theme.breakpoints.up('md')]: { + marginLeft: '60%', + marginTop: '65%' + } }, node: { color: dark ? '#183a37' : '#21295c', @@ -107,6 +123,11 @@ const styles = theme => { }, center: { textAlign: 'center' + }, + pie: { + [theme.breakpoints.up('md')]: { + marginLeft: '25%' + } } }; }; @@ -281,7 +302,9 @@ export class DashboardView extends Component {
Transactions by Organization

- +
+ +