Added info modals.

Author: looshi2

css/index.scss

@@ -13,6 +13,13 @@ body {
   letter-spacing: 0.03em;
 }
 
+p {
+  &.about {
+    padding: 32px;
+    max-width: 600px;
+    margin: 0 auto;
+  }
+}
 
 .scroll-container {
   padding: 0;
@@ -74,17 +81,21 @@ footer {
   transform: translate3d(0, 0, 0);
   .footer-info {
     padding: 4px;
+    text-align: right;
   }
-  p {
+  a, p {
     font-size: 12px;
     display: inline-block;
-    vertical-align: super;
     margin: 0 12px;
     font-weight: 400;
     letter-spacing: 0.06em;
   }
   a {
     color: white;
+    text-decoration: underline;
+    &:hover {
+      cursor: pointer;
+    }
   }
 }
 
@@ -97,6 +108,7 @@ footer {
     display: inline-block;
     border: 1px solid $blue;
     border-radius: 24px;
+        vertical-align: middle;
     &:hover {
       cursor: pointer;
       border: 1px solid white;
@@ -305,3 +317,26 @@ h1 {
     margin-bottom: 12px;
   }
 }
+
+// Modals
+.ReactModal__Content {
+  .modal-close-button {
+    float: right;
+    padding: 10px;
+    font-size: 16px;
+    &:hover {
+      cursor: pointer;
+    }
+  }
+  p {
+    text-align: center;
+    max-width: 500px;
+    margin: 12px auto;
+    &.inverted {
+      border: 3px solid $blue;
+      word-wrap: break-word;
+      padding: 32px;
+      max-width: 436px;
+    }
+  }
+}

package.json

@@ -37,6 +37,7 @@
     "lodash": "^4.14.1",
     "node-sass": "^4.5.0",
     "query-string": "^4.3.1",
+    "react-modal": "^1.7.1",
     "react-select": "^1.0.0-rc.3",
     "react-share": "^1.12.1",
     "rimraf": "^2.5.4",

src/App.js

@@ -10,6 +10,8 @@ import LFOView from './views/LFO/LFOView.js'
 import ShareButtonRow from './views/ShareButtons/ShareButtonRow.js'
 import Presets from './views/Presets/Presets.js'
 import MidiInput from './views/Midi/MidiInput.js'
+import SavePatchModal from './views/Modals/SavePatchModal.js'
+import AboutModal from './views/Modals/AboutModal.js'
 import {connect} from 'react-redux'
 
 import Synth from './audio/Synth.js'
@@ -33,6 +35,23 @@ class App extends React.Component {
       let action = Actions.waveFileListLoaded(response.data)
       props.dispatch(action)
     })
+    this.state = {
+      isSavePatchModalOpen: false,
+      isAboutModalOpen: false
+    }
+  }
+
+  onOpenSavePatchModal () {
+    this.setState({isSavePatchModalOpen: true})
+  }
+  onCloseSavePatchModal () {
+    this.setState({isSavePatchModalOpen: false})
+  }
+  onOpenAboutModal () {
+    this.setState({isAboutModalOpen: true})
+  }
+  onCloseAboutModal () {
+    this.setState({isAboutModalOpen: false})
   }
 
   render () {
@@ -112,6 +131,8 @@ class App extends React.Component {
               eventEmitter={eventEmitter}
               Keyboard={this.props.Keyboard} />
             <div className='footer-info'>
+              <a onClick={this.onOpenAboutModal.bind(this)}>About</a>
+              <a onClick={this.onOpenSavePatchModal.bind(this)}>Save Patch</a>
               <ShareButtonRow />
               <p>Made By Elegant Borzoi and Jordan</p>
               <p>
@@ -122,6 +143,14 @@ class App extends React.Component {
             </div>
           </footer>
 
+          <SavePatchModal
+            isOpen={this.state.isSavePatchModalOpen}
+            onClose={this.onCloseSavePatchModal.bind(this)} />
+
+          <AboutModal
+            isOpen={this.state.isAboutModalOpen}
+            onClose={this.onCloseAboutModal.bind(this)} />
+
           <Synth
             store={this.props.store}
             eventEmitter={eventEmitter}

src/views/Modals/AboutModal.js

@@ -0,0 +1,26 @@
+/*
+AboutModal
+*/
+import React from 'react'
+import ReactModal from 'react-modal'
+
+export default class AboutModal extends React.Component {
+
+  render () {
+    return (
+      <div className='module'>
+        <ReactModal
+          isOpen={this.props.isOpen}
+          contentLabel='Save Your Patch'>
+          <div className='modal-close-button' onClick={this.props.onClose}>
+            X
+          </div>
+          <div>
+            <h1 className='text-center'>About This Synth</h1>
+            <p className='about'>Loosely based on Wavetable synthesis.  More info to come...</p>
+          </div>
+        </ReactModal>
+      </div>
+    )
+  }
+}

src/views/Modals/SavePatchModal.js

@@ -0,0 +1,28 @@
+/*
+SavePatchModal
+*/
+import React from 'react'
+import ReactModal from 'react-modal'
+
+export default class SavePatchModal extends React.Component {
+
+  render () {
+    return (
+      <div>
+        <ReactModal
+          isOpen={this.props.isOpen}
+          contentLabel='Save Your Patch'>
+          <div className='modal-close-button' onClick={this.props.onClose}>
+            X
+          </div>
+          <div>
+            <h1 className='text-center'>Save Patch</h1>
+            <p className='inverted'>{window.location.href}</p>
+            <p>Copy and paste the above link to save the current patch.</p>
+            <p>You can also copy the URL from the address bar.</p>
+          </div>
+        </ReactModal>
+      </div>
+    )
+  }
+}

src/views/ShareButtons/ShareButtonRow.js

@@ -1,4 +1,3 @@
-/* eslint-disable react/prefer-stateless-function */
 import React from 'react'
 import {
   ShareButtons,