Add mute icon and improve overall styling

package.json

@@ -7,6 +7,7 @@
     "react": "^16.8.6",
     "react-countdown-now": "^2.1.0",
     "react-dom": "^16.8.6",
+    "react-icons": "^3.7.0",
     "react-scripts": "3.0.1"
   },
   "scripts": {

src/App.css

@@ -0,0 +1,23 @@
+@import url("https://fonts.googleapis.com/css?family=Space+Mono&display=swap");
+
+.App-toggleMuteButton {
+  background: none;
+  border: none;
+  color: #bbbbbb;
+  cursor: pointer;
+  display: flex;
+  font-size: calc(1rem + 5vw);
+  padding: 2vw;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: color 0.2s ease-in-out;
+}
+
+.App-toggleMuteButton:hover {
+  opacity: 1;
+}
+
+.App-toggleMuteButton.is-muted {
+  color: #d65a31;
+}

src/App.js

@@ -1,6 +1,8 @@
+import buzz from "buzz";
 import React from "react";
+import { MdVolumeOff, MdVolumeUp } from "react-icons/md";
+import "./App.css";
 import Timer from "./Timer";
-import buzz from "buzz";
 
 class App extends React.Component {
   chime = new buzz.sound(
@@ -22,7 +24,12 @@ class App extends React.Component {
     return (
       <div className="App">
         <Timer onComplete={this.handleComplete} key={count} />
-        <button onClick={this.toggleMute}>{isMuted ? "Unmute" : "Mute"}</button>
+        <button
+          className={`App-toggleMuteButton ${isMuted && "is-muted"}`}
+          onClick={this.toggleMute}
+        >
+          {isMuted ? <MdVolumeOff /> : <MdVolumeUp />}
+        </button>
       </div>
     );
   }

src/Timer.css

@@ -0,0 +1,12 @@
+.Timer {
+  align-items: center;
+  display: flex;
+  height: 100vh;
+  justify-content: center;
+}
+
+.Timer-clock {
+  color: #eeeeee;
+  font-family: "Space Mono", monospace;
+  font-size: 28vw;
+}

src/Timer.js

@@ -1,13 +1,14 @@
 import React from "react";
 import Countdown from "react-countdown-now";
+import "./Timer.css";
 
 const Timer = ({ onComplete }) => {
   // Get the current time and minutes.
   const currentTime = new Date();
   const minute = currentTime.getMinutes();
 
   // Determine which minute we're counting down to.
-  var stops = [25, 30, 55, 60];
+  const stops = [25, 30, 55, 60];
   let nextStop;
   for (let stop of stops) {
     if (minute < stop) {
@@ -22,22 +23,18 @@ const Timer = ({ onComplete }) => {
   countdownTime.setSeconds(0);
 
   return (
-    <Countdown
-      date={countdownTime}
-      onComplete={onComplete}
-      intervalDelay={500}
-      renderer={({ minutes, seconds, milliseconds }) => (
-        <div
-          style={{
-            fontSize: 200,
-            fontFamily: "Space Mono, monospace",
-            textAlign: "center"
-          }}
-        >
-          {minutes}:{("0" + seconds).slice(-2)}
-        </div>
-      )}
-    />
+    <div className="Timer">
+      <Countdown
+        date={countdownTime}
+        onComplete={onComplete}
+        intervalDelay={500}
+        renderer={({ minutes, seconds, milliseconds }) => (
+          <div className="Timer-clock">
+            {minutes}:{("0" + seconds).slice(-2)}
+          </div>
+        )}
+      />
+    </div>
   );
 };
 

src/index.css

@@ -1,13 +1,7 @@
 body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+  -webkit-font-smoothing: antialiased;
+  background-color: #222831;
+  margin: 0;
+  padding: 0;
 }

src/index.js

@@ -1,10 +1,10 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+import "./index.css";
+import * as serviceWorker from "./serviceWorker";
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById("root"));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.