Refactor ResultsContainer to be Styled Components

Relates #111
fac-14 · Oct 18, 2018 · d1e0834 · d1e0834
1 parent 60eae6f
commit d1e0834
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 20 deletions.
diff --git 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
@@ -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")};