Style Intro section

Author: zoltantothcom

__tests__/pages/__snapshots__/About.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`About page renders with a DARK theme 1`] = `
 .c0 {
-  color: #F5F5F5;
+  color: #C8C8C8;
 }
 
 .c0 a {
@@ -71,7 +71,7 @@ exports[`About page renders with a DARK theme 1`] = `
 
 exports[`About page renders with a LIGHT theme 1`] = `
 .c0 {
-  color: #0A000A;
+  color: #6F256F;
 }
 
 .c0 a {

__tests__/pages/__snapshots__/Game.test.js.snap

@@ -887,7 +887,7 @@ exports[`Game page - INTRO renders a <Button /> component 1`] = `
 
 <Button
   id="start"
-  label="Start"
+  label="Start Game"
   onClick={[Function]}
 >
   <styled.button
@@ -963,7 +963,7 @@ exports[`Game page - INTRO renders a <Button /> component 1`] = `
         onClick={[Function]}
       >
         <span>
-          Start
+          Start Game
         </span>
       </button>
     </StyledComponent>
@@ -1071,7 +1071,7 @@ exports[`Game page - RESULTS renders a <Restart /> component 1`] = `null`;
 
 exports[`Game page - RESULTS renders a <Result /> component 1`] = `
 .c0 {
-  color: #0A000A;
+  color: #6F256F;
   margin: 3rem 0;
   text-align: center;
 }

src/pages/Game.jsx

@@ -12,6 +12,19 @@ import Result from '../components/Result';
 import Percentage from '../components/Percentage';
 import Button from '../components/Button';
 
+const Intro = styled.div`
+  border: 1px solid ${props => props.theme.border};
+  border-radius: 4px;
+  color: ${props => props.theme.text};
+  margin: 2rem 0;
+  padding: 2rem 3rem;
+`;
+
+const StartButtonContainer = styled.div`
+  margin: 3rem auto 1rem;
+  /* text-align: center; */
+`;
+
 const Restart = styled.div`
   margin: 3rem 0;
   text-align: center;
@@ -45,7 +58,19 @@ const Game = ({ intro, current, answers, style, onStart, onRestart }) => {
 
   return (
     <Fragment>
-      {intro && <Button label="Start" id="start" onClick={onStart} />}
+      {intro && (
+        <Intro>
+          <p>
+            Each question contains a code snippet and four answer choices.
+            <br />
+            Look carefully at the code and choose the one correct answer.
+          </p>
+          <p>After answering all 23 questions you'll be shown your results.</p>
+          <StartButtonContainer>
+            <Button label="Start Game" id="start" onClick={onStart} />
+          </StartButtonContainer>
+        </Intro>
+      )}
 
       {!intro && current && (
         <Fragment>

src/static/constants/colors.js

@@ -14,7 +14,6 @@ export const WILD_SAND = '#F5F5F5';
 export const WHITE = '#FFFFFF';
 
 // light theme
-export const DIESEL = '#0A000A';
 export const PLUM = '#6F256F';
 export const BOUQUET = '#A568A5';
 export const ORCHID = '#EDB8ED';

src/styles/themes/theme.dark.js

@@ -37,5 +37,7 @@ export const themeDark = {
 
   // text and header
   header: C.GRAY,
-  text: C.WILD_SAND
+  text: C.SILVER,
+
+  border: C.TUNDORA
 };

src/styles/themes/theme.light.js

@@ -37,5 +37,7 @@ export const themeLight = {
 
   // text and header
   header: C.PLUM,
-  text: C.DIESEL
+  text: C.PLUM,
+
+  border: C.PRIM
 };