synthing

commit 5e149d438aca6c23db77b1952e225e7052a9f8cb
parent 5bb9be17685ed4711dcdf0c60e6ebb2742f9a60d
Author: Massimo Siboldi <mdsiboldi@gmail.com>
Date:   Mon,  9 Apr 2018 22:33:54 -0700

Add waveform button styles

Diffstat:
M
src/App/App.css
 | 
22
++++++++++++++++++++++
M
src/App/index.js
 | 
4
+++-
M
src/Help/Help.css
 | 
4
++--

3 files changed, 27 insertions(+), 3 deletions(-)
diff --git a/src/App/App.css b/src/App/App.css
@@ -0,0 +1,22 @@
+.App {
+    margin-bottom: 30px;
+}
+.add-button {
+    outline: none;
+    border: none;
+    border-radius: 9999px;
+    background: green;
+    font-size: 24px;
+    color: white;
+    opacity: 0.8;
+    height: 32px;
+    width: 32px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.add-button:hover {
+    cursor: pointer;
+    opacity: 1;
+}
diff --git a/src/App/index.js b/src/App/index.js
@@ -185,7 +185,9 @@ class App extends Component {
                 <div class="wave-manager-container">
                     {tones}
                 </div>
-                <button onClick={() => this.props.addTone()}>+</button>
+                <button class="add-button" onClick={() => this.props.addTone()}>
+                    <span>+</span>
+                </button>
                 <Synth
                     waveform={this.totalWaveform()}
                     volume={this.props.volume}
diff --git a/src/Help/Help.css b/src/Help/Help.css
@@ -29,8 +29,8 @@
     bottom: 25px;
     right: 25px;
     border-radius: 9999px;
-    height: 2em;
-    width: 2em;
+    height: 32px;
+    width: 32px;
     z-index: 100;
     cursor: pointer;
     opacity: 0.8;