refactoring buttons

src/App.css

@@ -15,60 +15,11 @@
 
 }
 
-button {
-  cursor: pointer;
-}
-
-.button {
-  text-align: center;
-  min-width: 88px;
-  font-size: 14px;
-  border-radius: 2px;
-  padding: 0 16px;
-  height: 36px;
-  border: none;
-  background-color: #4885ed;
-  color: white;
-  outline: none;
-}
-
-.button-inactive {
-  text-align: center;
-  min-width: 88px;
-  font-size: 14px;
-  border-radius: 2px;
-  padding: 0 16px;
-  height: 36px;
-  border: none;
-  background-color: #4885ed;
-  color: white;
-  outline: none;
-  cursor: default;
-}
-
 .dense {
   font-size: 13px;
   height: 32px;
 }
 
-.button.raised {
-  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-      transition-delay: 0.2s;
-      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-}
-
-.button:hover{
-  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12), inset 0 0 0 99999px rgba(0,0,0,0.12);
-}
-
-.button-simple:hover{
-  box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.12);
-}
-
-.button:active{
-  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2);
-}
-
 @media (min-width : 481px) {
   .leftSub {
     width: 68%;

src/App.js

@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import "./App.css";
 import "./flip.css";
 import "./elevation.css";
+import "./button.css";
 import Drop from "./Components/Drop/Drop";
 import Console from "./Components/Console/Console";
 import Table from "./Components/Table/Table";
@@ -27,6 +28,7 @@ class App extends Component {
     this.handleInputChange = this.handleInputChange.bind(this);
     this.switchState = this.switchState.bind(this);
     this.handleAbout = this.handleAbout.bind(this);
+    this.handleClear = this.handleClear.bind(this);
     this.state = {
       tabled: [],
       switch: false,
@@ -43,7 +45,8 @@ class App extends Component {
       api: "",
       string: "Reorder Quantity",
       method: "increment",
-      valueMethod: "increment"
+      valueMethod: "increment",
+      active: true
     };
   }
 
@@ -325,10 +328,20 @@ class App extends Component {
     }));
   }
 
+  handleButtonState(key, value) {
+    this.setState(previousState => ({
+      [key]: value
+    }));
+  }
+
   handleType(event) {
     this.setState({ inputValue: event.target.value });
   }
 
+  handleClear(event) {
+    this.setState({ console: ["Ready for document submission"] });
+  }
+
   handleAbout() {
     this.writeConsole(
       "Created by Alan Reader (github.com/readeral) of Jetblack Espresso (jetblackespresso.com.au) for Neto API integration testing"
@@ -337,7 +350,8 @@ class App extends Component {
 
   switchState() {
     this.setState({
-      switch: !this.state.switch
+      switch: !this.state.switch,
+      active: !this.state.active
     });
   }
 
@@ -356,6 +370,7 @@ class App extends Component {
               <MethodToggle
                 valueMethod={this.state.valueMethod}
                 handleChange={this.handleChange}
+                active={this.state.active}
               />
             </div>
             <ControlPanel
@@ -368,12 +383,15 @@ class App extends Component {
               waiting={this.state.waiting}
               hasdata={this.state.keyed.length}
               onClear={this.onClear}
+              active={this.state.active}
             />
           </div>
           <MetaControls
             switch={this.state.switch}
             switchState={this.switchState}
             handleAbout={this.handleAbout}
+            handleClear={this.handleClear}
+            active={this.state.active}
             class="mobile"
           />
           <div
@@ -403,6 +421,9 @@ class App extends Component {
             switch={this.state.switch}
             switchState={this.switchState}
             handleAbout={this.handleAbout}
+            handleClear={this.handleClear}
+            active={this.state.active}
+            writeConsole={this.writeConsole}
             class="desktop"
           />
         </div>

src/Components/ControlPanel/ControlPanel.css

@@ -12,7 +12,7 @@
 @media (min-width : 481px) {
   #control-panel {
     width: calc(32% - 10px);
-    margin: 0 0 10px 10px;
+    margin: 0 0 5px 10px;
   }
   #preview-button {
     display: block;
@@ -22,7 +22,6 @@
 #button-group .button {
   width: 100%;
 text-transform: uppercase;
-margin-bottom: 5px;
 }
 
 .small {

src/Components/ControlPanel/ControlPanel.js

@@ -10,22 +10,39 @@ class ControlPanel extends Component {
         <div id="button-group">
           <button
             onClick={this.props.onPreview}
-            className="button"
+            className={
+              this.props.active === true
+                ? "button button-blue"
+                : "button button-inactive"
+            }
             id="preview-button"
           >
             Preview API call
           </button>
           <button
             onClick={this.props.send}
-            className="button {this.props.active}"
+            className={
+              this.props.active === true
+                ? "button button-blue"
+                : "button button-inactive"
+            }
           >
             {this.props.waiting.a === true ? <Loader /> : "Update quantity"}
           </button>
-          <button onClick={this.props.receive} className="button">
+          <button
+            onClick={this.props.receive}
+            className={
+              this.props.active === true
+                ? "button button-blue"
+                : "button button-inactive"
+            }
+          >
             {this.props.waiting.b === true ? <Loader /> : "Get quantity"}
           </button>
         </div>
-        <Reset hasdata={this.props.hasdata} onClear={this.props.onClear} />
+        <div id="reset-group">
+          <Reset hasdata={this.props.hasdata} onClear={this.props.onClear} />
+        </div>
       </div>
     );
   }

src/Components/Drop/Drop.css

@@ -16,9 +16,7 @@
   background-color: #c8dadf;
   outline-offset: -10px;
   transition: outline-offset .15s ease-in-out, outline-color .15s ease-in-out, background-color .15s linear;
-
   height: 118px;
-      padding: 0px;
 }
 
 .active-colour {

src/Components/MetaControls/MetaControls.css

@@ -1,14 +1,18 @@
 
 #param-button {
-  min-width: 3%;
-  margin: 0 0 10px 10px;
+  min-width: 20%;
+  margin: 0 10px 10px 10px;
 }
 
 #about-button {
-  min-width: 25%;
-  margin: 0 10px 10px 5px;
+  min-width: 20%;
+  margin: 0 10px 10px 0;
 }
 
+#empty-button {
+  min-width: 20%;
+  margin: 0 10px 10px 0;
+}
 
 
 .desktop {
@@ -28,11 +32,16 @@
   }
   #param-button {
     min-width: 130px;
-    margin: 0 0 10px 0px;
+    margin: 0 10px 10px 0;
   }
 
   #about-button {
     min-width: auto;
-    margin: 0 10px 10px 5px;
+    margin: 0 10px 10px 0;
+  }
+
+  #empty-button {
+    min-width: auto;
+    margin: 0 10px 10px 0;
   }
 }

