Add red to timer when > 10 minutes is elapsed

Relates #125

Author: martingaston

src/components/Pages/Revision/ResultsContainer.js

@@ -3,6 +3,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import RevisionTitle from "./RevisionTitle";
+import timerFormat from "../../../utils/timerFormat";
 
 export default class ResultsContainer extends React.Component {
   render() {
@@ -21,7 +22,8 @@ export default class ResultsContainer extends React.Component {
             </li>
             <li className="result-list-item">
               You performed {this.props.markSchemeCompleted} of{" "}
-              {this.props.markSchemeTotal} tasks.
+              {this.props.markSchemeTotal} tasks in{" "}
+              {timerFormat(this.props.timeElapsed)}.
             </li>
           </ul>
         </div>
@@ -34,5 +36,6 @@ ResultsContainer.propTypes = {
   markSchemeCompleted: PropTypes.number,
   markSchemeTotal: PropTypes.number,
   markSchemeElements: PropTypes.arrayOf(PropTypes.object),
-  caseTitle: PropTypes.string
+  caseTitle: PropTypes.string,
+  timeElapsed: PropTypes.number
 };

src/components/Pages/Revision/RevisionPage.js

@@ -89,6 +89,7 @@ export default class RevisionPage extends React.Component {
         markSchemeCompleted={this.state.markSchemeCompleted}
         markSchemeElements={this.state.markSchemeElements}
         caseTitle={this.state.caseTitle}
+        timeElapsed={this.state.time}
       />
     );
     const { exam, station } = this.props.match.params;

src/components/Pages/Revision/style.scss

@@ -73,3 +73,7 @@
   display: flex;
   justify-content: center;
 }
+
+.timer-long {
+  color: $peter-red;
+}

src/components/TopBar/TopBar.js

@@ -18,7 +18,12 @@ export default class TopBar extends React.Component {
             {this.props.stationName && removeHyphens(this.props.stationName)}
           </h3>
           {this.props.timer && (
-            <h3 id="topbar-timer">{timerFormat(this.props.time)}</h3>
+            <h3
+              className={this.props.time >= 600 ? `timer-long` : ``}
+              id="topbar-timer"
+            >
+              {timerFormat(this.props.time)}
+            </h3>
           )}
           {this.props.tickDisplayed && (
             <CompleteButton