Update style components

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);
+}

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;
+    export default Box;

src/components/ButtonBox.css

@@ -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;
-}

src/components/Logo.css

@@ -1,17 +1,18 @@
 .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 {
       transform: rotate(0deg);

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;
+export default Logo;

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);
-}
-

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}