From 744d25702adce90c95e0bec57f00edaec815afdd Mon Sep 17 00:00:00 2001
From: sima-qian <29804933+sima-qian@users.noreply.github.com>
Date: Thu, 18 Oct 2018 18:52:35 +0100
Subject: [PATCH] convert TopBar to styled component, relates #148

---
 src/components/Pages/Revision/style.scss |  6 ----
 src/components/TopBar/BackButton.js      | 18 +++++++---
 src/components/TopBar/CompleteButton.js  | 29 ++++++++++------
 src/components/TopBar/TopBar.js          | 44 ++++++++++++++++++------
 src/components/TopBar/style.scss         | 41 ----------------------
 5 files changed, 66 insertions(+), 72 deletions(-)
 delete mode 100644 src/components/TopBar/style.scss

diff --git a/src/components/Pages/Revision/style.scss b/src/components/Pages/Revision/style.scss
index ca5e614..06c0893 100644
--- a/src/components/Pages/Revision/style.scss
+++ b/src/components/Pages/Revision/style.scss
@@ -15,13 +15,11 @@
   align-items: center;
   width: 100vw;
   overflow-y: scroll;
-  // background-color: yellow;
 }
 
 #revision #revision-text {
   padding: 0 16px;
   line-height: 1.2;
-  // border: 1px solid grey;
 }
 
 #score-percent {
@@ -35,7 +33,3 @@
   margin: 8px 0;
   text-transform: uppercase;
 }
-
-.timer-long {
-  color: $peter-red;
-}
diff --git a/src/components/TopBar/BackButton.js b/src/components/TopBar/BackButton.js
index 40396b5..3830608 100644
--- a/src/components/TopBar/BackButton.js
+++ b/src/components/TopBar/BackButton.js
@@ -2,18 +2,28 @@
 
 import React from "react";
 import PropTypes from "prop-types";
+import styled from "styled-components";
 
-// using <Link> tags allows us to make a component or HTML element into a React link -- see usage below
 import { Link } from "react-router-dom";
 import xIcon from "../../assets/icons/back.svg";
 
+const StyledButton = styled.button`
+  padding: 0 16px;
+  border: none;
+  background-color: transparent;
+`;
+
+const StyledImg = styled.img`
+  height: 20px;
+`;
+
 export default class BackButton extends React.Component {
   render() {
     return (
       <Link to={`/${this.props.link}`}>
-        <button id="back">
-          <img src={xIcon} />
-        </button>
+        <StyledButton>
+          <StyledImg src={xIcon} />
+        </StyledButton>
       </Link>
     );
   }
diff --git a/src/components/TopBar/CompleteButton.js b/src/components/TopBar/CompleteButton.js
index eae2a14..1dc6728 100644
--- a/src/components/TopBar/CompleteButton.js
+++ b/src/components/TopBar/CompleteButton.js
@@ -3,7 +3,18 @@
 import React from "react";
 import PropTypes from "prop-types";
 import tickIcon from "../../assets/icons/tick_white.svg";
-import { Link } from "react-router-dom"; /* eslint-disable-line */
+import { Link } from "react-router-dom";
+import styled from "styled-components";
+
+const StyledButton = styled.button`
+  padding: 0 0 0 16px;
+  border: none;
+  background-color: transparent;
+`;
+
+const StyledImg = styled.img`
+  height: 20px;
+`;
 
 export default class CompleteButton extends React.Component {
   render() {
@@ -12,20 +23,16 @@ export default class CompleteButton extends React.Component {
     if (this.props.addNewFlow) {
       component = (
         <Link to={`/${exam}/${station}`}>
-          <button
-            id="complete"
-            data-testid="complete"
-            onClick={() => onClick()}
-          >
-            <img src={tickIcon} />
-          </button>
+          <StyledButton data-testid="complete" onClick={() => onClick()}>
+            <StyledImg src={tickIcon} />
+          </StyledButton>
         </Link>
       );
     } else {
       component = (
-        <button id="complete" data-testid="complete" onClick={() => onClick()}>
-          <img src={tickIcon} />
-        </button>
+        <StyledButton data-testid="complete" onClick={() => onClick()}>
+          <StyledImg src={tickIcon} />
+        </StyledButton>
       );
     }
 
diff --git a/src/components/TopBar/TopBar.js b/src/components/TopBar/TopBar.js
index 95f6bd1..7437dd7 100644
--- a/src/components/TopBar/TopBar.js
+++ b/src/components/TopBar/TopBar.js
@@ -2,28 +2,52 @@
 
 import React from "react";
 import PropTypes from "prop-types";
+import styled from "styled-components";
+
 import BackButton from "./BackButton";
 import CompleteButton from "./CompleteButton";
 import timerFormat from "../../utils/timerFormat";
-
 import removeHyphens from "../../utils/removeHyphens";
 
+const TopBarContainer = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 16px 4px 4px;
+  height: 40px;
+  background-color: #c7c7b2;
+  color: #fff;
+  font-family: "Nova Round", Helvetica, sans-serif;
+  text-transform: uppercase;
+`;
+
+const TopBarTitle = styled.h3`
+  flex: 1;
+  justify-content: flex-start;
+`;
+
+const TopBarTimer = styled.h3`
+  width: 60px;
+  color: ${({ long }) => long && "#e53d00"};
+`;
+
 export default class TopBar extends React.Component {
   render() {
     return (
       <React.Fragment>
-        <div id="topbar-container">
+        <TopBarContainer>
           <BackButton link={this.props.backLink} />
-          <h3 id="topbar-title">
+          <TopBarTitle>
             {this.props.stationName && removeHyphens(this.props.stationName)}
-          </h3>
+          </TopBarTitle>
           {this.props.timer && (
-            <h3
-              className={this.props.time >= 600 ? `timer-long` : ``}
-              id="topbar-timer"
-            >
+            <TopBarTimer long={this.props.time >= 600}>
               {timerFormat(this.props.time)}
-            </h3>
+            </TopBarTimer>
           )}
           {this.props.tickDisplayed && (
             <CompleteButton
@@ -34,7 +58,7 @@ export default class TopBar extends React.Component {
               tickDisplayed={this.props.tickDisplayed}
             />
           )}
-        </div>
+        </TopBarContainer>
       </React.Fragment>
     );
   }
diff --git a/src/components/TopBar/style.scss b/src/components/TopBar/style.scss
deleted file mode 100644
index a4b19fd..0000000
--- a/src/components/TopBar/style.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-#topbar-container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 4px;
-  padding-right: 16px;
-  height: 40px;
-  background-color: $darkgrey;
-  color: #fff;
-  font-family: $title-font;
-  text-transform: uppercase;
-  //border: 1px solid red;
-}
-
-#topbar-container #back,
-#topbar-container #complete {
-  padding: 0 16px;
-  border: none;
-  background-color: transparent;
-}
-
-#topbar-container #complete {
-  padding-right: 0 !important;
-}
-
-#topbar-title {
-  flex: 1;
-  justify-content: flex-start;
-}
-
-#topbar-timer {
-  width: 55px;
-}
-
-#topbar img {
-  height: 20px;
-}