added buttons to pause/record play/stop

src/app/components/App.jsx

@@ -37,11 +37,15 @@ class App extends Component {
 
     this.state = {
       data: [],
+      isPlaying: true,
+      isRecording: true,
     };
 
     this.addActionToView = this.addActionToView.bind(this);
     this.toTheFuture = this.toTheFuture.bind(this);
     this.toThePast = this.toThePast.bind(this);
+    this.setIsPlaying = this.setIsPlaying.bind(this);
+    this.setIsRecording = this.setIsRecording.bind(this);
   }
 
   componentDidMount() {
@@ -61,6 +65,22 @@ class App extends Component {
     });
   }
 
+  // functionality to change 'play' button to 'stop'
+  setIsPlaying() {
+    console.log('setIsPlaying:', this.state.isPlaying)
+    let { isPlaying } = this.state;
+    isPlaying = !isPlaying;
+    this.setState({ isPlaying });
+  }
+
+  // functionality to change 'record' button to 'pause'
+  setIsRecording() {
+    console.log('setIsRecording:', this.state.isRecording)
+    this.setState(state => ({
+      isRecording: !state.isRecording,
+    }));
+  }
+
   // function to select an event from the data
   // and set state with all required info
   addActionToView(e) {
@@ -74,6 +94,7 @@ class App extends Component {
     });
   }
 
+
   // function to travel to the FUTURE
   toTheFuture(e) {
     if (this.state.action) {
@@ -114,8 +135,17 @@ class App extends Component {
 
   render() {
     const {
-      action, id, payload, state, data,
+      action,
+      id,
+      payload,
+      state,
+      data,
+      setIsPlaying,
+      isPlaying,
+      setIsRecording,
+      isRecording,
     } = this.state;
+
     return (
       <>
         <GlobalStyle />
@@ -127,6 +157,10 @@ class App extends Component {
                 addAction={this.addActionToView}
                 toTheFuture={this.toTheFuture}
                 toThePast={this.toThePast}
+                isPlaying={isPlaying}
+                isRecording={isRecording}
+                setIsPlaying={this.setIsPlaying}
+                setIsRecording={this.setIsRecording}
               />
             )}
           right={

src/app/components/EventCards/TimeTravel.jsx

@@ -4,11 +4,26 @@ import React from 'react';
 import { TimeTravelContainer, EventTimeDiv } from '../../styles/Events.jsx';
 
 export default function TimeTavel(props) {
-  const { toTheFuture, toThePast } = props;
+  const {
+    toTheFuture,
+    toThePast,
+    setIsRecording,
+    isRecording,
+    setIsPlaying,
+    isPlaying,
+  } = props;
+
+
   return (
-    <TimeTravelContainer>
-      <EventTimeDiv onClick={toThePast}>PREVIOUS</EventTimeDiv>
-      <EventTimeDiv onClick={toTheFuture}>NEXT</EventTimeDiv>
-    </TimeTravelContainer>
+    <>
+      <TimeTravelContainer>
+        <EventTimeDiv onClick={setIsRecording}>{isRecording ? 'RECORD' : 'PAUSE'}</EventTimeDiv>
+        <EventTimeDiv onClick={setIsPlaying}>{isPlaying ? 'PLAY' : 'STOP' }</EventTimeDiv>
+      </TimeTravelContainer>
+      <TimeTravelContainer>
+        <EventTimeDiv onClick={toThePast}>PREVIOUS</EventTimeDiv>
+        <EventTimeDiv onClick={toTheFuture}>NEXT</EventTimeDiv>
+      </TimeTravelContainer>
+    </>
   );
 }

src/app/container/Events.jsx

@@ -17,12 +17,26 @@ class Events extends Component {
       data,
       toTheFuture,
       toThePast,
+      setIsPlaying,
+      isPlaying,
+      setIsRecording,
+      isRecording,
     } = this.props;
     return (
       <>
         <EventsNav />
-        <EventsDisplay data={data} addAction={addAction} />
-        <TimeTravel toTheFuture={toTheFuture} toThePast={toThePast} />
+        <EventsDisplay
+          data={data}
+          addAction={addAction}
+        />
+        <TimeTravel
+          toTheFuture={toTheFuture}
+          toThePast={toThePast}
+          setIsRecording={setIsRecording}
+          isRecording={isRecording}
+          setIsPlaying={setIsPlaying}
+          isPlaying={isPlaying}
+        />
       </>
     );
   }

src/app/styles/Events.jsx

@@ -2,15 +2,12 @@ import styled from 'styled-components';
 
 // formats the events display
 export const EventsWrapper = styled.div`
-  /* margin: 17px 17px; */
-  /* padding-top: 2%; */
-  /* padding-bottom: 2%; */
-  max-height: 300px;
+  min-height: 100px;
+  max-height: 200px;
   overflow: auto;
+  border-bottom: 1px solid white;
 `;
 
-
-
 // events actions bar
 export const EventCard = styled.div`
   display: flex;
@@ -30,15 +27,17 @@ export const EventCard = styled.div`
 `;
 
 export const EventTimeDiv = styled.div`
-  /* height: 15px; */
   width: 25%;
   text-align: center;
   background-color: #484C54;
-  /* margin-bottom: 2%; */
   color: #BCBCBB;
-  /* padding: 1%; */
   border-radius: 5px;
-  /* border: 1px solid black; */
+`;
+
+export const TimeTravelContainer = styled.div`
+  padding-top: 5%;
+  display: flex;
+  justify-content: space-evenly;
 `;
 
 export const TimeTravelContainer = styled.div`