From 3178a1382a463831f5c51674a6e822786fb8ebe1 Mon Sep 17 00:00:00 2001
From: Dan Wilt <dwilt4rville@gmail.com>
Date: Tue, 20 Mar 2018 08:34:49 +0000
Subject: [PATCH] code answer styling updates

---
 package.json                                  |  3 +--
 public/index.html                             |  4 +++-
 src/components/Answer/Answer.component.js     |  2 +-
 src/components/Answer/Answer.css              | 14 ++++++++++-
 src/components/CodeFigure/CodeFigure.css      |  5 +++-
 .../CompletedHeader/CompletedHeader.css       |  4 ++--
 .../CompletedResultsList.css                  |  2 +-
 src/components/Completed/Results/Results.css  |  2 +-
 .../EmailCapture/EmailCapture.css             |  2 +-
 .../NameCapture/NameCapture/NameCapture.css   |  2 +-
 src/components/Question/Question.component.js |  2 +-
 src/components/Quiz/Quiz.css                  | 23 +++++--------------
 .../QuizProgressIndicator.css                 | 16 +++++++++----
 .../QuizQuestion/QuizQuestion.component.js    | 21 +++++++++--------
 src/components/QuizQuestion/QuizQuestion.css  | 16 ++++++-------
 src/components/TextInput/TextInput.css        |  7 +++---
 src/index.css                                 |  6 +++--
 src/index.js                                  |  1 -
 src/store/quiz/quiz.actions.js                |  2 ++
 src/store/quiz/quiz.reducer.js                |  4 ++--
 yarn.lock                                     |  4 ----
 21 files changed, 75 insertions(+), 67 deletions(-)

diff --git a/package.json b/package.json
index 8b8a692..acff62d 100644
--- a/package.json
+++ b/package.json
@@ -23,8 +23,7 @@
     "redux": "^3.7.2",
     "redux-firestore": "^0.2.8",
     "redux-saga": "^0.16.0",
