mg starting rewind and ff buttons not done

Author: morahgeist

src/app/components/Tutorial.tsx

@@ -356,7 +356,7 @@ export default class Tutorial extends Component<TutorialProps, TutorialState> {
           type='button'
           onClick={() => startIntro()}
         >
-          <HelpOutlineIcon /> Tutorial
+          <HelpOutlineIcon sx={{pr: 1}}/> Tutorial
         </Button>
       </>
     );

src/app/containers/ButtonsContainer.tsx

@@ -17,7 +17,7 @@ import LockIcon from '@mui/icons-material/Lock';
 import LockOpenIcon from '@mui/icons-material/LockOpen';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
 import FileUploadIcon from '@mui/icons-material/FileUpload';
-import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+
 
 // function exportHandler takes in a parameter snapshots which is typed as an array
 // the function does not return anything so the type is void
@@ -99,7 +99,7 @@ function ButtonsContainer(): JSX.Element {
         type='button'
         onClick={() => dispatch(toggleMode('paused'))}
       >
-        {paused ? <LockIcon /> : <LockOpenIcon />}
+        {paused ? <LockIcon sx={{pr: 1}}/> : <LockOpenIcon sx={{pr: 1}}/>}
         {paused ? 'Locked' : 'Unlocked'}
       </Button>
       <Button
@@ -108,11 +108,11 @@ function ButtonsContainer(): JSX.Element {
         type='button'
         onClick={() => exportHandler(snapshots)}
       >
-        <FileDownloadIcon />
+        <FileDownloadIcon sx={{pr: 1}}/>
         Download
       </Button>
       <Button variant='outlined' className='import-button' onClick={() => importHandler(dispatch)}>
-        <FileUploadIcon />
+        <FileUploadIcon sx={{pr: 1}}/>
         Upload
       </Button>
       {/* The component below renders a button for the tutorial walkthrough of Reactime */}

src/app/containers/TravelContainer.tsx

@@ -12,6 +12,8 @@ import {
 } from '../actions/actions';
 import { useStoreContext } from '../store';
 import { TravelContainerProps } from '../FrontendTypes';
+import FastRewindIcon from '@mui/icons-material/FastRewind';
+import FastForwardIcon from '@mui/icons-material/FastForward';
 
 /*
   This container renders the time-travel play button, seek bar, playback controls, and the playback speed dropdown, located towards the bottom of the application, above the locked, download, upload, and tutorial buttons
@@ -73,10 +75,10 @@ function TravelContainer(props: TravelContainerProps): JSX.Element {
       </button>
       <MainSlider snapshotsLength={snapshotsLength} />
       <button className='backward-button' onClick={() => dispatch(moveBackward())} type='button'>
-        {'<'}
+        <FastRewindIcon sx={{mr: 1, color: '#000'}}/>
       </button>
       <button className='forward-button' onClick={() => dispatch(moveForward())} type='button'>
-        {'>'}
+        <FastForwardIcon />
       </button>
       <Dropdown speeds={speeds} selectedSpeed={selectedSpeed} setSpeed={setSpeed} />
     </div>

src/app/styles/main.scss

@@ -1,8 +1,8 @@
 @charset 'UTF-8';
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Outfit:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
 
 * {
-  font-family: 'Roboto', sans-serif;
+  font-family: 'Outfit', sans-serif;
   font-size: 16px;
 }