changes per PR notes

src/components/App.css

@@ -1,5 +1,4 @@
 .calculator {
-  z-index: 1;
   position: absolute;
   top: 60px;
   right: 0;

src/components/Burst.css

@@ -71,3 +71,9 @@
   font-size: 17px;
   font-family: Arial, Helvetica, sans-serif;
 }
+
+.Burst-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/components/Burst.js

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { getCalcState, setCalcState } from '../lib/calc-helpers';
 import { getBurstErrors } from '../lib/input-helpers';
 import './Burst.css';
+import InfoIcon from './InfoIcon';
 
 class Burst extends Component {
   constructor(props) {
@@ -84,11 +85,18 @@ class Burst extends Component {
   render() {
     const { idx, min, max, step, errors } = this.state;
     const { expanded } = this.props;
+    const burstInfo = `Burst allows you to generate multiple snapshots
+      of your graph at one time. Enter the relevant info in the input fields
+      and hit capture to watch the magic happen.`;
 
     if (!expanded) return <div className="Burst" />;
 
     return (
       <div className={classNames('Burst', { 'Burst-expanded': expanded })}>
+        <div className="Burst-header">
+          <h2>Burst</h2>
+          <InfoIcon infoText={burstInfo} />
+        </div>
         <div data-testid="Burst-slider-index-label">Slider Index</div>
         <input
           className={classNames('Burst-input', {

src/components/Folder.css

@@ -140,6 +140,12 @@
   border-color: #e79600;
 }
 
+.Folder-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 @media (max-width: 448px) {
   .Folder {
     width: calc(100vw - 70px);

src/components/Folder.js

@@ -6,6 +6,7 @@ import {
 } from '../lib/local-storage-helpers';
 import panes from '../constants/pane-types';
 import './Folder.css';
+import InfoIcon from './InfoIcon';
 
 class Folder extends Component {
   constructor(props) {
@@ -101,12 +102,19 @@ class Folder extends Component {
       </div>
     );
 
+    const folderText = `The folder allows you to save your graphs so you 
+                          can come back to them at a later time.`;
+
     return (
       <div
         className={classNames('Folder', {
           'Folder-expanded': expanded
         })}
       >
+        <div className="Folder-header">
+          <h2>Folder</h2>
+          <InfoIcon infoText={folderText} />
+        </div>
         <div>
           <div className="Folder-titles">Name</div>
           <input

src/components/InfoIcon.css

@@ -0,0 +1,40 @@
+.InfoIcon-icon {
+  height: 17px;
+  width: 17px;
+  margin-left: 10px;
+  margin-top: 7px;
+}
+
+.InfoIcon-icon:hover {
+  cursor: pointer;
+}
+
+.InfoIcon-text-container {
+  position: relative;
+}
+
+.InfoIcon-text {
+  position: absolute;
+  background-color: rgb(34, 34, 34, 0.8);
+  width: 180px;
+  margin-left: 10px;
+  left: 100%;
+  top: 10%;
+  font-size: 13px;
+  padding: 1rem;
+  border-radius: 5px;
+  text-align: left;
+  z-index: 1;
+}
+
+.InfoIcon-text a {
+  color: #fff;
+}
+
+.InfoIcon-text a:hover {
+  color: rgb(184, 184, 184);
+}
+
+.InfoIcon-text.hide {
+  display: none;
+}

src/components/InfoIcon.js

@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+import info from './icons/info.svg';
+import './InfoIcon.css';
+
+export default class InfoIcon extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      show: false
+    };
+    this.toggleInfo = this.toggleInfo.bind(this);
+  }
+
+  toggleInfo() {
+    this.setState({
+      show: !this.state.show
+    });
+  }
+
+  render() {
+    const displayClass = this.state.show ? 'show' : 'hide';
+    return (
+      <div className="InfoIcon-text-container">
+        <img
+          src={info}
+          alt="info icon"
+          className="InfoIcon-icon"
+          onClick={this.toggleInfo}
+        />
+        <div className={`InfoIcon-text ${displayClass}`}>
+          <p>{this.props.infoText}</p>
+          <a href="https://github.com/desmosinc/gifsmos" target="blank">
+            <p>More Info</p>
+          </a>
+        </div>
+      </div>
+    );
+  }
+}

src/components/Preview.css

@@ -9,6 +9,7 @@
   transition: 0.2s transform;
   margin-bottom: 0;
   overflow: scroll;
+  color: #fff;
 }
 
 .Preview-expanded {
@@ -65,6 +66,12 @@
   color: #fff;
 }
 
+.Preview-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 @keyframes fade-in {
   0% {
     opacity: 0;

src/components/Preview.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import classNames from 'classnames';
 import Frame from './Frame';
+import InfoIcon from './InfoIcon';
 import GenerateGifFormContainer from '../containers/GenerateGifFormContainer';
 import './Preview.css';
 
@@ -89,12 +90,20 @@ class Preview extends Component {
 
     if (!expanded) return <div className="Preview" />;
 
+    const previewText = `Preview allows you to preview your future GIF by 
+                         scrubbing through snapshots with the slider or 
+                         previewing your GIF with the play/pause button.`;
+
     return (
       <div
         className={classNames('Preview', { 'Preview-expanded': expanded })}
         data-testid="Preview-container"
         onClick={this.handleClickContainer}
       >
+        <div className="Preview-header">
+          <h2>Preview</h2>
+          <InfoIcon infoText={previewText} />
+        </div>
         <div className={classNames({ 'Preview-muted': !numFrames })}>
           <Frame
             imageSrc={imageSrc}
@@ -143,7 +152,7 @@ class Preview extends Component {
         {gifProgress === 1 ? (
           <div className="Preview-progress-success">Download Successful</div>
         ) : null}
-        {!frameIDs.length ? (
+        {!numFrames ? (
           <div className="Preview-no-frames">
             No frames have been captured. Use the camera or burst tools to add
             some!

src/components/Settings.css

@@ -48,3 +48,9 @@
   font-size: 1em;
   outline: none !important;
 }
+
+.Settings-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/components/Settings.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import classNames from 'classnames';
 import { isPositiveInteger, isProperBound } from '../lib/input-helpers';
 import './Settings.css';
+import InfoIcon from './InfoIcon';
 
 class Settings extends Component {
   constructor(props) {
@@ -43,10 +44,16 @@ class Settings extends Component {
 
     if (!expanded) return <div className="Settings" />;
 
+    const settingsText = `The settings panel allows you to set your desired image dimensions 
+                          as well as the interval between frames in the generated GIF.`;
     return (
       <div
         className={classNames('Settings', { 'Settings-expanded': expanded })}
       >
+        <div className="Settings-header">
+          <h2>Settings</h2>
+          <InfoIcon infoText={settingsText} />
+        </div>
         <div data-testid="Settings-image-width-label">Image Width</div>
         <input
           className={classNames('Settings-input', {