From 469fca432f2588f9ca14c3327a9512e2d3cb1a0e Mon Sep 17 00:00:00 2001
From: Francesco Esposito <33671357+frab1t@users.noreply.github.com>
Date: Wed, 3 Apr 2019 23:09:38 +0200
Subject: [PATCH] Update style components

---
 src/components/Box.css                    | 26 +++++++++++++++++++++++
 src/components/{ButtonBox.js => Box.js}   | 22 ++++++++-----------
 src/components/ButtonBox.css              | 19 -----------------
 src/components/{LogoSpin.css => Logo.css} |  9 ++++----
 src/components/{LogoSpin.js => Logo.js}   | 10 ++++-----
 src/components/Timer.css                  | 26 ++++-------------------
 src/components/Timer.js                   | 12 +++++------
 7 files changed, 54 insertions(+), 70 deletions(-)
 create mode 100644 src/components/Box.css
 rename src/components/{ButtonBox.js => Box.js} (80%)
 delete mode 100644 src/components/ButtonBox.css
 rename src/components/{LogoSpin.css => Logo.css} (66%)
 rename src/components/{LogoSpin.js => Logo.js} (74%)

diff --git a/src/components/Box.css b/src/components/Box.css
new file mode 100644
index 0000000..47d9bc1
--- /dev/null
+++ b/src/components/Box.css
@@ -0,0 +1,26 @@
+.button {
+    font-size: 16px;
+    font-weight: lighter;
+    height: 50px;
+    border-radius: 40px;
+    width: 100%;
+    margin: 5px 0px 5px 0px;
+    transition: all .2s ease-in-out;
+    box-shadow:0 0 1px #111110, 0 0 10px rgb(193, 194, 190);
+}
+
+.box {
+    padding: 10px;
+    background-color: white;
+    border-radius: 10px;
+    box-shadow:0 0 1px #111010, 0 0 10px rgb(193, 194, 190);
+}
+
+.button:hover { 
+    transform: scale(1.01); 
+}
+
+.button:focus { 
+    transform: scale(1.01); 
+    box-shadow:0 0 5px #111010, 0 0 10px rgb(193, 194, 190);
+}
\ No newline at end of file
diff --git a/src/components/ButtonBox.js b/src/components/Box.js
similarity index 80%
rename from src/components/ButtonBox.js
rename to src/components/Box.js
index af2d53f..7b1a889 100644
--- a/src/components/ButtonBox.js
+++ b/src/components/Box.js
@@ -1,18 +1,19 @@
 import React, { Component } from 'react';
 import { Button, Row, Col } from 'reactstrap';
-import './ButtonBox.css';
+import './Box.css';
 
