LogoSpin Component implements

src/components/LogoSpin.css

@@ -0,0 +1,23 @@
+.App-logo {
+    height: 25vmin;
+    pointer-events: none;
+    filter: drop-shadow(0 0 0.50rem #f8ff9c);
+    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);
+    }
+  }

src/components/LogoSpin.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import logo from '../logo.svg';
+import './LogoSpin.css';
+
+class LogoSpin extends Component {
+  constructor(props) {
+    super(props);
+    this.defaultClassName = 'App-logo-rotation';
+    }
+
+  render() {
+    return (
+      <img
+        className={`App-logo ${this.props.isStarted ? this.defaultClassName: ''}`}
+        src={logo}
+        alt="Tomato"
+      ></img>
+    )
+  }
+
+}
+
+export default LogoSpin;

src/components/Timer.js

@@ -2,20 +2,17 @@ import React, { Component } from 'react';
 import { Container, Row, Col } from 'reactstrap';
 import Notification from 'react-web-notification';
 import ButtonBox from './ButtonBox';
+import LogoSpin from './LogoSpin';
 import './Timer.css';
-import logo from '../logo.svg';
 import sound from '../sound.mp3';
 
 
 class Timer extends Component {
   constructor(props) {
     super(props);
-    this.seconds = 1500;
-    this.logoSpingCSS = 'App-logo-rotation';
     this.state = {
-      seconds: this.seconds,
+      seconds: 1500,
       started: false,
-      logoSpin: '',
       ignore: true,
       title: ''
     };
@@ -103,27 +100,21 @@ class Timer extends Component {
 
   startTimer() {
     this.setState({
-      started: true,
+      started: true
-      logoSpin: this.logoSpingCSS
     });
     this.interval = setInterval(() => this.tick(), 1000);
   }
 
   stopTimer() {
     this.setState({
-      started: false,
+      started: false
-      logoSpin: null
     });
     clearInterval(this.interval);
   }
 
   resetTimer() {
     this.stopTimer();
-    this.setState({ seconds: this.seconds});
+    this.setState({ seconds: 1500 });
-  }
-
-  isStarted() {
-    return this.state.started;
   }
 
   render() {
@@ -132,11 +123,9 @@ class Timer extends Component {
         <Container>
           <Row>
             <Col>
-              <img 
+              <LogoSpin
-                className={`App-logo ${this.state.logoSpin}`} 
+                isStarted={this.state.started}
-                src={logo}
+              />
-                alt="Tomato"
-              ></img>
             </Col>
           </Row>