From cac83ad26903e7cfce9ab771075b821579d199e5 Mon Sep 17 00:00:00 2001
From: VWRoli <fustroli@gmail.com>
Date: Tue, 14 Sep 2021 17:26:42 +0200
Subject: [PATCH] fix: issue #65 Make drawer smoother

---
 src/components/MapDrawer.js | 37 ++++++++++++++++++++-----------------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/components/MapDrawer.js b/src/components/MapDrawer.js
index 1710849..639fc6a 100644
--- 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>
       )}
     </>
   );