-class ButtonBox extends Component {
+class Box extends Component {
 
   constructor(props) {
     super(props);
+    this.state = {};
   }
 
   render() {
     return (
-      <div className="button-box">
+      <div className="box">
         <Row>
-          <Col>
+          <Col xs="12">
             <Button
               className="button"
               block
@@ -25,13 +26,10 @@ class ButtonBox extends Component {
             </Button>
           </Col>
         </Row>
-        <Row
-          className="top-margin"
-        >
-          <Col>
+        <Row>
+          <Col xs="6" md="6">
             <Button
               className="button"
-              block
               color="danger"
               size="lg"
               onClick={this.props.stopTimer}
@@ -40,11 +38,9 @@ class ButtonBox extends Component {
               STOP
              </Button>
           </Col>
-
-          <Col>
+          <Col xs="6" md="6">
               <Button
                 className="button"
-                block
                 color="secondary"
                 size="lg"
                 onClick={this.props.resetTimer}
@@ -59,4 +55,4 @@ class ButtonBox extends Component {
       }
     }
     
-    export default ButtonBox;
\ No newline at end of file
+    export default Box;
\ No newline at end of file
diff --git a/src/components/ButtonBox.css b/src/components/ButtonBox.css
deleted file mode 100644
index 776d054..0000000
--- a/src/components/ButtonBox.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.button {
-    font-size: 20px;
-    font-weight: bold;
-    height: 60px;
-    border-radius: 25px;
-    box-shadow:  0 0 1px #161616, 0 0 10px rgb(133, 133, 133);
-}
-
-.button-box {
-    background-color: rgba(255, 255, 255, 1.0);
-    padding: 20px;
-    margin-top: 5px;
-    border-radius: 25px;
-    box-shadow:0 0 1px #111010, 0 0 10px rgb(193, 194, 190);
-}
-
-.top-margin {
-    margin-top: 18px;
-}
\ No newline at end of file
diff --git a/src/components/LogoSpin.css b/src/components/Logo.css
similarity index 66%
rename from src/components/LogoSpin.css
rename to src/components/Logo.css
index 1029942..04c578d 100644
--- a/src/components/LogoSpin.css
+++ b/src/components/Logo.css
@@ -1,16 +1,17 @@
 .App-logo {
-    height: 25vmin;
-    filter: drop-shadow(0 0 0.50rem #f8ff9c);
+    height: 130px;
+    filter: drop-shadow(0 0 0.30rem #f8ff9c);
     align-items: center;
     justify-content: center;
     text-align: center;
+    transition: all .3s ease-in-out;
 }
 
+.App-logo:hover { transform: scale(1.2); }
+
 .App-logo-rotation {
     animation: App-logo-spin infinite 5s linear;
   }
-
-
   
 @keyframes App-logo-spin {
     from {
diff --git a/src/components/LogoSpin.js b/src/components/Logo.js
similarity index 74%
rename from src/components/LogoSpin.js
rename to src/components/Logo.js
index b65aead..d8b3162 100644
--- a/src/components/LogoSpin.js
+++ b/src/components/Logo.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
-import logo from '../logo.svg';
-import './LogoSpin.css';
+import logoSVG from '../logo.svg';
+import './Logo.css';
 
-class LogoSpin extends Component {
+class Logo extends Component {
   constructor(props) {
     super(props);
     this.defaultClassName = 'App-logo-rotation';
@@ -12,7 +12,7 @@ class LogoSpin extends Component {
     return (
       <img
         className={`App-logo ${this.props.isStarted ? this.defaultClassName: ''}`}
-        src={logo}
+        src={logoSVG}
         alt="Tomato"
         title="Click on the tomato to change modes"
         onClick={this.props.switchMode}
@@ -22,4 +22,4 @@ class LogoSpin extends Component {
 
 }
 
-export default LogoSpin;
\ No newline at end of file
+export default Logo;
\ No newline at end of file
diff --git a/src/components/Timer.css b/src/components/Timer.css
index 06bef27..727b9e3 100644
--- a/src/components/Timer.css
+++ b/src/components/Timer.css
@@ -1,24 +1,6 @@
 .timer {
-    font-size: 120px; 
-    font-weight: 600;
-    text-shadow: 0 0 1px #ce2e2e, 0 0 8px rgb(193, 194, 190);
+    font-size: 100px; 
+    font-weight: normal;
+    text-shadow: 0 0 1px #4b4b4b, 0 0 5px rgb(193, 194, 190);
     color: white;
-}
-
-.buttons {
-    font-size: 20px;
-    font-weight: bold;
-    height: 60px;
-    border-radius: 25px;
-    box-shadow:  0 0 1px #161616, 0 0 10px rgb(133, 133, 133);
-}
-
-
-.button-box {
-    background-color: rgba(255, 255, 255, 1.0);
-    padding: 20px;
-    margin-top: 5px;
-    border-radius: 25px;
-    box-shadow:0 0 1px #111010, 0 0 10px rgb(193, 194, 190);
-}
-
+}
\ No newline at end of file
diff --git a/src/components/Timer.js b/src/components/Timer.js
index b0e1c5e..78534ea 100644
--- a/src/components/Timer.js
+++ b/src/components/Timer.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import { Container, Row, Col } from 'reactstrap';
 import Notification from './Notification';
-import ButtonBox from './ButtonBox';
-import LogoSpin from './LogoSpin';
+import Box from './Box';
+import Logo from './Logo';
 import './Timer.css';
 
 class Timer extends Component {
@@ -119,13 +119,12 @@ class Timer extends Component {
         <Container>
           <Row>
             <Col>
-              <LogoSpin
+              <Logo
                 isStarted={this.state.started}
                 switchMode={this.switchMode}
               />
             </Col>
           </Row>
-
           <Row>
             <Col>
               <p
@@ -135,10 +134,9 @@ class Timer extends Component {
               </p>
             </Col>
           </Row>
-
           <Row>
-            <Col>
-              <ButtonBox
+            <Col md={{ size: 6, offset: 3 }}>
+              <Box
                 startTimer={this.startTimer}
                 stopTimer={this.stopTimer}
                 isStarted={this.state.started}