From 976a84af39fe0d4f26937edfe9b80ec3b6846126 Mon Sep 17 00:00:00 2001
From: Ankit Kokane <97180942+thedudeontitan@users.noreply.github.com>
Date: Tue, 16 May 2023 01:57:55 +0530
Subject: [PATCH] updates for dashboard UI responsiveness for cards and pie
 chart

Signed-off-by: Ankit Kokane <97180942+thedudeontitan@users.noreply.github.com>
---
 client/src/components/Charts/OrgPieChart.js |  2 +-
 client/src/components/View/DashboardView.js | 37 +++++++++++++++++----
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/client/src/components/Charts/OrgPieChart.js b/client/src/components/Charts/OrgPieChart.js
index 9131d030e..40d10aec1 100644
--- a/client/src/components/Charts/OrgPieChart.js
+++ b/client/src/components/Charts/OrgPieChart.js
@@ -98,7 +98,7 @@ export class OrgPieChart extends Component {
 		const { classes } = this.props;
 		return (
 			<div className={classes.container}>
-				<PieChart width={485} height={290} className={classes.chart}>
+				<PieChart width={250} height={290} className={classes.chart}>
 					<Legend align="right" height={10} />
 					<Pie
 						data={data}
diff --git a/client/src/components/View/DashboardView.js b/client/src/components/View/DashboardView.js
index 95c764666..0b9b7d3ea 100644
--- a/client/src/components/View/DashboardView.js
+++ b/client/src/components/View/DashboardView.js
@@ -41,8 +41,13 @@ const styles = theme => {
 			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',
@@ -50,8 +55,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': {
@@ -65,8 +75,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',
@@ -92,6 +108,11 @@ const styles = theme => {
 		},
 		center: {
 			textAlign: 'center'
+		},
+		pie: {
+			[theme.breakpoints.up('md')]: {
+				marginLeft: '25%'
+			}
 		}
 	};
 };
@@ -255,7 +276,9 @@ export class DashboardView extends Component {
 							<Card className={`${classes.section} ${classes.center}`}>
 								<h5>Transactions by Organization</h5>
 								<hr />
-								<OrgPieChart transactionByOrg={transactionByOrg} />
+								<div className={classes.pie}>
+									<OrgPieChart transactionByOrg={transactionByOrg} />
+								</div>
 							</Card>
 						</Col>
 					</Row>