refactor: fixes and styles

package.json

@@ -12,6 +12,7 @@
     "test": "tsc"
   },
   "dependencies": {
+    "@fontsource/fira-code": "^4.5.2",
     "classnames": "^2.3.1",
     "date-fns": "^2.27.0",
     "geolib": "^3.3.3",

src/App.css

@@ -37,15 +37,42 @@
 }
 
 .App.alarm-set p {
-    font-size: 30vw;
-    font-weight: bold;
     color: coral;
-    opacity: 0.2;
     margin: 0;
 }
-.App.alarm-set p:hover {
+
+.clock {
+    font-size: 27vw;
+    font-weight: bold;
+    display: block;
+    opacity: 0.2;
+    font-weight: 700;
+    font-family: 'Fira Code', monospace;
+    letter-spacing: -4px;
+}
+.clock:hover {
     opacity: 0.4;
 }
+.App.alarm-playing .clock {
+    opacity: 1;
+    animation: blink 0.6s linear infinite;
+}
+
+@keyframes blink {
+    0% {
+       opacity: 1;
+    }
+    100% {
+        opacity: 0.4;
+    }
+}
+
+small {
+    display: inline-block;
+    font-family: 'Fira Code';
+    margin-bottom: 2rem;
+    opacity: 0.3;
+}
 
 .App-logo {
   height: 40vmin;
@@ -103,3 +130,15 @@ h1 {
 .time-picker input:focus {
     outline: 1px solid currentColor;
 }
+
+.pa-4 {
+    padding: 1.5rem
+}
+
+.ma-4 {
+    margin: 1.5rem;
+}
+
+.ml-2 {
+    margin-left: 0.5rem;
+}

src/App.tsx

@@ -4,7 +4,7 @@ import { getDistance } from "geolib";
 import { format, parse, differenceInMilliseconds, isMatch } from "date-fns";
 import useStayAwake from "use-stay-awake";
 
-import { TextField, Button } from "ui-neumorphism";
+import { TextField, Button, Dialog, Card } from "ui-neumorphism";
 import { overrideThemeVariables } from "ui-neumorphism";
 
 import "ui-neumorphism/dist/index.css";
@@ -60,6 +60,10 @@ function App() {
   useEffect(() => {
     if (alarmSet && distance > stopDistance) {
       resetAlarm();
+    } else {
+      setHasWalked(false);
+      setAlarmPlaying(true);
+      audioRef.current?.play();
     }
   }, [distance, alarmSet]);
 
@@ -68,6 +72,7 @@ function App() {
     setAlarmSet(false);
     setAlarmPlaying(false);
     setAlarm(null);
+    audioRef.current?.pause();
     if (device.canSleep) {
       device.allowSleeping();
     }
@@ -118,11 +123,26 @@ function App() {
       ? "alarm-set"
       : "";
 
+  const [clock, setClock] = useState<string>(format(new Date(), "HH:mm"));
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (!clock.includes(":") || alarmPlaying)
+        setClock(format(new Date(), "HH:mm"));
+      else setClock(format(new Date(), "HH mm"));
+    }, 1000);
+    return () => clearInterval(interval);
+  });
+
+  const [showResetModal, setResetModal] = useState(false);
+
   return (
     <div className={`App theme--dark ${appState}`}>
       <div className="App-header">
         {alarmSet && alarm ? (
-          <p>{format(alarm, "HH:mm")}</p>
+          <p>
+            <span className="clock">{clock}</span>
+            <small>Alarm: {format(alarm, "HH:mm")}</small>
+          </p>
         ) : (
           <>
             <h1>Alarm clock</h1>
@@ -183,15 +203,43 @@ function App() {
             </Button>
           )}
           {alarmSet && (
+            <Button dark text onClick={() => setResetModal(true)}>
+              Reset
+            </Button>
+          )}
+          <Dialog
+            dark
+            minWidth={300}
+            visible={showResetModal}
+            onClose={() => setResetModal(false)}
+          >
+            <Card className="pa-4 ma-4">
+              Are you sure? <br /> <br />
+              <Button
+                dark
+                color="var(--primary)"
+                rounded
+                onClick={() => setResetModal(false)}
+              >
+                close
+              </Button>
               <Button
                 dark
                 rounded
                 onClick={() => {
                   resetAlarm();
+                  setResetModal(false);
                 }}
+                className="ml-2"
               >
-              Reset
+                reset
               </Button>
+            </Card>
+          </Dialog>
+          {alarmPlaying && distance && (
+            <p className="distance">
+              Distance: {distance.toFixed(2)} / {stopDistance} meters
+            </p>
           )}
         </div>
         <audio src={alarmSet ? alarmMp3 : blankMp3} ref={audioRef} />

src/index.css

@@ -8,6 +8,6 @@ body {
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: 'Fira Code', source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }

src/main.tsx

@@ -1,11 +1,12 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import './index.css'
-import App from './App'
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import "@fontsource/fira-code/700.css";
+import App from "./App";
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
-)
+  document.getElementById("root")
+);

yarn.lock

@@ -1104,6 +1104,11 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@fontsource/fira-code@^4.5.2":
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/@fontsource/fira-code/-/fira-code-4.5.2.tgz#532ef612aa15b40970e696b3546348ed49512a86"
+  integrity sha512-wNUvcqmm1dZYTbJlkbFZL9Huu7p+Hwaa4CLNTPql3CG90Rh9dSi43wNg5AnVHxjAhWQOGlCpSrEswnnHu1CkxA==
+
 "@humanwhocodes/config-array@^0.9.2":
   version "0.9.2"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.9.2.tgz#68be55c737023009dfc5fe245d51181bb6476914"