fix: issue #65 Make drawer smoother

Greenstand · Sep 14, 2021 · cac83ad · cac83ad
1 parent 296fa80
commit cac83ad
Showing 1 changed file with 20 additions and 17 deletions.
diff --git a/src/components/MapDrawer.js b/src/components/MapDrawer.js
@@ -15,6 +15,7 @@ import CustomizedTabs from './common/CustomizedTabs';
 import TokenCard from './TokenCard';
 import LinearProgressBar from './common/LinearProgressBar';
 import PoweredBy from './PoweredBy';
+import Fade from '@material-ui/core/Fade';
 
 const style = (theme) => ({
   map: {
@@ -123,26 +124,28 @@ function MapDrawer(props) {
         </Paper>
       </SwipeableDrawer>
       {!open && (
-        <Paper className={classes.bottomPaper} onClick={handleClickBottom}>
-          <Grid container className={classes.bottomBox}>
-            <Grid item className={classes.bottomArrow}>
-              <ExpandLess color="action" />
-            </Grid>
-            <Grid item className={classes.bottomContent}>
-              <Grid container className={classes.box1}>
-                <Grid item className={classes.bottomItem}>
-                  <Avatar src={avatar} className={classes.avatar} />
-                </Grid>
-                <Grid item className={classes.bottomItem}>
-                  <Typography variant="h6">@Stephanie</Typography>
-                </Grid>
-                <Grid item className={classes.bottomItem}>
-                  <Typography variant="body1">127 tokens</Typography>
+        <Fade in={true} timeout={500}>
+          <Paper className={classes.bottomPaper} onClick={handleClickBottom}>
+            <Grid container className={classes.bottomBox}>
+              <Grid item className={classes.bottomArrow}>
+                <ExpandLess color="action" />
+              </Grid>
+              <Grid item className={classes.bottomContent}>
+                <Grid container className={classes.box1}>
+                  <Grid item className={classes.bottomItem}>
+                    <Avatar src={avatar} className={classes.avatar} />
+                  </Grid>
+                  <Grid item className={classes.bottomItem}>
+                    <Typography variant="h6">@Stephanie</Typography>
+                  </Grid>
+                  <Grid item className={classes.bottomItem}>
+                    <Typography variant="body1">127 tokens</Typography>
+                  </Grid>
                 </Grid>
               </Grid>
             </Grid>
-          </Grid>
-        </Paper>
+          </Paper>
+        </Fade>
       )}
     </>
   );