From d1e08343901dc35289542a2f841608c721bd7f39 Mon Sep 17 00:00:00 2001
From: martingaston <squidman@gmail.com>
Date: Thu, 18 Oct 2018 20:17:02 +0100
Subject: [PATCH] Refactor ResultsContainer to be Styled Components Relates
 #111

---
 .../Pages/Revision/ResultsContainer.js        | 75 ++++++++++++++-----
 .../Pages/Revision/RevisionContainer.js       |  4 +-
 2 files changed, 59 insertions(+), 20 deletions(-)

diff --git a/src/components/Pages/Revision/ResultsContainer.js b/src/components/Pages/Revision/ResultsContainer.js
index b71d234..99ab1e3 100644
--- a/src/components/Pages/Revision/ResultsContainer.js
+++ b/src/components/Pages/Revision/ResultsContainer.js
@@ -1,42 +1,81 @@
 /* eslint-disable class-methods-use-this */
+/* eslint-disable no-invalid-this */
 
 import React from "react";
 import PropTypes from "prop-types";
 import RevisionTitle from "./RevisionTitle";
 import timerFormat from "../../../utils/timerFormat";
+import styled from "styled-components";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const ResultsTitle = styled.h3`
+  font-weight: 700;
+  margin: 8px 0;
+  text-transform: uppercase;
+`;
+
+const Results = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100vw;
+  overflow-y: scroll;
+`;
+
+const RevisionList = styled.ul`
+  width: 100%;
+`;
+
+const ResultItem = styled.li`
+  display: flex;
+  justify-content: center;
+  height: 48px;
+  display: flex;
+  margin: 8px 0;
+  padding: 8px;
+  align-items: center;
+  background-color: white;
+`;
+
+const HighlightedItem = styled(ResultItem)`
+  font-size: 28pt;
+  font-weight: 700;
+  color: #009f5c;
+`;
 
 export default class ResultsContainer extends React.Component {
   render() {
     const missed = [...this.props.markSchemeElements]
       .filter(mark => !mark.completed)
-      .map((mark, index) => (
-        <li key={index} className="result-list-item">
-          {mark.text}
-        </li>
-      ));
+      .map((mark, index) => <ResultItem key={index}>{mark.text}</ResultItem>);
     return (
-      <div id="revision">
+      <Container>
         <RevisionTitle caseTitle={this.props.caseTitle} />
-        <h3 id="results-h3">Results</h3>
-        <div id="revision-container">
-          <ul id="revision-list">
-            <li className="result-list-item" id="score-percent">
+        <ResultsTitle>Results</ResultsTitle>
+        <Results>
+          <RevisionList>
+            <HighlightedItem>
               {Math.floor(
                 (this.props.markSchemeCompleted / this.props.markSchemeTotal) *
                   100
               )}
               %
-            </li>
-            <li className="result-list-item">
+            </HighlightedItem>
+            <ResultItem>
               You performed {this.props.markSchemeCompleted} of{" "}
               {this.props.markSchemeTotal} tasks in{" "}
               {timerFormat(this.props.timeElapsed)}.
-            </li>
-          </ul>
-          <h3 id="results-h3">You missed {missed.length} items</h3>
-          <ul id="revision-list">{missed}</ul>
-        </div>
-      </div>
+            </ResultItem>
+          </RevisionList>
+          <ResultsTitle>You missed {missed.length} items</ResultsTitle>
+          <RevisionList>{missed}</RevisionList>
+        </Results>
+      </Container>
     );
   }
 }
diff --git a/src/components/Pages/Revision/RevisionContainer.js b/src/components/Pages/Revision/RevisionContainer.js
index 75ea3c3..90bc052 100644
--- a/src/components/Pages/Revision/RevisionContainer.js
+++ b/src/components/Pages/Revision/RevisionContainer.js
@@ -18,8 +18,8 @@ const MarkSchemeList = styled.ul`
 
 const MarkSchemeListItem = styled.li`
   display: flex;
-  margin: 4px 0;
-  padding: 8px 8px;
+  margin: 4px;
+  padding: 16px;
   align-items: center;
   color: ${({ completed }) => completed && "white"};
   background-color: ${({ completed }) => (completed ? "#009f5c" : "white")};