diff --git a/app/assets/styles/main.css b/app/assets/styles/main.css index 6768fcf..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; } @@ -181,10 +185,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%; @@ -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/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 (
+ onClick={() => this.beginImageCapture()}>start camera
-
) } 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} />
) }