Add panel with slider

1 files changed, 13 insertions, 11 deletions

diff --git a/modern/src/reports/ReplayPage.js b/modern/src/reports/ReplayPage.js
index 826b361a..09882840 100644
--- a/modern/src/reports/ReplayPage.js
+++ b/modern/src/reports/ReplayPage.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core';
+import { Container, makeStyles, Paper, Slider } from '@material-ui/core';
 import MainToolbar from '../MainToolbar';
 import Map from '../map/Map';
 
@@ -9,17 +9,14 @@ const useStyles = makeStyles(theme => ({
     display: 'flex',
     flexDirection: 'column',
   },
-  content: {
-    flexGrow: 1,
-    overflow: 'hidden',
-    display: 'flex',
-    flexDirection: 'row',
-    [theme.breakpoints.down('xs')]: {
-      flexDirection: 'column-reverse',
-    }
+  controlPanel: {
+    position: 'absolute',
+    bottom: theme.spacing(5),
+    left: '50%',
+    transform: 'translateX(-50%)',
   },
-  mapContainer: {
-    flexGrow: 1,
+  controlContent: {
+    padding: theme.spacing(2),
   },
 }));
 
@@ -31,6 +28,11 @@ const ReplayPage = () => {
       <MainToolbar />
       <Map>
       </Map>
+      <Container maxWidth="sm" className={classes.controlPanel}>
+        <Paper className={classes.controlContent}>
+          <Slider defaultValue={30} />
+        </Paper>
+      </Container>
     </div>
   );
 }