-    "reselect": "^3.0.1",
-    "reset-css": "^2.2.1"
+    "reselect": "^3.0.1"
   },
   "scripts": {
     "start": "NODE_PATH=src react-scripts start",
diff --git a/public/index.html b/public/index.html
index a9fed7c..bfe6f22 100644
--- a/public/index.html
+++ b/public/index.html
@@ -33,7 +33,9 @@
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
-    <div id="root"></div>
+    <div class="container">
+      <div id="root"></div>
+    </div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/src/components/Answer/Answer.component.js b/src/components/Answer/Answer.component.js
index c5eb069..b0df8e0 100644
--- a/src/components/Answer/Answer.component.js
+++ b/src/components/Answer/Answer.component.js
@@ -68,7 +68,7 @@ export default class Answer extends PureComponent {
 
         const content = (
             <div className={containerClasses}>
-                <span className={`Answer__question-number`}>
+                <span className={`Answer__question-number`} aria-hidden={true}>
                     {letterMap[answerNumber]}
                 </span>
                 {onChange && (
diff --git a/src/components/Answer/Answer.css b/src/components/Answer/Answer.css
index 7d12764..f57909f 100644
--- a/src/components/Answer/Answer.css
+++ b/src/components/Answer/Answer.css
@@ -8,6 +8,18 @@
     transition: border-color .2s;
 }
 
+@media (max-width: 600px) {
+    .Answer {
+        padding: 16px
+    }
+}
+
+@media (max-width: 600px) {
+    .Answer__text {
+        font-size: 1.4rem;
+    }
+}
+
 .Answer.--theme-blue-outline {
     border-color: var(--blue)
 }
@@ -26,7 +38,7 @@
     position: absolute;
     top: 4px;
     left: 4px;
-    font-size: .625rem;
+    font-size: 1rem;
     line-height: 1;
     text-transform: uppercase;
     color: #B3B3B3;
diff --git a/src/components/CodeFigure/CodeFigure.css b/src/components/CodeFigure/CodeFigure.css
index e0890a0..207d7af 100644
--- a/src/components/CodeFigure/CodeFigure.css
+++ b/src/components/CodeFigure/CodeFigure.css
@@ -1,10 +1,13 @@
+.CodeFigure {
+    overflow-x: auto;
+}
+
 .CodeFigure > pre {
     margin: 0;
 }
 
 .CodeFigure .hljs {
     display: block;
-    overflow-x: auto;
     background: #2b2b2b;
     padding: 20px 15px;
     border-radius: 5px;
diff --git a/src/components/Completed/CompletedHeader/CompletedHeader.css b/src/components/Completed/CompletedHeader/CompletedHeader.css
index c39fbb8..82f44d1 100644
--- a/src/components/Completed/CompletedHeader/CompletedHeader.css
+++ b/src/components/Completed/CompletedHeader/CompletedHeader.css
@@ -10,14 +10,14 @@
 
 .CompletedHeader__title {
     color: var(--very-dark-blue);
-    font-size: 2rem;
+    font-size: 3.2rem;
     line-height: 1.3;
     margin-bottom: 40px;
     font-weight: 900;
 }
 
 .CompletedHeader__coding-strength {
-    font-size: 1.5rem;
+    font-size: 2.4rem;
     line-height: 1.3;
     margin-bottom: 20px;
 }
diff --git a/src/components/Completed/CompletedResultsList/CompletedResultsList.css b/src/components/Completed/CompletedResultsList/CompletedResultsList.css
index a67fbd1..58f363b 100644
--- a/src/components/Completed/CompletedResultsList/CompletedResultsList.css
+++ b/src/components/Completed/CompletedResultsList/CompletedResultsList.css
@@ -49,7 +49,7 @@
 .CompletedResultsList__feedback-title,
 .CompletedResultsList__answer-title {
     font-weight: 700;
-    font-size: .8rem;
+    font-size: 1.3rem;
     margin-bottom: 4px;
 }
 
diff --git a/src/components/Completed/Results/Results.css b/src/components/Completed/Results/Results.css
index da40cbb..c2168c9 100644
--- a/src/components/Completed/Results/Results.css
+++ b/src/components/Completed/Results/Results.css
@@ -1,5 +1,5 @@
 .Results__title {
-    font-size: 2rem;
+    font-size: 3.2rem;
     color: var(--dark-gray);
     margin-bottom: 40px;
     font-weight: 900
diff --git a/src/components/EmailCapture/EmailCapture/EmailCapture.css b/src/components/EmailCapture/EmailCapture/EmailCapture.css
index 6cc02de..f3c2ddf 100644
--- a/src/components/EmailCapture/EmailCapture/EmailCapture.css
+++ b/src/components/EmailCapture/EmailCapture/EmailCapture.css
@@ -17,7 +17,7 @@
     color: var(--very-dark-blue);
     font-weight: 800;
     text-align: center;
-    font-size: 2rem;
+    font-size: 3.2rem;
     margin-bottom: 10px;
 }
 
diff --git a/src/components/NameCapture/NameCapture/NameCapture.css b/src/components/NameCapture/NameCapture/NameCapture.css
index cdb5043..fdf60c6 100644
--- a/src/components/NameCapture/NameCapture/NameCapture.css
+++ b/src/components/NameCapture/NameCapture/NameCapture.css
@@ -15,7 +15,7 @@
 
 .NameCapture__title {
     text-align: center;
-    font-size: 2rem;
+    font-size: 3.2rem;
     margin-bottom: 40px;
 }
 
diff --git a/src/components/Question/Question.component.js b/src/components/Question/Question.component.js
index 4701c44..39e057a 100644
--- a/src/components/Question/Question.component.js
+++ b/src/components/Question/Question.component.js
@@ -15,7 +15,7 @@ export default class Question extends PureComponent {
         const { question } = this.props;
 
         return (
-            <div className={`Question`}>
+            <div className={`Question`} aria-hidden={true}>
                 <Markdown>{question}</Markdown>
             </div>
         );
diff --git a/src/components/Quiz/Quiz.css b/src/components/Quiz/Quiz.css
index b0acef3..46c84e6 100644
--- a/src/components/Quiz/Quiz.css
+++ b/src/components/Quiz/Quiz.css
@@ -1,43 +1,32 @@
-.Quiz {
-
-}
-
 .Quiz__content-container {
-    padding: 0 225px;
     display: flex;
     justify-content: center;
 }
 
-@media (max-width: 900px) {
-    .Quiz__content-container {
-        padding: 0 150px;
-    }
-}
-
 @media (max-width: 600px) {
     .Quiz__content-container {
-        padding: 0 75px;
+        display: block;
     }
 }
 
 .Quiz__title {
-    font-size: 1.5rem;
+    font-size: 2.4rem;
     line-height: 1;
     color: var(--very-dark-blue);
     font-weight: 700;
-    padding: 35px 20px;
+    padding: 35px 0;
     margin-bottom: 20px;
 }
 
 @media (max-width: 600px) {
     .Quiz__title {
-        font-size: 1.2rem;
-        padding: 25px 20px;
+        font-size: 2rem;
+        padding: 25px 0;
     }
 }
 
 .Quiz__progress-indicator {
     position: absolute;
     top: 0;
-    right: 20px;
+    right: 0;
 }
diff --git a/src/components/QuizProgressIndicator/QuizProgressIndicator.css b/src/components/QuizProgressIndicator/QuizProgressIndicator.css
index 898c9b3..89eede9 100644
--- a/src/components/QuizProgressIndicator/QuizProgressIndicator.css
+++ b/src/components/QuizProgressIndicator/QuizProgressIndicator.css
@@ -6,7 +6,7 @@
     justify-content: center;
 }
 
-@media (max-width: 900px) {
+@media (max-width: 1050px) {
     .QuizProgressIndicator {
         transform: scale(.67);
         transform-origin: 100% 0;
@@ -14,10 +14,16 @@
     }
 }
 
+
+@media (max-width: 960px) {
+    .QuizProgressIndicator {
+        transform: scale(.5);
+    }
+}
+
 @media (max-width: 600px) {
     .QuizProgressIndicator {
-        transform: scale(.3);
-        transform-origin: 100% 0;
+        transform: scale(.4);
     }
 }
 
@@ -46,8 +52,8 @@
     position: relative;
     color: var(--dark-gray);
     font-weight: 100;
-    font-size: 32px;
-    line-height: 32px;
+    font-size: 3.2rem;
+    line-height: 3.2rem;
 }
 
 .QuizProgressIndicator .QuizProgressIndicator__total-answers {
diff --git a/src/components/QuizQuestion/QuizQuestion.component.js b/src/components/QuizQuestion/QuizQuestion.component.js
index f126a3b..81ec706 100644
--- a/src/components/QuizQuestion/QuizQuestion.component.js
+++ b/src/components/QuizQuestion/QuizQuestion.component.js
@@ -42,7 +42,7 @@ export default class QuizQuestion extends PureComponent {
 
         const active = userAnswers.length + 1 === questionNumber;
 
-        const fieldsetClasses = classNames({
+        const questionClasses = classNames(`QuizQuestion`, {
             [`visuallyhidden`]: !active,
         });
 
@@ -51,13 +51,14 @@ export default class QuizQuestion extends PureComponent {
         });
 
         return (
-            <fieldset className={fieldsetClasses}>
-                <div className={`QuizQuestion`}>
-                    {questionNumber === 1 && (
-                        <p
-                            className={`QuizQuestion__introduction`}
-                        >{`Thanks ${name}! Let's get started...`}</p>
-                    )}
+            <div className={questionClasses}>
+                {questionNumber === 1 && (
+                    <p
+                        className={`QuizQuestion__introduction`}
+                    >{`Thanks ${name}! Let's get started...`}</p>
+                )}
+                <fieldset>
+                    <legend className={`visuallyhidden`}>{question}</legend>
                     <div className={`QuizQuestion__question`}>
                         <Question question={question} />
                     </div>
@@ -89,8 +90,8 @@ export default class QuizQuestion extends PureComponent {
                             {`Continue`}
                         </ActionButton>
                     </div>
-                </div>
-            </fieldset>
+                </fieldset>
+            </div>
         );
     }
 }
diff --git a/src/components/QuizQuestion/QuizQuestion.css b/src/components/QuizQuestion/QuizQuestion.css
index 72ab6c2..30296b7 100644
--- a/src/components/QuizQuestion/QuizQuestion.css
+++ b/src/components/QuizQuestion/QuizQuestion.css
@@ -6,7 +6,7 @@
 
 .QuizQuestion__introduction {
     margin-bottom: 40px;
-    font-size: 2rem;
+    font-size: 3.2rem;
     color: var(--very-dark-blue);
     line-height: 1.2;
     font-weight: 700;
@@ -14,7 +14,7 @@
 }
 
 .QuizQuestion__question {
-    margin-bottom: 40px;
+    margin-bottom: 24px;
     text-align: center;
 }
 
@@ -24,29 +24,26 @@
     }
 }
 
-
 @media (max-width: 600px) {
     .QuizQuestion__question {
         margin-bottom: 20px;
     }
 }
 
-
-
 .QuizQuestion__question p {
-    font-size: 2rem;
+    font-size: 3.2rem;
 }
 
 @media (max-width: 900px) {
     .QuizQuestion__question p {
-        font-size: 1.6rem;
+        font-size: 2.5rem;
     }
 }
 
 
 @media (max-width: 600px) {
     .QuizQuestion__question p {
-        font-size: 1.4rem;
+        font-size: 2.2rem;
     }
 }
 
@@ -54,7 +51,7 @@
 .QuizQuestion__code-figure {
     display: flex;
     justify-content: center;
-    margin: 20px 0;
+    margin-bottom: 24px;
 }
 
 
@@ -73,6 +70,7 @@
 
 .QuizQuestion__answers-list > li {
     margin: 0;
+    overflow-x: auto;
 }
 
 .QuizQuestion__answers-list.--grid {
diff --git a/src/components/TextInput/TextInput.css b/src/components/TextInput/TextInput.css
index 21c334c..74ea71c 100644
--- a/src/components/TextInput/TextInput.css
+++ b/src/components/TextInput/TextInput.css
@@ -6,13 +6,12 @@
     box-sizing: border-box;
     width: 100%;
     border: 2px solid #F1F1F1;
-    height: 56px;
-    font-size: 1rem;
-    line-height: 56px;
+    font-size: 1.6rem;
+    line-height: 1;
     background-color: #F7F7F7;
     border-radius: 5px;
     transition: border-color .2s;
-    padding: 0 20px;
+    padding: 20px;
     display: block;
 }
 
diff --git a/src/index.css b/src/index.css
index 4ea3129..4bc30d2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -10,8 +10,6 @@
 }
 
 body {
-    margin: 0;
-    padding: 0;
     font-family: 'Lato', sans-serif;
 }
 
@@ -55,6 +53,10 @@ p + p {
     margin-top: 20px
 }
 
+fieldset {
+    min-width: 0;
+}
+
 .visuallyhidden {
     position: absolute;
     overflow: hidden;
diff --git a/src/index.js b/src/index.js
index b06f95d..8b649bd 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,5 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import "reset-css";
 import "./index.css";
 
 import { Provider } from "react-redux";
diff --git a/src/store/quiz/quiz.actions.js b/src/store/quiz/quiz.actions.js
index c32c610..e989a8e 100644
--- a/src/store/quiz/quiz.actions.js
+++ b/src/store/quiz/quiz.actions.js
@@ -58,6 +58,8 @@ function* addAnswer() {
 
     yield put(setSelectedAnswerAction());
 
+    yield call(window.scrollTo, 0,0);
+
     if (answers.length === questions.length) {
         yield put(setStateAction(`emailCapture`));
     }
diff --git a/src/store/quiz/quiz.reducer.js b/src/store/quiz/quiz.reducer.js
index 2bc6d09..a088a32 100644
--- a/src/store/quiz/quiz.reducer.js
+++ b/src/store/quiz/quiz.reducer.js
@@ -13,8 +13,8 @@ export default createReducer(
         state: `nameCapture`,
         selectedAnswer: null,
         answers: [],
-        email: `dan@dan.com`,
-        name: `Dan`,
+        email: ``,
+        name: ``,
     },
     {
         [setStateAction().type]: (st, { state }) => ({
diff --git a/yarn.lock b/yarn.lock
index a1478c7..db66bc7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6826,10 +6826,6 @@ reserved-words@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/reserved-words/-/reserved-words-0.1.2.tgz#00a0940f98cd501aeaaac316411d9adc52b31ab1"
 
-reset-css@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/reset-css/-/reset-css-2.2.1.tgz#fe3204c0c4831979fbb4967c90a992f0164635ed"
-
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"