From b98a8ed0ff632bd5295364f09ebf95b658e04258 Mon Sep 17 00:00:00 2001
From: Spencer Phillipson <phillipson808@gmail.com>
Date: Mon, 24 Jun 2019 16:29:24 -0700
Subject: [PATCH 1/6] added info feature

---
 src/blurbs/burstBlurb.js      |  4 +++
 src/blurbs/previewBlurb.js    |  4 +++
 src/blurbs/settingsBlurb.js   |  4 +++
 src/components/Burst.js       |  5 ++++
 src/components/Info.css       | 51 +++++++++++++++++++++++++++++++++++
 src/components/Info.js        | 44 ++++++++++++++++++++++++++++++
 src/components/Preview.js     |  3 +++
 src/components/Settings.js    |  3 +++
 src/components/icons/info.svg |  1 +
 9 files changed, 119 insertions(+)
 create mode 100644 src/blurbs/burstBlurb.js
 create mode 100644 src/blurbs/previewBlurb.js
 create mode 100644 src/blurbs/settingsBlurb.js
 create mode 100644 src/components/Info.css
 create mode 100644 src/components/Info.js
 create mode 100644 src/components/icons/info.svg

diff --git a/src/blurbs/burstBlurb.js b/src/blurbs/burstBlurb.js
new file mode 100644
index 0000000..cbc78a2
--- /dev/null
+++ b/src/blurbs/burstBlurb.js
@@ -0,0 +1,4 @@
+const burstBlurb =
+  '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.';
+
+export default burstBlurb;
diff --git a/src/blurbs/previewBlurb.js b/src/blurbs/previewBlurb.js
new file mode 100644
index 0000000..e5ad802
--- /dev/null
+++ b/src/blurbs/previewBlurb.js
@@ -0,0 +1,4 @@
+const previewBlurb =
+  'Preview allows you to preview your future GIF by scrubbing through snapshots with the slider or previewing your GIF with the play/pause button.';
+
+export default previewBlurb;
diff --git a/src/blurbs/settingsBlurb.js b/src/blurbs/settingsBlurb.js
new file mode 100644
index 0000000..923ae68
--- /dev/null
+++ b/src/blurbs/settingsBlurb.js
@@ -0,0 +1,4 @@
+const settingsBlurb =
+  'The settings panel allows you to set your desired image dimensions as well as the interval between frames in the generated GIF.';
+
+export default settingsBlurb;
diff --git a/src/components/Burst.js b/src/components/Burst.js
index 4b3a7fe..b3e573e 100644
--- a/src/components/Burst.js
+++ b/src/components/Burst.js
@@ -2,6 +2,8 @@ import React, { Component } from 'react';
 import classNames from 'classnames';
 import { getBurstErrors } from '../lib/input-helpers';
 import './Burst.css';
