adds arrow animation above line chart

whole line chart is clickable and links to line-chart-detail view
related ##286

app/components/view-goal/view-goal.jsx

@@ -31,9 +31,10 @@ const viewGoal = ({ currentGoal, rateGoal, stepLineChartDetail, }) => {
           <p
             id="line-chart-title-text"
             onClick={ stepLineChartDetail }
-          >Your progress so far&nbsp;&gt;</p>
+          >Your progress so far&nbsp;</p>
+        <div className="arrow arrow-1" />
         </div>
-        <div className="line-chart-inner">
+        <div className="line-chart-inner" onClick={ stepLineChartDetail }>
           <LineChart
             ratings={ latestRatings }
             avatar={ currentGoal.avatar }

app/scss/_view-goal.scss

@@ -95,3 +95,54 @@ $contentMaxWidth: 400px;
 .view-goal-buttonContainer {
   height: 80px;
 }
+
+/* arrow stuff */
+
+$ani-speed: 2s;
+$ani-delay: 1s;
+
+.arrow {
+  opacity: 1;
+  position: absolute;
+    left: 55%;
+    top: 56%;
+
+  animation: arrow-movement $ani-speed ease-in-out 3;
+
+  &:before, &:after {
+    background: transparent;
+    content: '>';
+    display: block;
+    height: 1px;
+    position: absolute;
+      top: 0;
+      left: 0;
+    width: 3px;
+  }
+
+  &:before {
+    transform-origin: top left;
+    color: transparent;
+  }
+
+  &:after {
+    transform-origin: top right;
+    color: $light;
+  }
+}
+
+// Animation
+@keyframes arrow-movement {
+  0%   {
+    opacity: 0;
+    left: 50%;
+  }
+
+  70% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}