synthing

commit 8410966cf440b7764354c4bf1d1d90261106ff49
parent d556bc2cfd4434ad56b8fc5d8d8be04c1c36fc4d
Author: Massimo Siboldi <mdsiboldi@gmail.com>
Date:   Tue,  6 Feb 2018 23:16:44 -0800

Improve button style

Diffstat:
M
src/App/index.js
 | 
4
+---
M
src/CircleButton/index.js
 | 
5
+++--
M
src/CircleButton/style.css
 | 
9
++++-----
M
src/index.css
 | 
13
+++++++++++--

4 files changed, 19 insertions(+), 12 deletions(-)
diff --git a/src/App/index.js b/src/App/index.js
@@ -46,7 +46,6 @@ const boolArray = {
     }
 }
 
-//TODO this
 class Knob extends Component {
     componentDidMount() {
         const handleMove = (ev) => {
@@ -247,6 +246,7 @@ class App extends Component {
                       <CircleButton
                           active={this.state.interval}
                           action={this.metro}
+                          disabled={this.state.interval}
                       >
                           <div class="triangle"></div>
                       </CircleButton>
@@ -256,10 +256,8 @@ class App extends Component {
                       >
                           <div class="rectangle"></div>
                       </CircleButton>
-                      <button onClick={this.metro}>start</button>
                       <button onClick={() => {this.setBeats(this.state.numBeats + 1)}}>+ beat</button>
                       <button onClick={() => {this.setBeats(this.state.numBeats - 1)}}>- beat</button>
-                      <button onClick={this.stopMetro}>stop</button>
                       <Adsr adsr={this.state.adsr} update={this.updateAdsr} />
                   </div>
                   {waves}
diff --git a/src/CircleButton/index.js b/src/CircleButton/index.js
@@ -10,12 +10,13 @@ const handleAction = (action, e) => {
 }
 
 export default props => (
-    <div
+    <button
         tabindex="0"
+        disabled={props.disabled}
         class={`circle-button circle${props.active ? ' active' : ''}`}
         onClick={props.action}
         onKeyDown={handleAction.bind(null, props.action)}
     >
         {props.children}
-    </div>
+    </button>
 )
diff --git a/src/CircleButton/style.css b/src/CircleButton/style.css
@@ -1,12 +1,10 @@
 .circle-button {
-    display: inline-flex !important;
     margin: 5px;
-    cursor: pointer;
 }
 
 .circle-button.circle {
     background: transparent;
-    border: 3px solid transparent;
+    border: 2px solid transparent;
 }
 
 .circle-button.circle .triangle {
@@ -21,8 +19,9 @@
     background: #edccc4;
     transition: background 0.2s linear;
 }
-.circle-button.circle:active {
-    border: 3px solid rgba(255,75,54,0.5);
+
+.circle-button.circle:active, .circle-button.circle:focus {
+    border: 2px solid rgba(255,75,54,0.2);
     
 }
 .circle-button.circle.active {
diff --git a/src/index.css b/src/index.css
@@ -16,6 +16,15 @@ body {
     font-family: Hack, monospace, san-serif;
 }
 
+*:focus {
+    outline: none !important;
+}
+
+button::-moz-focus-inner {
+    border: 0;
+    outline: none !important;
+}
+
 h1 {
     text-align: left;
 }
@@ -28,7 +37,7 @@ h1 {
     width: 0;
     height: 0;
     position: relative;
-    left: 0.07em;
+    left: 0.05em;
 }
 
 .rectangle {
@@ -37,7 +46,7 @@ h1 {
 }
 
 .circle {
-    display: flex;
+    display: inline-flex;
     justify-content: center;
     align-items: center;
     height: 1em;