From 4cdf38e4fabc45c34ed7ea7089d03e855be2b7f2 Mon Sep 17 00:00:00 2001
From: martingaston <squidman@gmail.com>
Date: Wed, 17 Oct 2018 15:21:20 +0100
Subject: [PATCH] Add red to timer when > 10 minutes is elapsed Relates #125

---
 src/components/Pages/Revision/ResultsContainer.js | 7 +++++--
 src/components/Pages/Revision/RevisionPage.js     | 1 +
 src/components/Pages/Revision/style.scss          | 4 ++++
 src/components/TopBar/TopBar.js                   | 7 ++++++-
 4 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/Pages/Revision/ResultsContainer.js b/src/components/Pages/Revision/ResultsContainer.js
index c90138b..bfeceb8 100644
--- a/src/components/Pages/Revision/ResultsContainer.js
+++ b/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
 };
diff --git a/src/components/Pages/Revision/RevisionPage.js b/src/components/Pages/Revision/RevisionPage.js
index 40d70e5..de1d0c2 100644
--- a/src/components/Pages/Revision/RevisionPage.js
+++ b/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;
diff --git a/src/components/Pages/Revision/style.scss b/src/components/Pages/Revision/style.scss
index fbca86e..acc39dc 100644
--- a/src/components/Pages/Revision/style.scss
+++ b/src/components/Pages/Revision/style.scss
@@ -73,3 +73,7 @@
   display: flex;
   justify-content: center;
 }
+
+.timer-long {
+  color: $peter-red;
+}
diff --git a/src/components/TopBar/TopBar.js b/src/components/TopBar/TopBar.js
index 22a824d..a9817b5 100644
--- a/src/components/TopBar/TopBar.js
+++ b/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