feat: add bg color to highlight state

package.json

@@ -10,6 +10,7 @@
     "serve": "vite preview"
   },
   "dependencies": {
+    "classnames": "^2.3.1",
     "geolib": "^3.3.3",
     "rc-time-picker": "^3.7.3",
     "react": "^17.0.0",

src/App.css

@@ -2,6 +2,14 @@
   text-align: center;
 }
 
+.App.alarm-set {
+    background-color: green;
+}
+
+.App.alarm-playing {
+  background-color: red;
+}
+
 .App-logo {
   height: 40vmin;
   pointer-events: none;
@@ -14,7 +22,6 @@
 }
 
 .App-header {
-  background-color: #282c34;
   min-height: 100vh;
   display: flex;
   flex-direction: column;

src/App.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useState, useRef, useEffect } from "react";
 import { usePosition } from "use-position";
 import { getDistance } from "geolib";
+import cx from "classnames";
 import TimePicker from "rc-time-picker";
 import moment from "moment";
 
@@ -13,6 +14,7 @@ import blankMp3 from "./blank.mp3";
 function App() {
   const [alarm, setAlarm] = useState<moment.Moment | null>(null);
   const [alarmSet, setAlarmSet] = useState(false);
+  const [alarmPlaying, setAlarmPlaying] = useState(false);
   const [stopDistance, setStopDistance] = useState(10);
   const audioRef = useRef<HTMLAudioElement>(null);
 
@@ -42,12 +44,14 @@ function App() {
   useEffect(() => {
     if (alarmSet && distance > stopDistance) {
       setAlarmSet(false);
+      alarmPlaying(false);
       setAlarm(null);
     }
   }, [distance, alarmSet]);
 
   const showAlarm = () => {
     console.log("ALARM! Wake up!");
+    setAlarmPlaying(true);
     audioRef.current?.play();
 
     if (!("Notification" in window)) {
@@ -79,7 +83,12 @@ function App() {
   }, [alarm]);
 
   return (
-    <div className="App">
+    <div
+      className={cx("App", {
+        "alarm-playing": alarmPlaying,
+        "alarm-set": alarmSet,
+      })}
+    >
       <div className="App-header">
         <TimePicker
           defaultValue={moment().add(1, "hour")}

yarn.lock

@@ -1737,6 +1737,11 @@ classnames@2.x, classnames@^2.2.6:
   resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz"
   integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
 
+classnames@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
+  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
+
 cli-boxes@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-2.2.1.tgz#ddd5035d25094fce220e9cab40a45840a440318f"