From 0b9d1e0fe617a9d2202e92eac4f86e1b23176b50 Mon Sep 17 00:00:00 2001
From: Leta Keane <letakeane+turing@gmail.com>
Date: Mon, 5 Jun 2017 20:21:36 -0600
Subject: [PATCH 1/3] Edit face oval to match comp more closely

---
 app/assets/styles/main.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/assets/styles/main.css b/app/assets/styles/main.css
index 6768fcf..48c2763 100644
--- a/app/assets/styles/main.css
+++ b/app/assets/styles/main.css
@@ -181,10 +181,10 @@ video {
 .face-oval {
   width: 150px;
   height: 200px;
-  border: 2px dashed rgba(237, 205, 156, 0.5);
-  -moz-border-radius: 70px / 90px;
-	-webkit-border-radius: 70px / 90px;
-	border-radius: 70px / 90px;
+  border: 8px dashed rgba(237, 205, 156, 0.3);
+  -moz-border-radius: 85px / 100px;
+	-webkit-border-radius: 85px / 100px;
+	border-radius: 85px / 100px;
   position: absolute;
   top: 150px;
   left: 50%;

From b1090f9a9db3c698c678ac07b1e46c08ff79a619 Mon Sep 17 00:00:00 2001
From: Leta Keane <letakeane+turing@gmail.com>
Date: Mon, 5 Jun 2017 20:46:06 -0600
Subject: [PATCH 2/3] Adjust the text of the top button in the ImageCapture
 component

---
 app/components/ImageCapture/ImageCapture.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/ImageCapture/ImageCapture.js b/app/components/ImageCapture/ImageCapture.js
index 8bd180c..3b0a9d5 100644
--- a/app/components/ImageCapture/ImageCapture.js
+++ b/app/components/ImageCapture/ImageCapture.js
@@ -55,7 +55,7 @@ export default class ImageCapture extends Component {
     return (
       <article className='image-capture'>
         <button className='start-capture'
-                onClick={() => this.beginImageCapture()}>Start video</button>
+                onClick={() => this.beginImageCapture()}>start camera</button>
         <video autoPlay muted='true' height='350px' width='300px'></video>
         <div className='face-oval'></div>
         <button className='take-picture'

From a59ca721881f11f6c40d7b85106a98a249b76c93 Mon Sep 17 00:00:00 2001
From: Leta Keane <letakeane+turing@gmail.com>
Date: Tue, 6 Jun 2017 10:21:46 -0600
Subject: [PATCH 3/3] Add links to EmotionResults and fix antipattern in Play

---
 app/assets/styles/main.css                    | 20 +++++++++++++++++++
 .../EmotionResults/EmotionResults.js          | 16 ++++++++++++---
 app/components/Learn/LearnNav.js              |  2 --
 app/components/Learn/emotions/Surprise.js     |  2 +-
 app/components/PickEmotion/PickEmotion.js     |  3 ---
 app/components/Play/Play.js                   |  9 ++++++---
 6 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/app/assets/styles/main.css b/app/assets/styles/main.css
index 48c2763..0e9edbe 100644
--- a/app/assets/styles/main.css
+++ b/app/assets/styles/main.css
@@ -21,6 +21,10 @@ button:focus {
   outline: rgba(0, 0, 0, 0);
 }
 
+a:focus {
+  outline: rgba(0, 0, 0, 0);
+}
+
 .hidden {
   display: none;
 }
@@ -228,6 +232,22 @@ video {
   margin: 0 0 20px 0;
 }
 
+.learn-more-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 50px;
+  background-color: rgba(237, 205, 156, 1);
+  color: white;
+  border-radius: 50px;
+  margin-bottom: 30px;
+}
+
+.learn-more-link:hover {
+  font-weight: 700;
+  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
+}
+
 
 
 /*LEARN SECTION*/
diff --git a/app/components/EmotionResults/EmotionResults.js b/app/components/EmotionResults/EmotionResults.js
index e008c53..0f9215b 100644
--- a/app/components/EmotionResults/EmotionResults.js
+++ b/app/components/EmotionResults/EmotionResults.js
@@ -1,13 +1,22 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 import analyzeResponse from '../../lib/analyzeResponse.js';
 
-export const EmotionResults = ({ results, url }) => {
+export const EmotionResults = ({ results, url, pickedEmotion }) => {
   const noResults = () => {
     return (
       <h2 className='no-results'>Take a picture to see your expression!</h2>
     )
   }
 
+  const ifNotNeutralContemptRenderLink = (emotion) => {
+    if (emotion !== 'neutral' && emotion !== 'contempt') {
+      return (
+        <Link className='learn-more-link' to={`/learn/${emotion}`}>Learn more about {emotion}</Link>
+      )
+    }
+  }
+
   const showResults = () => {
     let emotionsForDisplay = analyzeResponse(results);
     return (
@@ -16,7 +25,7 @@ export const EmotionResults = ({ results, url }) => {
         <h2 className='results'>your expression is:</h2>
         {
           emotionsForDisplay.map((emotionObject, index) => {
-            if (emotionObject !== undefined) {
+            if (emotionObject !== undefined && emotionObject.emotion !== 'contempt') {
               return (
                 <div key={emotionObject.emotion}>
                   <h3 key={index}
@@ -26,6 +35,7 @@ export const EmotionResults = ({ results, url }) => {
                   <h2 className='emotion-score'>
                     {emotionObject.emotion}
                   </h2>
+                  {ifNotNeutralContemptRenderLink(emotionObject.emotion)}
                 </div>
               )
             }
@@ -36,7 +46,7 @@ export const EmotionResults = ({ results, url }) => {
   }
 
   const displayResults = () => {
-    return !results.length ? noResults() : showResults()
+    return (!results.length) ? noResults() : showResults()
   }
 
   return (
diff --git a/app/components/Learn/LearnNav.js b/app/components/Learn/LearnNav.js
index 47eae52..63160e6 100644
--- a/app/components/Learn/LearnNav.js
+++ b/app/components/Learn/LearnNav.js
@@ -16,7 +16,6 @@ export const LearnNav = () => {
   return (
     <nav>
       <ul>
-
         <li>
           <NavLink
             to="/learn/happiness"
@@ -59,7 +58,6 @@ export const LearnNav = () => {
               about
           </NavLink>
         </li>
-
       </ul>
     </nav>
   )
diff --git a/app/components/Learn/emotions/Surprise.js b/app/components/Learn/emotions/Surprise.js
index 8acff32..43d2d33 100644
--- a/app/components/Learn/emotions/Surprise.js
+++ b/app/components/Learn/emotions/Surprise.js
@@ -14,7 +14,7 @@ export const Surprise = () => {
       <article>
         <h2>What does surprise look like?</h2>
         <ul>
-          <li>Eyes wide open, or sometimes squeezeed shut</li>
+          <li>Eyes wide open, or sometimes squeezed shut</li>
           <li>Eyebrows raised</li>
           <li>Mouth usually open, sometimes lips are pursed into a small 'O' shape</li>
           <li>Depending on the situation, the person might freeze in place</li>
diff --git a/app/components/PickEmotion/PickEmotion.js b/app/components/PickEmotion/PickEmotion.js
index 7e2182d..39ac530 100644
--- a/app/components/PickEmotion/PickEmotion.js
+++ b/app/components/PickEmotion/PickEmotion.js
@@ -35,9 +35,6 @@ export default class PickEmotion extends Component {
         <button className={this.defineClass('scared')} onClick={() => this.pickEmotion('scared')}>
           scared
         </button>
-        <button className={this.defineClass('neutral')} onClick={() => this.pickEmotion('neutral')}>
-          neutral
-        </button>
       </article>
     )
   }
diff --git a/app/components/Play/Play.js b/app/components/Play/Play.js
index e07a956..67e10e4 100644
--- a/app/components/Play/Play.js
+++ b/app/components/Play/Play.js
@@ -11,6 +11,8 @@ export default class Play extends Component {
       emotions: [],
       canvasURL: ''
     }
+    this.analyzeEmotions = this.analyzeEmotions.bind(this)
+    this.getImageURL = this.getImageURL.bind(this)
   }
 
   getImageURL(url) {
@@ -43,10 +45,11 @@ export default class Play extends Component {
     return (
       <article className='play'>
         <PickEmotion />
-        <ImageCapture analyzeEmotions={this.analyzeEmotions.bind(this)}
-                      getImageURL={this.getImageURL.bind(this)}/>
+        <ImageCapture analyzeEmotions={this.analyzeEmotions}
+                      getImageURL={this.getImageURL}/>
         <EmotionResults results={this.state.emotions}
-                        url={this.state.canvasURL} />
+                        url={this.state.canvasURL}
+                        pickedEmotion={this.state.pickedEmotion} />
       </article>
     )
   }