convert TopBar to styled component,

relates #148

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;
-}

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>
     );
   }

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>
       );
     }
 

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>
     );
   }