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?

) } 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} />
) }