Added share buttons.

Author: looshi2

css/index.scss

@@ -60,10 +60,10 @@ header {
 footer {
   position: fixed;
   bottom: 0;
-  height: 100px;
+  height: 134px;
   padding: 1px 0 1px 1px;
   width: 1020px;
-  background-color: #353744;
+  background-color: $blue;
   color: white;
   left: calc(50% - 510px);
   /*
@@ -72,8 +72,43 @@ footer {
     which causes notice-able stuttering in audio playback when ARP is on.
   */
   transform: translate3d(0, 0, 0);
+  .footer-info {
+    padding: 4px;
+  }
+  p {
+    font-size: 12px;
+    display: inline-block;
+    vertical-align: super;
+    margin: 0 12px;
+    font-weight: 400;
+    letter-spacing: 0.06em;
+  }
+  a {
+    color: white;
+  }
 }
 
+.share-button-row {
+  display: inline-block;
+  .share-button-container {
+    display: inline-block;
+  }
+  .share-button {
+    display: inline-block;
+    border: 1px solid $blue;
+    border-radius: 24px;
+    &:hover {
+      cursor: pointer;
+      border: 1px solid white;
+    }
+  }
+  .share-count {
+    display: inline-block;
+    vertical-align: top;
+    padding: 5px 8px 0 4px;
+    font-size: 12px;
+  }
+}
 
 h1 {
   font-size: 30px;

package.json

@@ -38,6 +38,7 @@
     "node-sass": "^4.5.0",
     "query-string": "^4.3.1",
     "react-select": "^1.0.0-rc.3",
+    "react-share": "^1.12.1",
     "rimraf": "^2.5.4",
     "sass-loader": "^4.1.1",
     "standard": "^8.6.0",

src/App.js

@@ -7,6 +7,7 @@ import FilterView from './views/Filter/FilterView.js'
 import EffectsView from './views/Effects/EffectsView.js'
 import AmpView from './views/Filter/AmpView.js'
 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 {connect} from 'react-redux'
@@ -110,6 +111,15 @@ class App extends React.Component {
             <Keyboard
               eventEmitter={eventEmitter}
               Keyboard={this.props.Keyboard} />
+            <div className='footer-info'>
+              <ShareButtonRow />
+              <p>Made By Elegant Borzoi and Jordan</p>
+              <p>
+                <a href='https://github.com/looshi/wavetable-synth-2'>
+                  View Source Code on Github
+                </a>
+              </p>
+            </div>
           </footer>
 
           <Synth

src/views/ShareButtons/ShareButtonRow.js

@@ -0,0 +1,65 @@
+/* eslint-disable react/prefer-stateless-function */
+import React from 'react'
+import {
+  ShareButtons,
+  ShareCounts,
+  generateShareIcon
+} from 'react-share'
+
+const {
+  FacebookShareButton,
+  TwitterShareButton
+} = ShareButtons
+
+const {
+  FacebookShareCount
+} = ShareCounts
+
+const FacebookIcon = generateShareIcon('facebook')
+const TwitterIcon = generateShareIcon('twitter')
+
+const ShareButtonRow = React.createClass({
+  shouldComponentUpdate: function (nextProps, nextState) {
+    return false
+  },
+  render () {
+    const shareUrl = 'http://davedave.us/wavetable-synth/'
+    const title = 'Wavetable Synth'
+    const shareImage = 'http://davedave.us/wavetable-synth/images/share-image.png'
+    return (
+      <div className='share-button-row'>
+        <div className='share-button-container'>
+          <FacebookShareButton
+            url={shareUrl}
+            title={title}
+            picture={shareImage}
+            className='share-button'>
+            <FacebookIcon
+              size={24}
+              round />
+          </FacebookShareButton>
+
+          <FacebookShareCount
+            url={shareUrl}
+            className='share-count'>
+            {count => count}
+          </FacebookShareCount>
+        </div>
+
+        <div className='share-button-container'>
+          <TwitterShareButton
+            url={shareUrl}
+            title={title}
+            className='share-button'>
+            <TwitterIcon
+              size={24}
+              round />
+          </TwitterShareButton>
+
+          <div className='share-count' />
+        </div>
+      </div>
+    )
+  }
+})
+export default ShareButtonRow