added a persist button to front end

Author: rydang

src/app/containers/ButtonsContainer.jsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const ButtonsContainer = ({ mode: { paused, locked }, toggleMode }) => (
+const ButtonsContainer = ({ mode: { paused, locked, persist }, toggleMode }) => (
   <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>
 );
 
@@ -13,6 +14,7 @@ ButtonsContainer.propTypes = {
   mode: PropTypes.shape({
     paused: PropTypes.bool,
     locked: PropTypes.bool,
+    persist: PropTypes.bool,
   }).isRequired,
 };
 

src/app/styles/components/_buttons.scss

@@ -45,11 +45,9 @@
   margin: 7px;
 }
 
-.lock-button {
-  @extend %button-shared;
-}
-
-.pause-button {
+.lock-button,
+.pause-button,
+.persist-button {
   @extend %button-shared;
 }
 

src/app/styles/layout/_buttonsContainer.scss

@@ -1,7 +1,7 @@
 .buttons-container {
   margin: 0 1% 0 1%;
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: repeat(3, 1fr);
   grid-gap: 1%;
   padding: 1% 0 1% 0;
 }