Repair changing box sizes during visual signals

Author: jacobkrol

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "myapp",
-  "version": "1.2.0",
+  "name": "LP Timer",
+  "version": "1.2.1",
   "private": true,
   "homepage": "https://kroljs.com/LP-Timer",
   "dependencies": {

src/components/utilities/Footer.js

@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
 function Footer() {
     return (
         <footer>
-            <p>LP Timer PWA v1.2.0 - Copyright 2020 <a href="https://kroljs.com" target="_blank" rel="noopener noreferrer">Jacob Krol</a> - <Link to="/about">Learn More</Link></p>
+            <p>LP Timer PWA v1.2.1 - Copyright 2020 <a href="https://kroljs.com" target="_blank" rel="noopener noreferrer">Jacob Krol</a> - <Link to="/about">Learn More</Link></p>
         </footer>
     )
 }

src/components/utilities/Timer.js

@@ -3,10 +3,7 @@ import {
     FaPlay,
     FaPause,
     FaStop,
-    FaVolumeMute,
-    FaHourglassEnd,
-    FaHourglassHalf,
-    FaHourglassStart
+    FaVolumeMute
 } from 'react-icons/fa';
 import '../../styles/Timer.css';
 import Verbal30 from '../../audio/30-seconds-verbal.wav';

src/styles/Timer.css

@@ -63,6 +63,7 @@
 
 /* ADD TIMER ANIMATION */
 #timer-anim-box {
+    position: absolute;
     margin: 10px;
     height: 20px;
     width: 20px;
@@ -87,9 +88,6 @@
         width: 0%;
     }
 }
-#timer-text {
-    margin-top: -40px;
-}
 
 /* DEFINE FONT FACES */
 #timer-display-min, #timer-display-sec, #timer-display-ms {