From b14dbba3b435783be697ac6c4caa1416fcb57e1c Mon Sep 17 00:00:00 2001
From: Francesco Esposito <33671357+frab1t@users.noreply.github.com>
Date: Fri, 15 Mar 2019 10:33:22 +0100
Subject: [PATCH] add Timer component

---
 src/components/Timer.css | 62 ++++++++++++++++++++++++-
 src/components/Timer.js  | 99 ++++++++++++++++++++++++++++------------
 2 files changed, 130 insertions(+), 31 deletions(-)

diff --git a/src/components/Timer.css b/src/components/Timer.css
index e307309..32c3cfe 100644
--- a/src/components/Timer.css
+++ b/src/components/Timer.css
@@ -1,3 +1,63 @@
 .timer {
     font-size: 120px; 
-}
\ No newline at end of file
+    font-weight: 600;
+    text-shadow: 0 0 2px #cf4242, 0 0 4px #2B2D1F;
+    color: white;
+    opacity: 1;
+}
+
+.buttons {
+    font-size: 22px;
+    font-weight: bold;
+    height: 70px;
+    border-radius: 30px;
+    box-shadow: 0 0 1px #03030349, 0 0 10px rgb(155, 156, 150);
+    opacity: 0.9;   
+}
+
+.top-buffer {
+    margin-top: 15px;
+}
+
+.buttons-box {
+    background-color: rgba(255, 255, 255, 0.9);		/* transparent */
+    padding: 20px;
+    margin-top: 5px;
+    border-radius: 30px;
+    opacity: 1;
+    box-shadow: 0 0 2px #cf4242, 0 0 5px rgb(243, 243, 243);
+}
+
+.App-logo {
+    height: 25vmin;
+    pointer-events: none;
+    filter: drop-shadow(0 0 1.00rem rgb(211, 204, 206));
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+.App-logo-rotation {
+    animation: App-logo-spin infinite 5s linear;
+  }
+
+
+  
+@keyframes App-logo-spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+
+.App-logo-scale {
+    animation: crescendo 0.5s alternate infinite ease-in;
+}
+
+@keyframes crescendo {
+    0%   {transform: scale(.8);}
+    100% {transform: scale(1.2);}
+  }
\ No newline at end of file
diff --git a/src/components/Timer.js b/src/components/Timer.js
index bef076f..b44fddb 100644
--- a/src/components/Timer.js
+++ b/src/components/Timer.js
@@ -1,16 +1,18 @@
 import React, { Component } from 'react';
-import { Button } from 'reactstrap';
+import { Button, Container, Row, Col } from 'reactstrap';
 import './Timer.css';
+import logo from '../logo.svg';
+
 
 class Timer extends Component {
-
-
   constructor(props) {
     super(props);
     this.defaultSeconds = 1500;
+    this.defaultLogoSpin = 'App-logo-rotation';
     this.state = { 
       seconds: this.defaultSeconds,
-      started: false
+      started: false,
+      logoSpin: ''
     };
     this.startTimer = this.startTimer.bind(this);
     this.stopTimer = this.stopTimer.bind(this);
@@ -26,12 +28,18 @@ class Timer extends Component {
   }
 
   startTimer() {
-    this.setState({ started: true })
+    this.setState({ 
+      started: true,
+      logoSpin: this.defaultLogoSpin
+    });
     this.interval = setInterval(() => this.tick(), 1000);
   }
   
   stopTimer() {
-    this.setState({ started: false });
+    this.setState({ 
+      started: false,
+      logoSpin: null
+     });
     clearInterval(this.interval);
   }
 
@@ -43,35 +51,66 @@ class Timer extends Component {
   render() {
     return (
       <div className="App">
-        
-        <p class="timer">{this.fmtMSS(this.state.seconds)}</p>
-        
-        <Button 
-          size="lg"
-          color="success"
-          onClick={this.startTimer}
-          disabled={this.state.started}
-        >
-          START
-        </Button>
-
-        <Button 
+        <Container>
+        <Row>
+          <Col>
+            <img className={`App-logo ${this.state.logoSpin}`} src={logo}/>
+          </Col>
+        </Row>
+        <Row>
+          <Col>
+          <p 
+            class="timer"
+          >
+            {this.fmtMSS(this.state.seconds)}
+          </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-buffer">
+          <Col>
+          <Button 
+          className="buttons"
+          block
           color="danger"
           size="lg"
           onClick={this.stopTimer}
           disabled={!this.state.started}
-        >
-          STOP
-        </Button>
+          >
+            Stop
+          </Button>
+          </Col>
 
-        <Button
-          color="secondary"
-          size="lg"
-          onClick={this.resetTimer}
-          disabled={this.state.started}
-        >
-          RESET
-        </Button>
+          <Col>
+          <Button 
+            className="buttons" 
+            block
+            color="secondary"
+            size="lg"
+            onClick={this.resetTimer}
+            disabled={this.state.started}
+          >
+            Reset
+          </Button>
+          </Col>
+        </Row>
+    
+        </div>
+        </Container>
       </div>
     );
   }