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