src/Components/MetaControls/MetaControls.js

@@ -2,23 +2,45 @@ import React, { Component } from "react";
 import "./MetaControls.css";
 
 class MetaControls extends Component {
+  constructor(props) {
+    super(props);
+  }
   render() {
     return (
       <div id="meta-control" className={this.props.class}>
         <button
           id="param-button"
           onClick={this.props.switchState}
-          className="button"
+          className={
+            this.props.active === true
+              ? "button button-blue"
+              : "button button-green"
+          }
         >
           {this.props.switch === true ? "Close" : "Parameters"}
         </button>
         <button
           id="about-button"
           onClick={this.props.handleAbout}
-          className="button"
+          className={
+            this.props.active === true
+              ? "button button-blue"
+              : "button button-inactive"
+          }
         >
           About
         </button>
+        <button
+          id="empty-button"
+          onClick={this.props.handleClear}
+          className={
+            this.props.active === true
+              ? "button button-blue"
+              : "button button-inactive"
+          }
+        >
+          Clear Console
+        </button>
       </div>
     );
   }

src/Components/MethodToggle/MethodToggle.js

@@ -3,6 +3,9 @@ import { RadioGroup, Radio } from "react-radio-group";
 import "./MethodToggle.css";
 
 class MethodToggle extends Component {
+  constructor(props) {
+    super(props);
+  }
   render() {
     return (
       <RadioGroup
@@ -14,16 +17,39 @@ class MethodToggle extends Component {
         }}
       >
         <Radio value="increment" id="increment" />
-        <label htmlFor="increment" className="button-simple label100">
+        <label
+          htmlFor="increment"
+          className={
+            this.props.active === true
+              ? "button-simple label100"
+              : "button-simple label100 button-inactive"
+          }
+        >
           Increment
         </label>
 
         <Radio value="decrement" id="decrement" />
-        <label htmlFor="decrement" className="button-simple label100">
+        <label
+          htmlFor="decrement"
+          className={
+            this.props.active === true
+              ? "button-simple label100"
+              : "button-simple label100 button-inactive"
+          }
+        >
           Decrement
         </label>
         <Radio value="set" id="set" />
-        <label htmlFor="set" className="button-simple label100">Set</label>
+        <label
+          htmlFor="set"
+          className={
+            this.props.active === true
+              ? "button-simple label100"
+              : "button-simple label100 button-inactive"
+          }
+        >
+          Set
+        </label>
       </RadioGroup>
     );
   }

src/Components/Reset/Reset.css

@@ -1,10 +1,3 @@
 #clear-button {
   width: 100%;
-  background-color: rgba(0,0,0,.12);
-  color: rgba(0,0,0,.26);
-}
-
-#clear-button.red {
-  background-color: #db3236;
-  color: white;
 }

src/Components/Reset/Reset.js

@@ -14,7 +14,11 @@ class Reset extends Component {
       <button
         onClick={this.props.onClear}
         id="clear-button"
-        className={this.props.hasdata > 0 ? "button red" : "button-inactive"}
+        className={
+          this.props.hasdata > 0
+            ? "button button-red"
+            : "button button-inactive"
+        }
       >
         RESET
       </button>