+import Info from './Info';
+import burstBlurb from '../blurbs/burstBlurb.js';
 
 class Burst extends Component {
   constructor(props) {
@@ -45,6 +47,9 @@ class Burst extends Component {
 
     return (
       <div className={classNames('Burst', { 'Burst-expanded': expanded })}>
+        <div className="Component-header">
+          <Info blurb={burstBlurb} title={'Burst'} />
+        </div>
         <div>Slider Index</div>
         <input
           className={classNames('Burst-input', {
diff --git a/src/components/Info.css b/src/components/Info.css
new file mode 100644
index 0000000..e4bfb21
--- /dev/null
+++ b/src/components/Info.css
@@ -0,0 +1,51 @@
+.Info-icon {
+  height: 20px;
+  width: 20px;
+  margin-left: 10px;
+  margin-top: 7px;
+}
+
+.Info-icon:hover {
+  cursor: pointer;
+}
+
+.Info-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.Info-header h1 {
+  color: #fff;
+}
+
+.Text-container {
+  position: relative;
+}
+
+.Show {
+  position: absolute;
+  z-index: 1;
+  background-color: rgb(34, 34, 34, 0.8);
+  width: 180px;
+  margin-left: 10px;
+  left: 100%;
+  top: 10%;
+  color: #fff;
+  font-size: 13px;
+  padding: 15px;
+  border-radius: 20px;
+  text-align: left;
+}
+
+.Show a {
+  color: #fff;
+}
+
+.Show a:hover {
+  color: rgb(184, 184, 184);
+}
+
+.Hide {
+  display: none;
+}
diff --git a/src/components/Info.js b/src/components/Info.js
new file mode 100644
index 0000000..440053d
--- /dev/null
+++ b/src/components/Info.js
@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import info from './icons/info.svg';
+import './Info.css';
+
+export default class Info 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="Info-container">
+        <div className="Info-header">
+          <h1>{this.props.title}</h1>
+          <div className="Text-container">
+            <img
+              src={info}
+              alt="info icon"
+              className="Info-icon"
+              onClick={this.toggleInfo}
+            />
+            <div className={displayClass}>
+              <p>{this.props.blurb}</p>
+              <a href="https://github.com/desmosinc/gifsmos" target="blank">
+                <p>More Info</p>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/components/Preview.js b/src/components/Preview.js
index 485895a..1d0aa14 100644
--- a/src/components/Preview.js
+++ b/src/components/Preview.js
@@ -1,7 +1,9 @@
 import React, { Component } from 'react';
 import classNames from 'classnames';
 import Frame from './Frame';
+import Info from './Info';
 import './Preview.css';
+import previewBlurb from '../blurbs/previewBlurb';
 
 class Preview extends Component {
   constructor(props) {
@@ -63,6 +65,7 @@ class Preview extends Component {
 
     return (
       <div className={classNames('Preview', { 'Preview-expanded': expanded })}>
+        <Info title="Preview" blurb={previewBlurb} />
         <Frame
           imageSrc={imageSrc}
           playing={playing}
diff --git a/src/components/Settings.js b/src/components/Settings.js
index 9780026..2798d19 100644
--- a/src/components/Settings.js
+++ b/src/components/Settings.js
@@ -2,6 +2,8 @@ import React, { Component } from 'react';
 import classNames from 'classnames';
 import { isPositiveInteger } from '../lib/input-helpers';
 import './Settings.css';
+import Info from './Info';
+import settingsBlurb from '../blurbs/settingsBlurb';
 
 class Settings extends Component {
   constructor(props) {
@@ -27,6 +29,7 @@ class Settings extends Component {
       <div
         className={classNames('Settings', { 'Settings-expanded': expanded })}
       >
+        <Info title="Settings" blurb={settingsBlurb} />
         <div>Image Width</div>
         <input
           className={classNames('Settings-input', {
diff --git a/src/components/icons/info.svg b/src/components/icons/info.svg
new file mode 100644
index 0000000..bb725ac
--- /dev/null
+++ b/src/components/icons/info.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:#fff;}</style></defs><title>info(white)</title><path class="cls-1" d="M50.16,0c27.45.09,50,22.66,49.84,49.92A50.14,50.14,0,0,1,49.8,100h0C22.33,100.05-.13,77.31,0,49.56A50,50,0,0,1,50.16,0Zm.23,9.46a40.43,40.43,0,0,0-40.81,40v.42C9.33,72,27.66,90.44,49.81,90.49A40.48,40.48,0,0,0,90.38,50.1v-.31C90.25,27.64,72.25,9.49,50.39,9.46Z" transform="translate(0 0)"/><path class="cls-1" d="M47.89,78.34H44.21a.74.74,0,0,0-.21-.13,4.75,4.75,0,0,1-2.84-5.7c1.67-6.89,3.39-13.77,5.06-20.66a21.7,21.7,0,0,0,.5-2.9.68.68,0,0,0-.46-.83.66.66,0,0,0-.44,0,5.77,5.77,0,0,0-1.15.39c-.84.35-1.65.76-2.49,1.09a1.41,1.41,0,0,1-1.81-.36V47.92A15.68,15.68,0,0,1,42.3,45.7c2.52-2,5.11-3.89,7.71-5.79a8.5,8.5,0,0,1,1.78-.9,4.33,4.33,0,0,1,2.61-.27,5.06,5.06,0,0,1,4.36,5.68,5,5,0,0,1-.19.85q-2.45,10-4.9,19.9a26.19,26.19,0,0,0-.58,3.28.64.64,0,0,0,.93.72c.62-.19,1.2-.49,1.8-.73s1.47-.61,2.22-.86a1.06,1.06,0,0,1,1.21.35,1.1,1.1,0,0,1,.12,1.3,4.45,4.45,0,0,1-.69,1.07,18.89,18.89,0,0,1-2,1.9A56.28,56.28,0,0,1,47.89,78.34Z" transform="translate(0 0)"/><path class="cls-1" d="M52.65,35.62a7,7,0,1,1,6.94-7.06v.06a7,7,0,0,1-6.9,7Z" transform="translate(0 0)"/></svg>
\ No newline at end of file

From 9abfba8d990947862b69e166d7c6889e7271115d Mon Sep 17 00:00:00 2001
From: Spencer Phillipson <phillipson808@gmail.com>
Date: Mon, 24 Jun 2019 16:40:55 -0700
Subject: [PATCH 2/6] minor style fixes

---
 src/components/Info.css | 8 ++++----
 src/components/Info.js  | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Info.css b/src/components/Info.css
index e4bfb21..4e5ed77 100644
--- a/src/components/Info.css
+++ b/src/components/Info.css
@@ -1,6 +1,6 @@
 .Info-icon {
-  height: 20px;
-  width: 20px;
+  height: 17px;
+  width: 17px;
   margin-left: 10px;
   margin-top: 7px;
 }
@@ -15,7 +15,7 @@
   align-items: center;
 }
 
-.Info-header h1 {
+.Info-header h2 {
   color: #fff;
 }
 
@@ -34,7 +34,7 @@
   color: #fff;
   font-size: 13px;
   padding: 15px;
-  border-radius: 20px;
+  border-radius: 5px;
   text-align: left;
 }
 
diff --git a/src/components/Info.js b/src/components/Info.js
index 440053d..35c6d09 100644
--- a/src/components/Info.js
+++ b/src/components/Info.js
@@ -22,7 +22,7 @@ export default class Info extends Component {
     return (
       <div className="Info-container">
         <div className="Info-header">
-          <h1>{this.props.title}</h1>
+          <h2>{this.props.title}</h2>
           <div className="Text-container">
             <img
               src={info}

From b7c30bfd1f1bf4374ca152593b22113dc97f2015 Mon Sep 17 00:00:00 2001
From: Spencer Phillipson <phillipson808@gmail.com>
Date: Mon, 24 Jun 2019 16:50:28 -0700
Subject: [PATCH 3/6] Adding info for folder pane

---
 src/blurbs/folderBlurb.js | 4 ++++
 src/components/Burst.js   | 1 -
 src/components/Folder.js  | 3 +++
 3 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 src/blurbs/folderBlurb.js

diff --git a/src/blurbs/folderBlurb.js b/src/blurbs/folderBlurb.js
new file mode 100644
index 0000000..fb5affa
--- /dev/null
+++ b/src/blurbs/folderBlurb.js
@@ -0,0 +1,4 @@
+const folderBlurb =
+  'The folder allows you to save your graphs so you can come back to them at a later time.';
+
+export default folderBlurb;
diff --git a/src/components/Burst.js b/src/components/Burst.js
index 8c69164..52ec66d 100644
--- a/src/components/Burst.js
+++ b/src/components/Burst.js
@@ -50,7 +50,6 @@ class Burst extends Component {
         <div className="Component-header">
           <Info blurb={burstBlurb} title={'Burst'} />
         </div>
-        <div>Slider Index</div>
         <div data-testid="Burst-slider-index-label">Slider Index</div>
         <input
           className={classNames('Burst-input', {
diff --git a/src/components/Folder.js b/src/components/Folder.js
index 4b7e452..b2e0b11 100644
--- a/src/components/Folder.js
+++ b/src/components/Folder.js
@@ -6,6 +6,8 @@ import {
 } from '../lib/local-storage-helpers';
 import panes from '../constants/pane-types';
 import './Folder.css';
+import Info from './Info';
+import folderBlurb from '../blurbs/folderBlurb';
 
 class Folder extends Component {
   constructor(props) {
@@ -107,6 +109,7 @@ class Folder extends Component {
           'Folder-expanded': expanded
         })}
       >
+        <Info title="Folder" blurb={folderBlurb} />
         <div>
           <div className="Folder-titles">Name</div>
           <input

From a0c375a82f171dcd788f44b4411bb72e6aafc630 Mon Sep 17 00:00:00 2001
From: Spencer Phillipson <phillipson808@gmail.com>
Date: Tue, 25 Jun 2019 15:36:39 -0700
Subject: [PATCH 4/6] Fixing PR

---
 src/blurbs/burstBlurb.js    |  4 ----
 src/blurbs/folderBlurb.js   |  4 ----
 src/blurbs/previewBlurb.js  |  4 ----
 src/blurbs/settingsBlurb.js |  4 ----
 src/components/Burst.css    |  6 ++++++
 src/components/Burst.js     |  7 +++++--
 src/components/Folder.css   |  6 ++++++
 src/components/Folder.js    |  9 +++++++--
 src/components/Info.css     | 23 ++++++-----------------
 src/components/Info.js      | 29 +++++++++++++----------------
 src/components/Preview.css  | 14 ++++++++++++++
 src/components/Preview.js   | 10 ++++++++--
 src/components/Settings.js  |  8 ++++++--
 13 files changed, 71 insertions(+), 57 deletions(-)
 delete mode 100644 src/blurbs/burstBlurb.js
 delete mode 100644 src/blurbs/folderBlurb.js
 delete mode 100644 src/blurbs/previewBlurb.js
 delete mode 100644 src/blurbs/settingsBlurb.js

diff --git a/src/blurbs/burstBlurb.js b/src/blurbs/burstBlurb.js
deleted file mode 100644
index cbc78a2..0000000
--- a/src/blurbs/burstBlurb.js
+++ /dev/null
@@ -1,4 +0,0 @@
-const burstBlurb =
-  '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.';
-
-export default burstBlurb;
diff --git a/src/blurbs/folderBlurb.js b/src/blurbs/folderBlurb.js
deleted file mode 100644
index fb5affa..0000000
--- a/src/blurbs/folderBlurb.js
+++ /dev/null
@@ -1,4 +0,0 @@
-const folderBlurb =
-  'The folder allows you to save your graphs so you can come back to them at a later time.';
-
-export default folderBlurb;
diff --git a/src/blurbs/previewBlurb.js b/src/blurbs/previewBlurb.js
deleted file mode 100644
index e5ad802..0000000
--- a/src/blurbs/previewBlurb.js
+++ /dev/null
@@ -1,4 +0,0 @@
-const previewBlurb =
-  'Preview allows you to preview your future GIF by scrubbing through snapshots with the slider or previewing your GIF with the play/pause button.';
-
-export default previewBlurb;
diff --git a/src/blurbs/settingsBlurb.js b/src/blurbs/settingsBlurb.js
deleted file mode 100644
index 923ae68..0000000
--- a/src/blurbs/settingsBlurb.js
+++ /dev/null
@@ -1,4 +0,0 @@
-const settingsBlurb =
-  'The settings panel allows you to set your desired image dimensions as well as the interval between frames in the generated GIF.';
-
-export default settingsBlurb;
diff --git a/src/components/Burst.css b/src/components/Burst.css
index 64bda24..a2e6715 100644
--- a/src/components/Burst.css
+++ b/src/components/Burst.css
@@ -71,3 +71,9 @@
   font-size: 17px;
   font-family: Arial, Helvetica, sans-serif;
 }
+
+.Component-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/src/components/Burst.js b/src/components/Burst.js
index 1661f1d..23e2d9e 100644
--- a/src/components/Burst.js
+++ b/src/components/Burst.js
@@ -4,7 +4,6 @@ import { getCalcState, setCalcState } from '../lib/calc-helpers';
 import { getBurstErrors } from '../lib/input-helpers';
 import './Burst.css';
 import Info from './Info';
-import burstBlurb from '../blurbs/burstBlurb.js';
 
 class Burst extends Component {
   constructor(props) {
@@ -86,13 +85,17 @@ 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="Component-header">
-          <Info blurb={burstBlurb} title={'Burst'} />
+          <h2>Burst</h2>
+          <Info infoText={burstInfo} title={'Burst'} />
         </div>
         <div data-testid="Burst-slider-index-label">Slider Index</div>
         <input
diff --git a/src/components/Folder.css b/src/components/Folder.css
index 39a9eb2..0ab6e83 100644
--- a/src/components/Folder.css
+++ b/src/components/Folder.css
@@ -140,6 +140,12 @@
   border-color: #e79600;
 }
 
+.Component-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 @media (max-width: 448px) {
   .Folder {
     width: calc(100vw - 70px);
diff --git a/src/components/Folder.js b/src/components/Folder.js
index b2e0b11..9b3aa61 100644
--- a/src/components/Folder.js
+++ b/src/components/Folder.js
@@ -7,7 +7,6 @@ import {
 import panes from '../constants/pane-types';
 import './Folder.css';
 import Info from './Info';
-import folderBlurb from '../blurbs/folderBlurb';
 
 class Folder extends Component {
   constructor(props) {
@@ -103,13 +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
         })}
       >
-        <Info title="Folder" blurb={folderBlurb} />
+        <div className="Component-header">
+          <h2>Folder</h2>
+          <Info infoText={folderText} />
+        </div>
         <div>
           <div className="Folder-titles">Name</div>
           <input
diff --git a/src/components/Info.css b/src/components/Info.css
index 4e5ed77..9005fb6 100644
--- a/src/components/Info.css
+++ b/src/components/Info.css
@@ -9,43 +9,32 @@
   cursor: pointer;
 }
 
-.Info-header {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.Info-header h2 {
-  color: #fff;
-}
-
 .Text-container {
   position: relative;
 }
 
-.Show {
+.Show-info {
   position: absolute;
-  z-index: 1;
   background-color: rgb(34, 34, 34, 0.8);
   width: 180px;
   margin-left: 10px;
   left: 100%;
   top: 10%;
-  color: #fff;
   font-size: 13px;
-  padding: 15px;
+  padding: 1rem;
   border-radius: 5px;
   text-align: left;
+  z-index: 1;
 }
 
-.Show a {
+.Show-info a {
   color: #fff;
 }
 
-.Show a:hover {
+.Show-info a:hover {
   color: rgb(184, 184, 184);
 }
 
-.Hide {
+.Hide-info {
   display: none;
 }
diff --git a/src/components/Info.js b/src/components/Info.js
index 35c6d09..9ad8b3c 100644
--- a/src/components/Info.js
+++ b/src/components/Info.js
@@ -18,24 +18,21 @@ export default class Info extends Component {
   }
 
   render() {
-    const displayClass = this.state.show ? 'Show' : 'Hide';
+    const displayClass = this.state.show ? 'Show-info' : 'Hide-info';
     return (
       <div className="Info-container">
-        <div className="Info-header">
-          <h2>{this.props.title}</h2>
-          <div className="Text-container">
-            <img
-              src={info}
-              alt="info icon"
-              className="Info-icon"
-              onClick={this.toggleInfo}
-            />
-            <div className={displayClass}>
-              <p>{this.props.blurb}</p>
-              <a href="https://github.com/desmosinc/gifsmos" target="blank">
-                <p>More Info</p>
-              </a>
-            </div>
+        <div className="Text-container">
+          <img
+            src={info}
+            alt="info icon"
+            className="Info-icon"
+            onClick={this.toggleInfo}
+          />
+          <div className={displayClass}>
+            <p>{this.props.infoText}</p>
+            <a href="https://github.com/desmosinc/gifsmos" target="blank">
+              <p>More Info</p>
+            </a>
           </div>
         </div>
       </div>
diff --git a/src/components/Preview.css b/src/components/Preview.css
index ddf0234..6c7d7ca 100644
--- a/src/components/Preview.css
+++ b/src/components/Preview.css
@@ -54,6 +54,20 @@
   color: #fff;
 }
 
+.Component-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.Component-header h2 {
+  color: #fff;
+}
+
+.Component-header p {
+  color: #fff;
+}
+
 @keyframes fade-in {
   0% {
     opacity: 0;
diff --git a/src/components/Preview.js b/src/components/Preview.js
index 0f5bcbc..664eee4 100644
--- a/src/components/Preview.js
+++ b/src/components/Preview.js
@@ -4,7 +4,6 @@ import Frame from './Frame';
 import Info from './Info';
 import GenerateGifFormContainer from '../containers/GenerateGifFormContainer';
 import './Preview.css';
-import previewBlurb from '../blurbs/previewBlurb';
 
 class Preview extends Component {
   constructor(props) {
@@ -68,12 +67,19 @@ 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"
       >
-        <Info title="Preview" blurb={previewBlurb} />
+        <div className="Component-header">
+          <h2>Preview</h2>
+          <Info infoText={previewText} />
+        </div>
         <Frame
           imageSrc={imageSrc}
           playing={playing}
diff --git a/src/components/Settings.js b/src/components/Settings.js
index 9b76f84..f3db0a8 100644
--- a/src/components/Settings.js
+++ b/src/components/Settings.js
@@ -3,7 +3,6 @@ import classNames from 'classnames';
 import { isPositiveInteger, isProperBound } from '../lib/input-helpers';
 import './Settings.css';
 import Info from './Info';
-import settingsBlurb from '../blurbs/settingsBlurb';
 
 class Settings extends Component {
   constructor(props) {
@@ -45,11 +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 })}
       >
-        <Info title="Settings" blurb={settingsBlurb} />
+        <div className="Component-header">
+          <h2>Settings</h2>
+          <Info infoText={settingsText} />
+        </div>
         <div data-testid="Settings-image-width-label">Image Width</div>
         <input
           className={classNames('Settings-input', {

From 519f8c98766bb015ab06b01b06249996db391065 Mon Sep 17 00:00:00 2001
From: Spencer Phillipson <phillipson808@gmail.com>
Date: Wed, 26 Jun 2019 09:36:07 -0700
Subject: [PATCH 5/6] Second round of revisions

---
 src/components/App.css                    |  1 -
 src/components/Burst.css                  |  2 +-
 src/components/Burst.js                   |  6 +++---
 src/components/Folder.css                 |  2 +-
 src/components/Folder.js                  |  6 +++---
 src/components/{Info.css => InfoIcon.css} | 12 ++++++------
 src/components/{Info.js => InfoIcon.js}   | 10 +++++-----
 src/components/Preview.css                |  6 +++---
 src/components/Preview.js                 |  6 +++---
 src/components/Settings.css               |  6 ++++++
 src/components/Settings.js                |  6 +++---
 11 files changed, 34 insertions(+), 29 deletions(-)
 rename src/components/{Info.css => InfoIcon.css} (82%)
 rename src/components/{Info.js => InfoIcon.js} (76%)

diff --git a/src/components/App.css b/src/components/App.css
index 613646a..c33c05b 100644
--- a/src/components/App.css
+++ b/src/components/App.css
@@ -1,5 +1,4 @@
 .calculator {
-  z-index: 1;
   position: absolute;
   top: 60px;
   right: 0;
diff --git a/src/components/Burst.css b/src/components/Burst.css
index a2e6715..1868cd0 100644
--- a/src/components/Burst.css
+++ b/src/components/Burst.css
@@ -72,7 +72,7 @@
   font-family: Arial, Helvetica, sans-serif;
 }
 
-.Component-header {
+.Burst-header {
   display: flex;
   justify-content: center;
   align-items: center;
diff --git a/src/components/Burst.js b/src/components/Burst.js
index 23e2d9e..b43238e 100644
--- a/src/components/Burst.js
+++ b/src/components/Burst.js
@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { getCalcState, setCalcState } from '../lib/calc-helpers';
 import { getBurstErrors } from '../lib/input-helpers';
 import './Burst.css';
-import Info from './Info';
+import InfoIcon from './InfoIcon';
 
 class Burst extends Component {
   constructor(props) {
@@ -93,9 +93,9 @@ class Burst extends Component {
 
     return (
       <div className={classNames('Burst', { 'Burst-expanded': expanded })}>
-        <div className="Component-header">
+        <div className="Burst-header">
           <h2>Burst</h2>
-          <Info infoText={burstInfo} title={'Burst'} />
+          <InfoIcon infoText={burstInfo} />
         </div>
         <div data-testid="Burst-slider-index-label">Slider Index</div>
         <input
diff --git a/src/components/Folder.css b/src/components/Folder.css
index 0ab6e83..c08f7dc 100644
--- a/src/components/Folder.css
+++ b/src/components/Folder.css
@@ -140,7 +140,7 @@
   border-color: #e79600;
 }
 
-.Component-header {
+.Folder-header {
   display: flex;
   justify-content: center;
   align-items: center;
diff --git a/src/components/Folder.js b/src/components/Folder.js
index 9b3aa61..330b247 100644
--- a/src/components/Folder.js
+++ b/src/components/Folder.js
@@ -6,7 +6,7 @@ import {
 } from '../lib/local-storage-helpers';
 import panes from '../constants/pane-types';
 import './Folder.css';
-import Info from './Info';
+import InfoIcon from './InfoIcon';
 
 class Folder extends Component {
   constructor(props) {
@@ -111,9 +111,9 @@ class Folder extends Component {
           'Folder-expanded': expanded
         })}
       >
-        <div className="Component-header">
+        <div className="Folder-header">
           <h2>Folder</h2>
-          <Info infoText={folderText} />
+          <InfoIcon infoText={folderText} />
         </div>
         <div>
           <div className="Folder-titles">Name</div>
diff --git a/src/components/Info.css b/src/components/InfoIcon.css
similarity index 82%
rename from src/components/Info.css
rename to src/components/InfoIcon.css
index 9005fb6..943da0c 100644
--- a/src/components/Info.css
+++ b/src/components/InfoIcon.css
@@ -1,11 +1,11 @@
-.Info-icon {
+.InfoIcon-icon {
   height: 17px;
   width: 17px;
   margin-left: 10px;
   margin-top: 7px;
 }
 
-.Info-icon:hover {
+.InfoIcon-icon:hover {
   cursor: pointer;
 }
 
@@ -13,7 +13,7 @@
   position: relative;
 }
 
-.Show-info {
+.Show {
   position: absolute;
   background-color: rgb(34, 34, 34, 0.8);
   width: 180px;
@@ -27,14 +27,14 @@
   z-index: 1;
 }
 
-.Show-info a {
+.Show a {
   color: #fff;
 }
 
-.Show-info a:hover {
+.Show a:hover {
   color: rgb(184, 184, 184);
 }
 
-.Hide-info {
+.Hide {
   display: none;
 }
diff --git a/src/components/Info.js b/src/components/InfoIcon.js
similarity index 76%
rename from src/components/Info.js
rename to src/components/InfoIcon.js
index 9ad8b3c..7693539 100644
--- a/src/components/Info.js
+++ b/src/components/InfoIcon.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import info from './icons/info.svg';
-import './Info.css';
+import './InfoIcon.css';
 
 export default class Info extends Component {
   constructor(props) {
@@ -18,17 +18,17 @@ export default class Info extends Component {
   }
 
   render() {
-    const displayClass = this.state.show ? 'Show-info' : 'Hide-info';
+    const displayClass = this.state.show ? 'Show' : 'Hide';
     return (
-      <div className="Info-container">
+      <div className="InfoIcon-text-container">
         <div className="Text-container">
           <img
             src={info}
             alt="info icon"
-            className="Info-icon"
+            className="InfoIcon-icon"
             onClick={this.toggleInfo}
           />
-          <div className={displayClass}>
+          <div className={`InfoIcon-text ${displayClass}`}>
             <p>{this.props.infoText}</p>
             <a href="https://github.com/desmosinc/gifsmos" target="blank">
               <p>More Info</p>
diff --git a/src/components/Preview.css b/src/components/Preview.css
index 37ee6ae..6ab03f1 100644
--- a/src/components/Preview.css
+++ b/src/components/Preview.css
@@ -60,17 +60,17 @@
   color: #fff;
 }
 
-.Component-header {
+.Preview-header {
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-.Component-header h2 {
+.Preview-header h2 {
   color: #fff;
 }
 
-.Component-header p {
+.Preview-header p {
   color: #fff;
 }
 
diff --git a/src/components/Preview.js b/src/components/Preview.js
index 6104f99..c8814d5 100644
--- a/src/components/Preview.js
+++ b/src/components/Preview.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import classNames from 'classnames';
 import Frame from './Frame';
-import Info from './Info';
+import InfoIcon from './InfoIcon';
 import GenerateGifFormContainer from '../containers/GenerateGifFormContainer';
 import './Preview.css';
 
@@ -100,9 +100,9 @@ class Preview extends Component {
         data-testid="Preview-container"
         onClick={this.handleClickContainer}
       >
-        <div className="Component-header">
+        <div className="Preview-header">
           <h2>Preview</h2>
-          <Info infoText={previewText} />
+          <InfoIcon infoText={previewText} />
         </div>
         <Frame
           imageSrc={imageSrc}
diff --git a/src/components/Settings.css b/src/components/Settings.css
index f446ce1..1c51cf8 100644
--- a/src/components/Settings.css
+++ b/src/components/Settings.css
@@ -48,3 +48,9 @@
   font-size: 1em;
   outline: none !important;
 }
+
+.Settings-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/src/components/Settings.js b/src/components/Settings.js
index f3db0a8..6e22274 100644
--- a/src/components/Settings.js
+++ b/src/components/Settings.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import classNames from 'classnames';
 import { isPositiveInteger, isProperBound } from '../lib/input-helpers';
 import './Settings.css';
-import Info from './Info';
+import InfoIcon from './InfoIcon';
 
 class Settings extends Component {
   constructor(props) {
@@ -50,9 +50,9 @@ class Settings extends Component {
       <div
         className={classNames('Settings', { 'Settings-expanded': expanded })}
       >
-        <div className="Component-header">
+        <div className="Settings-header">
           <h2>Settings</h2>
-          <Info infoText={settingsText} />
+          <InfoIcon infoText={settingsText} />
         </div>
         <div data-testid="Settings-image-width-label">Image Width</div>
         <input

From 2707dd67fcf21d0663ffd5e335d616a26ccbb944 Mon Sep 17 00:00:00 2001
From: Spencer Phillipson <phillipson808@gmail.com>
Date: Wed, 26 Jun 2019 11:33:32 -0700
Subject: [PATCH 6/6] final-changes

---
 src/components/InfoIcon.css | 10 +++++-----
 src/components/InfoIcon.js  | 28 +++++++++++++---------------
 src/components/Preview.css  |  9 +--------
 3 files changed, 19 insertions(+), 28 deletions(-)

diff --git a/src/components/InfoIcon.css b/src/components/InfoIcon.css
index 943da0c..aa8147b 100644
--- a/src/components/InfoIcon.css
+++ b/src/components/InfoIcon.css
@@ -9,11 +9,11 @@
   cursor: pointer;
 }
 
-.Text-container {
+.InfoIcon-text-container {
   position: relative;
 }
 
-.Show {
+.InfoIcon-text {
   position: absolute;
   background-color: rgb(34, 34, 34, 0.8);
   width: 180px;
@@ -27,14 +27,14 @@
   z-index: 1;
 }
 
-.Show a {
+.InfoIcon-text a {
   color: #fff;
 }
 
-.Show a:hover {
+.InfoIcon-text a:hover {
   color: rgb(184, 184, 184);
 }
 
-.Hide {
+.InfoIcon-text.hide {
   display: none;
 }
diff --git a/src/components/InfoIcon.js b/src/components/InfoIcon.js
index 7693539..46f5b83 100644
--- a/src/components/InfoIcon.js
+++ b/src/components/InfoIcon.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import info from './icons/info.svg';
 import './InfoIcon.css';
 
-export default class Info extends Component {
+export default class InfoIcon extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -18,22 +18,20 @@ export default class Info extends Component {
   }
 
   render() {
-    const displayClass = this.state.show ? 'Show' : 'Hide';
+    const displayClass = this.state.show ? 'show' : 'hide';
     return (
       <div className="InfoIcon-text-container">
-        <div className="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>
+        <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>
     );
diff --git a/src/components/Preview.css b/src/components/Preview.css
index 6ab03f1..513e75b 100644
--- a/src/components/Preview.css
+++ b/src/components/Preview.css
@@ -9,6 +9,7 @@
   transition: 0.2s transform;
   margin-bottom: 0;
   overflow: scroll;
+  color: #fff;
 }
 
 .Preview-expanded {
@@ -66,14 +67,6 @@
   align-items: center;
 }
 
-.Preview-header h2 {
-  color: #fff;
-}
-
-.Preview-header p {
-  color: #fff;
-}
-
 @keyframes fade-in {
   0% {
     opacity: 0;