slider no longer changes viewed state

Author: rydang

src/app/components/Action.jsx

@@ -12,17 +12,17 @@ const Action = (props) => {
       role="presentation"
     >
       <div className="action-component-text">{index}</div>
-      <div
+      <button
         className="jump-button"
         onClick={(e) => {
           e.stopPropagation();
           handleJumpSnapshot(index);
         }}
         tabIndex={index}
-        role="button"
+        type="button"
       >
         Jump
-      </div>
+      </button>
     </div>
   );
 };

src/app/components/MainSlider.jsx

@@ -25,7 +25,6 @@ const handle = (props) => {
 
 const MainSlider = ({
   snapshotLength,
-  handleChangeSnapshot,
   sliderIndex,
   handleJumpSnapshot,
   pause,
@@ -37,7 +36,6 @@ const MainSlider = ({
       value={sliderIndex}
       onChange={(index) => {
         const newIndex = index === -1 ? 0 : index;
-        handleChangeSnapshot(newIndex);
         handleJumpSnapshot(newIndex);
         pause();
       }}
@@ -47,7 +45,6 @@ const MainSlider = ({
 
 MainSlider.propTypes = {
   snapshotLength: PropTypes.number.isRequired,
-  handleChangeSnapshot: PropTypes.func.isRequired,
   sliderIndex: PropTypes.number.isRequired,
   handleJumpSnapshot: PropTypes.func.isRequired,
   pause: PropTypes.func.isRequired,

src/app/containers/ActionContainer.jsx

@@ -28,9 +28,9 @@ const ActionContainer = ({
   return (
     <div className="action-container">
       <div className="action-component exclude">
-        <div className="empty-button" onClick={emptySnapshot}>
+        <button className="empty-button" onClick={emptySnapshot} type="button">
           emptySnapshot
-        </div>
+        </button>
       </div>
       <div>{actionsArr}</div>
     </div>

src/app/containers/ButtonsContainer.jsx

@@ -1,15 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const ButtonsContainer = ({ mode: { paused, locked, persist }, toggleMode, importSnapshots, exportSnapshots }) => (
-  <div className="buttons-container">
-    <div className="pause-button" onClick={() => toggleMode('paused')}>{(paused) ? 'Resume' : 'Pause'}</div>
-    <div className="lock-button" onClick={() => toggleMode('locked')}>{(locked) ? 'Unlock' : 'Lock'}</div>
-    <div className="persist-button" onClick={() => toggleMode('persist')}>{(persist) ? 'Unpersist' : 'Persist'}</div>
-    <div className="import-button" onClick={importSnapshots}>Import</div>
-    <div className="export-button" onClick={exportSnapshots}>Export</div>
-  </div>
-);
+const ButtonsContainer = ({
+  mode: { paused, locked, persist },
+  toggleMode,
+  importSnapshots,
+  exportSnapshots,
+}) =>
+  (
+    <div className="buttons-container">
+      <button className="pause-button" type="button" onClick={() => toggleMode('paused')}>{(paused) ? 'Resume' : 'Pause'}</button>
+      <button className="lock-button" type="button" onClick={() => toggleMode('locked')}>{(locked) ? 'Unlock' : 'Lock'}</button>
+      <button className="persist-button" type="button" onClick={() => toggleMode('persist')}>{(persist) ? 'Unpersist' : 'Persist'}</button>
+      <button className="import-button" type="button" onClick={importSnapshots}>Import</button>
+      <button className="export-button" type="button" onClick={exportSnapshots}>Export</button>
+    </div>
+  );
 
 ButtonsContainer.propTypes = {
   toggleMode: PropTypes.func.isRequired,

src/app/containers/MainContainer.jsx

@@ -208,7 +208,6 @@ class MainContainer extends Component {
           <TravelContainer
             snapshotsLength={snapshots.length}
             sliderIndex={sliderIndex}
-            handleChangeSnapshot={this.handleChangeSnapshot}
             handleJumpSnapshot={this.handleJumpSnapshot}
             moveBackward={this.moveBackward}
             moveForward={this.moveForward}

src/app/containers/TravelContainer.jsx

@@ -27,7 +27,6 @@ class TravelContainer extends Component {
       moveBackward,
       moveForward,
       snapshotsLength,
-      handleChangeSnapshot,
       handleJumpSnapshot,
       sliderIndex,
       play,
@@ -37,22 +36,21 @@ class TravelContainer extends Component {
 
     return (
       <div className="travel-container">
-        <div className="play-button" onClick={() => play(playSpeed)}>
+        <button className="play-button" onClick={() => play(playSpeed)} type="button">
           {playing ? 'Pause' : 'Play'}
-        </div>
+        </button>
         <MainSlider
           snapshotLength={snapshotsLength}
-          handleChangeSnapshot={handleChangeSnapshot}
           sliderIndex={sliderIndex}
           handleJumpSnapshot={handleJumpSnapshot}
           pause={pause}
         />
-        <div className="backward-button" role="button" onClick={moveBackward}>
+        <button className="backward-button" onClick={moveBackward} type="button">
           {'<'}
-        </div>
-        <div className="forward-button" role="button" onClick={moveForward}>
+        </button>
+        <button className="forward-button" onClick={moveForward} type="button">
           {'>'}
-        </div>
+        </button>
         <Dropdown
           options={options}
           selectedOption={selectedOption}
@@ -69,7 +67,6 @@ TravelContainer.propTypes = {
   moveBackward: PropTypes.func.isRequired,
   moveForward: PropTypes.func.isRequired,
   snapshotsLength: PropTypes.number.isRequired,
-  handleChangeSnapshot: PropTypes.func.isRequired,
   handleJumpSnapshot: PropTypes.func.isRequired,
   sliderIndex: PropTypes.number.isRequired,
   playing: PropTypes.bool.isRequired,

src/app/styles/components/_buttons.scss

@@ -29,8 +29,8 @@
 
 .play-button {
   @extend %button-shared;
-  width: 60px;
-  margin: 10px;
+  width: 100px;
+  margin: 0 1% 0 2%;
 }
 
 .backward-button {
@@ -54,6 +54,9 @@
 }
 
 %button-shared {
+  outline: none;
+  background-color: $brand-color;
+  color: white;
   display: flex;
   justify-content: center;
   align-items: center;

src/app/styles/layout/_buttonsContainer.scss

@@ -5,3 +5,9 @@
   grid-gap: 1%;
   padding: 1% 0 1% 0;
 }
+
+@media (max-width: 500px) {
+  .buttons-container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}

src/app/styles/styles.scss

@@ -1,14 +1,12 @@
 .main-container {
   height: 100%;
   margin: 0 auto;
-  padding: 0 auto;
   background-color: $brand-color;
   overflow: hidden;
 }
 
 .body-container {
   height: 94%;
-  width: 100%;
   display: grid;
   grid-template-columns: 1fr 2fr;
   grid-template-rows: 8fr 1fr;
@@ -19,7 +17,6 @@
 }
 
 /* if extension width is less than 500px, stack the body containers */
-// this is not working for some reason
 @media (max-width: 500px) {
   .body-container {
     grid-template-rows: 3fr 5fr 1fr;