From 637cc9b467973fa31e6e6c97fa8d83d02375b948 Mon Sep 17 00:00:00 2001
From: Francesco Esposito <33671357+frab1t@users.noreply.github.com>
Date: Thu, 21 Mar 2019 11:22:41 +0100
Subject: [PATCH] edit Timer (buttonbox component)

---
 src/components/Timer.css |  5 +---
 src/components/Timer.js  | 62 +++++++++-------------------------------
 2 files changed, 15 insertions(+), 52 deletions(-)

diff --git a/src/components/Timer.css b/src/components/Timer.css
index dce227e..04a596c 100644
--- a/src/components/Timer.css
+++ b/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;
diff --git a/src/components/Timer.js b/src/components/Timer.js
index ecc8232..7fb1b32 100644
--- a/src/components/Timer.js
+++ b/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 (
@@ -145,54 +149,16 @@ class Timer extends Component {
             </p>
             </Col>
           </Row>
-
-          <div className="buttons-box">
-            <Row>
-              <Col>
-                <Button
-                  className="buttons" 
-                  block
-                  size="lg"
-                  color="success"
-                  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>
+            <Col>
+              <ButtonBox 
+                startTimer = {this.startTimer}
+                stopTimer = {this.stopTimer}
+                isStarted = {this.state.started}
+                resetTimer = {this.resetTimer}
+              />
+            </Col>
           </Row>
         </Container>