Design improvements: fix charts & overlay on moble screen

Author: kulgavy

src/components/Notification/Notification.js

@@ -104,7 +104,7 @@ const styles = theme => ({
     boxShadow: 'none',
   },
   notificationIconContainer: {
-    width: 45,
+    minWidth: 45,
     height: 45,
     borderRadius: 45,
     display: 'flex',

src/pages/dashboard/Dashboard.js

@@ -272,33 +272,33 @@ const Dashboard = ({ classes, theme, ...props }) => {
         <Grid item lg={3} md={4} sm={6} xs={12}>
           <Widget title="Revenue Breakdown" upperTitle className={classes.card}>
             <Grid container spacing={16}>
-              <Grid item sm={6}>
-                <PieChart
-                  width={160}
-                  height={144}
-                  margin={{ left: theme.spacing.unit * 2 }}
-                >
-                  <Pie
-                    data={PieChartData}
-                    innerRadius={45}
-                    outerRadius={60}
-                    dataKey="value"
+              <Grid item xs={6}>
+                <ResponsiveContainer width="100%" height={144}>
+                  <PieChart
+                    margin={{ left: theme.spacing.unit * 2 }}
                   >
-                    {PieChartData.map((entry, index) => (
-                      <Cell
-                        key={`cell-${index}`}
-                        fill={theme.palette[entry.color].main}
-                      />
-                    ))}
-                  </Pie>
-                </PieChart>
+                    <Pie
+                      data={PieChartData}
+                      innerRadius={45}
+                      outerRadius={60}
+                      dataKey="value"
+                    >
+                      {PieChartData.map((entry, index) => (
+                        <Cell
+                          key={`cell-${index}`}
+                          fill={theme.palette[entry.color].main}
+                        />
+                      ))}
+                    </Pie>
+                  </PieChart>
+                  </ResponsiveContainer>
               </Grid>
-              <Grid item sm={6}>
+              <Grid item xs={6}>
                 <div className={classes.pieChartLegendWrapper}>
                   {PieChartData.map(({ name, value, color }, index) => (
                     <div key={color} className={classes.legendItemContainer}>
                       <Dot color={color} />
-                      <Typography>&nbsp;{name}&nbsp;</Typography>
+                      <Typography style={{ whiteSpace: 'nowrap' }}>&nbsp;{name}&nbsp;</Typography>
                       <Typography color="textSecondary">
                         &nbsp;{value}
                       </Typography>
@@ -311,6 +311,7 @@ const Dashboard = ({ classes, theme, ...props }) => {
         </Grid>
         <Grid item xs={12}>
           <Widget
+            bodyClass={classes.mainChartBody}
             header={
               <div className={classes.mainChartHeader}>
                 <Typography variant="headline" color="textSecondary">
@@ -348,7 +349,7 @@ const Dashboard = ({ classes, theme, ...props }) => {
               </div>
             }
           >
-            <ResponsiveContainer width="100%" height={350}>
+            <ResponsiveContainer width="100%" minWidth={500} height={350}>
               <ComposedChart
                 margin={{ top: 0, right: -15, left: -15, bottom: 0 }}
                 data={mainChartData}
@@ -488,6 +489,9 @@ const styles = theme => ({
   serverOverviewElementChartWrapper: {
     width: "100%"
   },
+  mainChartBody: {
+    overflowX: 'auto',
+  },
   mainChartHeader: {
     width: "100%",
     display: "flex",
@@ -504,8 +508,8 @@ const styles = theme => ({
       order: 3,
       width: '100%',
       justifyContent: 'center',
-      marginTop: theme.spacing.unit,
-      marginBottom: theme.spacing.unit,
+      marginTop: theme.spacing.unit * 3,
+      marginBottom: theme.spacing.unit * 2,
     }
   },
   mainChartHeaderLabel: {

src/pages/icons/IconsView.js

@@ -14701,7 +14701,8 @@ const styles = theme => ({
     paddingLeft: `${theme.spacing.unit * 4}px !important`,
     paddingRight: `${theme.spacing.unit * 4}px !important`,
     color: theme.palette.text.secondary,
-    fontSize: 24
+    fontSize: 24,
+    overflowX: 'hidden'
   },
   materialIconText: {
     marginLeft: theme.spacing.unit * 2,

src/pages/login/LoginView.js

@@ -351,8 +351,12 @@ const styles = theme => ({
     marginLeft: theme.spacing.unit * 4
   },
   copyright: {
-    position: "absolute",
-    bottom: theme.spacing.unit * 2
+    marginTop: theme.spacing.unit * 4,
+    whiteSpace: 'nowrap',
+    [theme.breakpoints.up("md")]: {
+      position: "absolute",
+      bottom: theme.spacing.unit * 2,
+    }
   }
 });
 

yarn.lock

@@ -5283,10 +5283,6 @@ jsx-ast-utils@^2.0.1:
   dependencies:
     array-includes "^3.0.3"
 
-keycode@^2.1.9:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.2.0.tgz#3d0af56dc7b8b8e5cba8d0a97f107204eec22b04"
-
 killable@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"