mg added ff rewind and play buttons from MUI, did inline styling and updated scss

Author: morahgeist

src/app/containers/TravelContainer.tsx

@@ -68,6 +68,7 @@ function TravelContainer(props: TravelContainerProps): JSX.Element {
       <Button
       variant="contained"
         className='play-button'
+        sx={{height: 25, p: 0, mr: 1, ml: 1}}
         type='button'
         // data-testid, prop for testing in RTL
         data-testid='play-button-test'
@@ -76,11 +77,11 @@ function TravelContainer(props: TravelContainerProps): JSX.Element {
         {playing ? 'Pause' : 'Play'}
       </Button>
       <MainSlider snapshotsLength={snapshotsLength} />
-      <Button variant="contained" className='backward-button' onClick={() => dispatch(moveBackward())} type='button'>
-        <FastRewindIcon sx={{xm: 1, color: '#000'}}/>
+      <Button variant="contained" className='backward-button' onClick={() => dispatch(moveBackward())} type='button' sx={{height: 25, minWidth: 30, p: 0, mr: 1}}>
+        <FastRewindIcon sx={{color: '#000'}}/>
       </Button>
-      <Button variant="contained" className='forward-button' onClick={() => dispatch(moveForward())} type='button'>
-        <FastForwardIcon />
+      <Button variant="contained" className='forward-button' onClick={() => dispatch(moveForward())} type='button' sx={{height: 25, minWidth: 30, p: 0}}>
+        <FastForwardIcon sx={{color: '#000'}}/>
       </Button>
       <Dropdown speeds={speeds} selectedSpeed={selectedSpeed} setSpeed={setSpeed} />
     </div>

src/app/styles/components/_buttons.scss

@@ -156,6 +156,7 @@
   border-radius: 5px;
   font-weight: 500;
   font-size: 16px;
+  justify-content: center;
 }
 
 .play-button:hover {
@@ -167,7 +168,8 @@
 .backward-button {
   width: 30px;
   height: 25px;
-  margin: 7px;
+  // margin: 7px;
+  padding: 0px;
   color: $brand-color;
   border-color: transparent;
   background: $blue-color-gradient;