Fixed active state in mobile

src/Components/Answer/Answer.css

@@ -8,10 +8,25 @@
     color: #fff;
     border: 1px transparent solid;
 }
-.Answer button:hover, .Answer button:active {
+
+.Answer button:hover {
+    -webkit-tap-highlight-color: transparent;
     color: #dce869;
     border-color: #dce869;
 }
+
+.Answer button:active {
+    -webkit-tap-highlight-color: transparent;
+    color: #dce869;
+    border-color: #dce869;
+}
+
+.Answer button:focus{
+    -webkit-tap-highlight-color: transparent;
+    color: #dce869;
+    border-color: #dce869;
+}
+
 .Answer button span {
     padding-right: 10px;
 }

src/Components/Answer/__tests__/__snapshots__/AnswerSpec.js.snap

@@ -7,6 +7,7 @@ exports[`Answer renders correctly 1`] = `
   <button
     className="Answer--Btn"
     onClick={[Function]}
+    onTouchStart={[Function]}
   >
     <span>
       1

src/Components/Answer/index.js

@@ -16,7 +16,7 @@ class Answer extends Component {
     const { value, currentIndex } = this.props;
     return (
       <div className="Answer">
-        <button className="Answer--Btn" onClick={this.handleClick}>
+        <button onTouchStart={()=>{}} className="Answer--Btn" onClick={this.handleClick}>
           <span>{currentIndex}) </span> {value}
         </button>
       </div>

src/Components/App/App.css

@@ -7,7 +7,8 @@
 
 .App__Logo {
   text-align: center;
-  margin-bottom: 30px;
+  margin-top: 15px;
+  margin-bottom: 15px;
 }
 
 .App__Logo a {

src/Components/Puzzle/Puzzle.css

@@ -1,15 +1,15 @@
 .Puzzle {
   background: #1e683d;
   color: #fff;
-  padding: 20px 20px;
+  padding: 20px 15px;
   box-shadow: inset 1px 1px 10px #0f0f0f;
   border-radius: 5px;
   min-height: 100%;
 }
 
 .Puzzle h1 {
   font-size: 30px;
-  margin: 0 0 20px;
+  margin: 0 0 20px 10px;
 }
 
 @media screen and (min-width: 600px) {

src/Components/Puzzle/__tests__/__snapshots__/PuzzleSpec.js.snap

@@ -18,6 +18,7 @@ exports[`Puzzle renders correctly 1`] = `
       <button
         className="Answer--Btn"
         onClick={[Function]}
+        onTouchStart={[Function]}
       >
         <span>
           1
@@ -33,6 +34,7 @@ exports[`Puzzle renders correctly 1`] = `
       <button
         className="Answer--Btn"
         onClick={[Function]}
+        onTouchStart={[Function]}
       >
         <span>
           2
@@ -48,6 +50,7 @@ exports[`Puzzle renders correctly 1`] = `
       <button
         className="Answer--Btn"
         onClick={[Function]}
+        onTouchStart={[Function]}
       >
         <span>
           3
@@ -63,6 +66,7 @@ exports[`Puzzle renders correctly 1`] = `
       <button
         className="Answer--Btn"
         onClick={[Function]}
+        onTouchStart={[Function]}
       >
         <span>
           4

src/Helpers/Core/Question.js

@@ -47,7 +47,7 @@ const Question = (level, operator) => {
         operands = Number.Sort(operands, 'desc')
     }
     return {
-        questionString: `What is ${operands[0]} ${operator} ${operands[1]} ?`,
+        questionString: `${operands[0]} ${operator} ${operands[1]} = ___ ?`,
         correctAnswer: getCorrectAnswer(operator, operands)
     }
 }

src/Helpers/Core/__tests__/QuestionSpec.js

@@ -6,19 +6,19 @@ describe("Question", () => {
         it("when operator '+' and level 'single'", () => {
             Number.Random = jest.fn(() => [1, 2]);
             const results = Question("single", "+");
-            expect(results.questionString).toEqual("What is 1 + 2 ?")
+            expect(results.questionString).toEqual("1 + 2 = ___ ?")
             expect(results.correctAnswer).toEqual(3)
         });
         it("when operator '+' and level 'double'", () => {
             Number.Random = jest.fn(() => [11, 21]);
             const results = Question("single", "+");
-            expect(results.questionString).toEqual("What is 11 + 21 ?")
+            expect(results.questionString).toEqual("11 + 21 = ___ ?")
             expect(results.correctAnswer).toEqual(32)
         });
         it("when operator '+' and level 'triple'", () => {
             Number.Random = jest.fn(() => [111, 211]);
             const results = Question("single", "+");
-            expect(results.questionString).toEqual("What is 111 + 211 ?")
+            expect(results.questionString).toEqual("111 + 211 = ___ ?")
             expect(results.correctAnswer).toEqual(322)
         });
     });
@@ -27,19 +27,19 @@ describe("Question", () => {
         it("when operator '-' and level 'single'", () => {
             Number.Random = jest.fn(() => [1, 2]);
             const results = Question("single", "-");
-            expect(results.questionString).toEqual("What is 2 - 1 ?")
+            expect(results.questionString).toEqual("2 - 1 = ___ ?")
             expect(results.correctAnswer).toEqual(1)
         });
         it("when operator '-' and level 'double'", () => {
             Number.Random = jest.fn(() => [11, 21]);
             const results = Question("single", "-");
-            expect(results.questionString).toEqual("What is 21 - 11 ?")
+            expect(results.questionString).toEqual("21 - 11 = ___ ?")
             expect(results.correctAnswer).toEqual(10)
         });
         it("when operator '-' and level 'triple'", () => {
             Number.Random = jest.fn(() => [111, 211]);
             const results = Question("single", "-");
-            expect(results.questionString).toEqual("What is 211 - 111 ?")
+            expect(results.questionString).toEqual("211 - 111 = ___ ?")
             expect(results.correctAnswer).toEqual(100)
         });
     });
@@ -48,19 +48,19 @@ describe("Question", () => {
         it("when operator 'x' and level 'single'", () => {
             Number.Random = jest.fn(() => [3, 2]);
             const results = Question("single", "x");
-            expect(results.questionString).toEqual("What is 3 x 2 ?")
+            expect(results.questionString).toEqual("3 x 2 = ___ ?")
             expect(results.correctAnswer).toEqual(6)
         });
         it("when operator 'x' and level 'double'", () => {
             Number.Random = jest.fn(() => [11, 21]);
             const results = Question("single", "x");
-            expect(results.questionString).toEqual("What is 11 x 21 ?")
+            expect(results.questionString).toEqual("11 x 21 = ___ ?")
             expect(results.correctAnswer).toEqual(231)
         });
         it("when operator 'x' and level 'triple'", () => {
             Number.Random = jest.fn(() => [111, 211]);
             const results = Question("single", "x");
-            expect(results.questionString).toEqual("What is 111 x 211 ?")
+            expect(results.questionString).toEqual("111 x 211 = ___ ?")
             expect(results.correctAnswer).toEqual(23421)
         });
     });