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 (
Take a picture to see your expression!
)
}
+ const ifNotNeutralContemptRenderLink = (emotion) => {
+ if (emotion !== 'neutral' && emotion !== 'contempt') {
+ return (
+ Learn more about {emotion}
+ )
+ }
+ }
+
const showResults = () => {
let emotionsForDisplay = analyzeResponse(results);
return (
@@ -16,7 +25,7 @@ export const EmotionResults = ({ results, url }) => {
your expression is:
{
emotionsForDisplay.map((emotionObject, index) => {
- if (emotionObject !== undefined) {
+ if (emotionObject !== undefined && emotionObject.emotion !== 'contempt') {
return (
{
{emotionObject.emotion}
+ {ifNotNeutralContemptRenderLink(emotionObject.emotion)}
)
}
@@ -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 (
)
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 = () => {
What does surprise look like?
- - Eyes wide open, or sometimes squeezeed shut
+ - Eyes wide open, or sometimes squeezed shut
- Eyebrows raised
- Mouth usually open, sometimes lips are pursed into a small 'O' shape
- Depending on the situation, the person might freeze in place
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 {
-
)
}
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 (
-
+
+ url={this.state.canvasURL}
+ pickedEmotion={this.state.pickedEmotion} />
)
}