CSS changes to make hint/guess text stand out against darker background

Issue jasonaowen#38: Better readability for solution texts

src/App.css

@@ -18,7 +18,7 @@
   font-size: 18px;
 }
 
-.hint {
+.hint-result {
   font-size: 20px;
   color: red;
 }
@@ -36,3 +36,23 @@
 #filter option {
   background-color: #5cb85c;
 }
+
+
+/* Styling for blurring the text box surrounding the guesses and hints */
+form.hint {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.guess-result > p,
+.hint-result > p {
+  background-color: rgb(0,0,0); /* Fallback color */
+  background-color: rgba(0,0,0, 0.8); /* Black w/opacity/see-through */
+  font-weight: bold;
+  border: 3px solid #f1f1f1;
+  display: inline-block;
+  width: 40%;
+  min-width: 350px;
+  padding: 20px;
+  text-align: center;
+}

src/components/guess.js

@@ -7,14 +7,14 @@ class Guess extends Component {
     if (guess.get('status') === "correct") {
       let person = this.props.person;
       return (
-          <div className="correct-guess">
-            Correct! Their Full Name is {person.getIn(['0','first_name'])} {person.getIn(['0','last_name'])}
+          <div className="guess-result correct-guess">
+            <p>Correct! Their Full Name is {person.getIn(['0','first_name'])} {person.getIn(['0','last_name'])}</p>
           </div>
       );
     } else if (guess.get('status') === "incorrect") {
       return (
-          <div className="incorrect-guess">
-            Wrong :(
+          <div className="guess-result incorrect-guess">
+            <p>Wrong :(</p>
           </div>
       );
     } else {

src/components/hint.js

@@ -13,8 +13,8 @@ class Hint extends Component {
         return element.get('first_name');
       }).join(', ');
       return (
-          <div className="hint please">
-            It is one of the following names <br/> {people}
+          <div className="hint-result hint please">
+            <p>It is one of the following names: <br/> {people}</p>
           </div>
       );
     } else {