From 89d8e6410ff376512e5d4960ddb96761afe8806e Mon Sep 17 00:00:00 2001
From: Mike Wheaton <mike@wheaton.design>
Date: Sat, 8 Jun 2019 09:20:47 -0700
Subject: [PATCH] Add mute icon and improve overall styling

---
 package-lock.json |  8 ++++++++
 package.json      |  1 +
 src/App.css       | 23 +++++++++++++++++++++++
 src/App.js        | 11 +++++++++--
 src/Timer.css     | 12 ++++++++++++
 src/Timer.js      | 31 ++++++++++++++-----------------
 src/index.css     | 14 ++++----------
 src/index.js      | 12 ++++++------
 8 files changed, 77 insertions(+), 35 deletions(-)
 create mode 100644 src/App.css
 create mode 100644 src/Timer.css

diff --git a/package-lock.json b/package-lock.json
index 03abbd4..b192953 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10094,6 +10094,14 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-5.1.6.tgz",
       "integrity": "sha512-X1Y+0jR47ImDVr54Ab6V9eGk0Hnu7fVWGeHQSOXHf/C2pF9c6uy3gef8QUeuUiWlNb0i08InPSE5a/KJzNzw1Q=="
     },
+    "react-icons": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-3.7.0.tgz",
+      "integrity": "sha512-7MyPwjIhuyW0D2N3s4DEd0hGPGFf0sK+IIRKhc1FvSpZNVmnUoGvHbmAwzGJU+3my+fvihVWgwU5SDtlAri56Q==",
+      "requires": {
+        "camelcase": "^5.0.0"
+      }
+    },
     "react-is": {
       "version": "16.8.6",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
diff --git a/package.json b/package.json
index 44898a2..42af0be 100644
--- a/package.json
+++ b/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": {
diff --git a/src/App.css b/src/App.css
new file mode 100644
index 0000000..a3b9bce
--- /dev/null
+++ b/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;
+}
diff --git a/src/App.js b/src/App.js
index 74efaa4..8ed6299 100644
--- a/src/App.js
+++ b/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>
     );
   }
diff --git a/src/Timer.css b/src/Timer.css
new file mode 100644
index 0000000..e1b7a11
--- /dev/null
+++ b/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;
+}
diff --git a/src/Timer.js b/src/Timer.js
index 77a302e..5a821bb 100644
--- a/src/Timer.js
+++ b/src/Timer.js
@@ -1,5 +1,6 @@
 import React from "react";
 import Countdown from "react-countdown-now";
+import "./Timer.css";
 
 const Timer = ({ onComplete }) => {
   // Get the current time and minutes.
@@ -7,7 +8,7 @@ const Timer = ({ onComplete }) => {
   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>
   );
 };
 
diff --git a/src/index.css b/src/index.css
index 4a1df4d..e90ae26 100644
--- a/src/index.css
+++ b/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;
 }
diff --git a/src/index.js b/src/index.js
index 87d1be5..0e76424 100644
--- a/src/index.js
+++ b/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.