fix: edit dash width (Greenstand#329)

gwynndp · Feb 18, 2022 · eea14a3 · eea14a3
1 parent 99d8193
commit eea14a3
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 51 deletions.
diff --git a/src/components/DashStat.js b/src/components/DashStat.js
@@ -1,22 +1,40 @@
 import React from 'react';
-import Grid from '@material-ui/core/Grid';
 import { withStyles } from '@material-ui/core/styles';
 import { CircularProgress } from '@material-ui/core';
 
 const style = (theme) => ({
-  dashstatContainer: {
-    height: '95px',
-    backgroundColor: 'white',
+  dashstatCard: {
     borderRadius: '10px',
+    display: 'flex',
+    backgroundColor: '#FFF',
+    flexDirection: 'row',
+    gap: '1rem',
+    width: '245px',
+
+    '@media (max-width: 900px)': {
+      flexDirection: 'column',
+      gap: 0,
+      height: '175px',
+      alignItems: 'center',
+      width: '200px',
+      textAlign: 'center',
+    },
   },
   dashstatIconContainer: {
+    display: 'flex',
+    flexWrap: 'wrap',
     width: '58px',
     height: '58px',
     marginTop: '20px',
     marginLeft: '30px',
     marginBottom: '20px',
     float: 'left',
     position: 'relative',
+
+    '@media (max-width: 900px)': {
+      height: '150px',
+      marginLeft: 0,
+    },
   },
   dashstatCircleIcon: {
     borderRadius: '29px',
@@ -27,38 +45,27 @@ const style = (theme) => ({
     top: '0',
     position: 'absolute',
   },
+
   dashstatIcon: {
     margin: '0 auto',
     left: '11px',
     bottom: '12px',
     width: '35px',
     height: '35px',
     position: 'absolute',
+
+    '@media (max-width: 900px)': {
+      top: '10px',
+    },
   },
+
   dashstatText: {
-    float: 'left',
-    marginLeft: '22px',
-    height: '100%',
-    width: '110px',
-    boxSizing: 'border-box',
-    position: 'relative',
+    display: 'block',
     fontFamily: theme.typography.fontFamily,
   },
-  dashstatData: {
-    display: 'inline-block',
-    position: 'absolute',
-    top: '18px',
-    marginBlockStart: 0,
-    marginBlockEnd: 0,
-  },
+
   dashstatLabel: {
-    display: 'inline-block',
     fontSize: '12px',
-    bottom: '20px',
-    marginBlockStart: 0,
-    marginBlockEnd: 0,
-    width: '110px',
-    position: 'absolute',
   },
 });
 
@@ -75,27 +82,19 @@ function DashStat(props) {
   const { data, Icon, label, color = '#000000', classes } = props;
 
   return (
-    <Grid item xs={3}>
-      <div className={classes.dashstatContainer}>
-        <div className={classes.dashstatIconContainer}>
-          <div
-            className={classes.dashstatCircleIcon}
-            style={{ backgroundColor: color }}
-          ></div>
-          <Icon
-            className={classes.dashstatIcon}
-            style={{ color: color }}
-          ></Icon>
-        </div>
-        <div className={classes.dashstatText}>
-          <h3 className={classes.dashstatData}>
-            {data || <CircularProgress size={'32px'} style={{ color }} />}
-          </h3>
-          <br />
-          <p className={classes.dashstatLabel}>{label}</p>
-        </div>
+    <div className={classes.dashstatCard}>
+      <div className={classes.dashstatIconContainer}>
+        <div
+          className={classes.dashstatCircleIcon}
+          style={{ backgroundColor: color }}
+        ></div>
+        <Icon className={classes.dashstatIcon} style={{ color: color }}></Icon>
+      </div>
+      <div className={classes.dashstatText}>
+        <h3>{data || <CircularProgress size={'32px'} style={{ color }} />}</h3>
+        <p className={classes.dashstatLabel}>{label}</p>
       </div>
-    </Grid>
+    </div>
   );
 }
 

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
@@ -103,7 +103,7 @@ function Home(props) {
       <Grid className={classes.rightBox}>
         <Box className={classes.box2}>
           <Grid container spacing={5} className={classes.version}>
-            <Grid item xs={3}>
+            <Grid item>
               <GreenStandSvgLogo />
               <Box display="inline" ml={2}>
                 Version: {`${process.env.REACT_APP_VERSION}`}
@@ -146,12 +146,7 @@ function Home(props) {
                 </Grid>
               )}
           </Grid>
-          <Grid
-            container
-            spacing={5}
-            className={classes.welcomeBox}
-            justify="center"
-          >
+          <div className={classes.dashstatWraper}>
             {hasPermission(appContext.user, [
               POLICIES.SUPER_PERMISSION,
               POLICIES.LIST_TREE,
@@ -197,7 +192,7 @@ function Home(props) {
                   </Grid>
                 </Grid>
               )}
-          </Grid>
+          </div>
         </Box>
       </Grid>
     </Grid>

diff --git a/src/components/Home/Home.styles.js b/src/components/Home/Home.styles.js
@@ -14,6 +14,7 @@ const styles = (theme) => ({
   },
   version: {
     justifyContent: 'space-between',
+    paddingBlockEnd: '0.5rem',
   },
   timeBox: {
     display: 'flex',
@@ -64,6 +65,12 @@ const styles = (theme) => ({
       minWidth: '336px',
     },
   },
+  dashstatWraper: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: '20px',
+    flexWrap: 'wrap',
+  },
 });
 
 export default styles;