edit Timer (buttonbox component)

src/components/Timer.css

@@ -13,11 +13,8 @@
     box-shadow:  0 0 1px #161616, 0 0 10px rgb(133, 133, 133);
 }
 
-.top-margin {
-    margin-top: 18px;
-}
 
-.buttons-box {
+.button-box {
     background-color: rgba(255, 255, 255, 1.0);
     padding: 20px;
     margin-top: 5px;

src/components/Timer.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
-import { Button, Container, Row, Col } from 'reactstrap';
+import { Container, Row, Col } from 'reactstrap';
 import Notification from 'react-web-notification';
+import ButtonBox from './ButtonBox';
 import './Timer.css';
 import logo from '../logo.svg';
 import sound from '../sound.mp3';
@@ -121,6 +122,9 @@ class Timer extends Component {
     this.setState({ seconds: this.seconds});
   }
 
+  isStarted() {
+    return this.state.started;
+  }
 
   render() {
     return (
@@ -146,54 +150,16 @@ class Timer extends Component {
             </Col>
           </Row>
  
-          <div className="buttons-box">
           <Row>
             <Col>
-                <Button
+              <ButtonBox 
-                  className="buttons" 
+                startTimer = {this.startTimer}
-                  block
+                stopTimer = {this.stopTimer}
-                  size="lg"
+                isStarted = {this.state.started}
-                  color="success"
+                resetTimer = {this.resetTimer}
-                  onClick={this.startTimer}
+              />
-                  disabled={this.state.started}
-                >
-                  START
-                </Button>
             </Col>
           </Row>
-
-            <Row  
-              className="top-margin"
-            >
-              <Col>
-                <Button
-                  className="buttons"
-                  block
-                  color="danger"
-                  size="lg"
-                  onClick={this.stopTimer}
-                  disabled={!this.state.started}
-                >
-                  STOP
-                </Button>
-              </Col>
-
-              <Col>
-                <Button
-                  className="buttons" 
-                  block
-                  color="secondary"
-                  size="lg"
-                  onClick={this.resetTimer}
-                  disabled={this.state.started || this.state.seconds === this.seconds}
-                >
-                  RESET
-                </Button>
-              </Col>
-            </Row>
-          </div>
-          <Row>
-          </Row>
         </Container>
 
         <Notification