feat: add styling and layout

package.json

@@ -13,11 +13,13 @@
   },
   "dependencies": {
     "classnames": "^2.3.1",
+    "date-fns": "^2.27.0",
     "geolib": "^3.3.3",
-    "rc-time-picker": "^3.7.3",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
-    "use-position": "^1.0.0"
+    "ui-neumorphism": "^1.1.3",
+    "use-position": "^1.0.0",
+    "use-stay-awake": "^0.1.7"
   },
   "devDependencies": {
     "@commitlint/cli": "^15.0.0",

src/App.css

@@ -1,14 +1,50 @@
 .App {
   text-align: center;
-  background-color: #282c34;
+  background: var(--bg-color);
 }
 
-.App.alarm-set {
+.theme--dark {
-    background-color: green;
+    --code-bg: #272822;
+    --bg-color: var(--dark-bg);
+    --text-shadow: var(--dark-bg-dark-shadow);
+    --menu-text-color: var(--g-text-color-dark);
+    --menu-text-hover-color: var(--primary-light);
+    --text-secondary: var(--g-text-color-disabled-dark);
+    --box-shadow-inset-small: inset -1px -1px 1px var(--dark-bg-light-shadow), inset 1px 1px 1px var(--dark-bg-dark-shadow);
+}
+
+.App.has-walked {
+    background-color: teal;
 }
 
 .App.alarm-playing {
-  background-color: red;
+  background-color: coral;
+}
+.App.alarm-playing p {
+  color: white;
+}
+
+.App.alarm-set {
+    background: #000;
+}
+
+.App.alarm-set button {
+    opacity: 0.1;
+}
+.App.alarm-set button:hover,
+.App.alarm-set button:focus {
+    opacity: 0.6;
+}
+
+.App.alarm-set p {
+    font-size: 30vw;
+    font-weight: bold;
+    color: coral;
+    opacity: 0.2;
+    margin: 0;
+}
+.App.alarm-set p:hover {
+    opacity: 0.4;
 }
 
 .App-logo {
@@ -16,12 +52,6 @@
   pointer-events: none;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
 .App-header {
   min-height: 100vh;
   display: flex;
@@ -32,19 +62,44 @@
   color: white;
 }
 
-.App-link {
+code {
-  color: #61dafb;
+    display: none;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
 }
 
 button {
   font-size: calc(10px + 2vmin);
 }
+
+.input-wrapper {
+    margin-top: 2rem;
+}
+
+.time-picker,
+.stop-distance {
+    align-items: center;
+}
+
+h1 {
+    margin-top: 0;
+    margin-bottom: 2rem;
+    font-size: 3rem;
+}
+
+.time-picker div,
+.stop-distance div {
+    width: 100%;
+}
+
+.time-picker input,
+.stop-distance input {
+    font-size: 2rem;
+    width: 10rem;
+    margin: 1rem 0;
+    text-align: center;
+    padding: 1.5rem;
+}
+
+.stop-distance input:focus,
+.time-picker input:focus {
+    outline: 1px solid currentColor;
+}

src/App.tsx

@@ -1,23 +1,39 @@
 import { useCallback, useState, useRef, useEffect } from "react";
 import { usePosition } from "use-position";
 import { getDistance } from "geolib";
-import cx from "classnames";
+import { format, parse, differenceInMilliseconds, isMatch } from "date-fns";
-import TimePicker from "rc-time-picker";
+import useStayAwake from "use-stay-awake";
-import moment from "moment";
 
+import { TextField, Button } from "ui-neumorphism";
+import { overrideThemeVariables } from "ui-neumorphism";
+
+import "ui-neumorphism/dist/index.css";
 import "./App.css";
-import "rc-time-picker/assets/index.css";
 
 import alarmMp3 from "./alarm.mp3";
 import blankMp3 from "./blank.mp3";
 
 function App() {
-  const [alarm, setAlarm] = useState<moment.Moment | null>(null);
+  const [alarm, setAlarm] = useState<Date | null>(null);
   const [alarmSet, setAlarmSet] = useState(false);
   const [alarmPlaying, setAlarmPlaying] = useState(false);
+  const [hasWalked, setHasWalked] = useState(false);
   const [stopDistance, setStopDistance] = useState(10);
   const audioRef = useRef<HTMLAudioElement>(null);
 
+  useEffect(() => {
+    overrideThemeVariables({
+      "--dark-bg": "#3E3D42",
+      "--dark-bg-dark-shadow": "#323135",
+      "--dark-bg-light-shadow": "#4a494f",
+      "--primary": "#2979ff",
+      "--primary-dark": "#2962ff",
+      "--primary-light": "#82b1ff",
+    });
+  }, []);
+
+  const device = useStayAwake();
+
   const { latitude, longitude, timestamp, accuracy } = usePosition(true, {
     enableHighAccuracy: true,
     timeout: Infinity,
@@ -43,12 +59,20 @@ function App() {
 
   useEffect(() => {
     if (alarmSet && distance > stopDistance) {
-      setAlarmSet(false);
+      resetAlarm();
-      setAlarmPlaying(false);
-      setAlarm(null);
     }
   }, [distance, alarmSet]);
 
+  const resetAlarm = () => {
+    setHasWalked(true);
+    setAlarmSet(false);
+    setAlarmPlaying(false);
+    setAlarm(null);
+    if (device.canSleep) {
+      device.allowSleeping();
+    }
+  };
+
   const showAlarm = () => {
     console.log("ALARM! Wake up!");
     setAlarmPlaying(true);
@@ -73,8 +97,11 @@ function App() {
       audioRef.current?.play().then(() => {
         setAlarmSet(true);
         if (latitude && longitude) setStartCoords({ latitude, longitude });
-        const delay = alarm.diff(moment());
+        const delay = differenceInMilliseconds(alarm, new Date());
         console.log("set alarm", delay);
+        if (device.canSleep) {
+          device.preventSleeping();
+        }
         setTimeout(() => {
           showAlarm();
         }, delay);
@@ -82,43 +109,91 @@ function App() {
     }
   }, [alarm]);
 
+  const appState =
+    hasWalked && alarmPlaying
+      ? "has-walked"
+      : alarmPlaying
+      ? "alarm-playing"
+      : alarmSet
+      ? "alarm-set"
+      : "";
+
   return (
-    <div
+    <div className={`App theme--dark ${appState}`}>
-      className={cx("App", {
-        "alarm-playing": alarmPlaying,
-        "alarm-set": alarmSet,
-      })}
-    >
       <div className="App-header">
-        <TimePicker
+        {alarmSet && alarm ? (
-          defaultValue={moment().add(1, "hour")}
+          <p>{format(alarm, "HH:mm")}</p>
-          value={alarm ?? undefined}
+        ) : (
-          onChange={(newTime) => setAlarm(newTime)}
+          <>
-          showSecond={false}
+            <h1>Alarm clock</h1>
-        />
+            <div className="input-wrapper">
-        <input
+              <label htmlFor="alarm-time">Set time for the alarm</label>
-          type="number"
+              {/* <TimeField
-          placeholder="distance"
+                input={
-          min={1}
+                  <TextField
-          value={stopDistance}
+                    dark
-          onChange={(e) => setStopDistance(parseInt(e.target.value, 10))}
+                    rounded
-        />
+                    id="alarm-time"
-        <p>
+                    className="time-picker"
-          <button type="button" onClick={registerAlarm}>
+                    placeholder="08:00"
-            Set alarm
+                    uncontrolled
-          </button>
+                  />
+                }
+                value={alarm ? format(alarm, "HH:mm") : undefined}
+                onChange={(e) => {
+                  setAlarm(parse(e.target.value, "HH:mm", new Date()));
+                }}
+              /> */}
+              <TextField
+                dark
+                rounded
+                id="alarm-time"
+                className="time-picker"
+                placeholder="08:00"
+                value={alarm ? format(alarm, "HH:mm") : undefined}
+                onChange={({ value }: { value: string }) => {
+                  console.log(value);
+                  if (isMatch(value, "HH:mm") || isMatch(value, "H:mm")) {
+                    setAlarm(parse(value, "HH:mm", new Date()));
+                  }
+                }}
+              />
+            </div>
+            <div className="input-wrapper">
+              <label htmlFor="stop-distance">Stop alarm after (meters):</label>
+              <TextField
+                dark
+                rounded
+                className="stop-distance"
+                type="number"
+                id="stop-distance"
+                placeholder="distance"
+                value={stopDistance?.toString() ?? "1"}
+                onChange={(e: { target: { value: string } }) =>
+                  setStopDistance(parseInt(e.target.value, 10))
+                }
+              />
+            </div>
+          </>
+        )}
+        <div>
+          {!alarmSet && (
+            <Button dark rounded onClick={registerAlarm} disabled={!alarm}>
+              Set alarm
+            </Button>
+          )}
           {alarmSet && (
-            <button
+            <Button
-              type="button"
+              dark
+              rounded
               onClick={() => {
-                setAlarm(null);
+                resetAlarm();
-                setAlarmSet(false);
               }}
             >
               Reset
-            </button>
+            </Button>
           )}
-        </p>
+        </div>
         <audio src={alarmSet ? alarmMp3 : blankMp3} ref={audioRef} />
         {startCoords && (
           <code>

tsconfig.json

@@ -4,7 +4,7 @@
     "useDefineForClassFields": true,
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "allowJs": false,
-    "skipLibCheck": false,
+    "skipLibCheck": true,
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
     "strict": true,

yarn.lock

@@ -893,7 +893,7 @@
     core-js-pure "^3.19.0"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.16.3":
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.16.3", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
   version "7.16.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.5.tgz#7f3e34bf8bdbbadf03fbb7b1ea0d929569c9487a"
   integrity sha512-TXWihFIS3Pyv5hzR7j6ihmeLkZfrXGxAr5UfSl8CHf+6q/wpiYDkUau0czckpYG8QmnCIuPpdLtuA9VmuGGyMA==
@@ -1548,13 +1548,6 @@ acorn@^8.6.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.6.0.tgz#e3692ba0eb1a0c83eaa4f37f5fa7368dd7142895"
   integrity sha512-U1riIR+lBSNi3IbxtaHOIKdH8sLFv3NYfNv8sg7ZsNhcfl4HF2++BfqqrNAxoCLQW1iiylOj76ecnaUxz+z9yw==
 
-add-dom-event-listener@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.npmjs.org/add-dom-event-listener/-/add-dom-event-listener-1.1.0.tgz"
-  integrity sha512-WCxx1ixHT0GQU9hb0KI/mhgRQhnU+U3GvwY6ZvVjYq8rsihIGoaIOUbY0yMPBxLH5MDtr0kz3fisWGNcbWW7Jw==
-  dependencies:
-    object-assign "4.x"
-
 add-stream@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/add-stream/-/add-stream-1.0.0.tgz#6a7990437ca736d5e1288db92bd3266d5f5cb2aa"
@@ -1748,14 +1741,6 @@ babel-plugin-polyfill-regenerator@^0.3.0:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.3.0"
 
-babel-runtime@6.x, babel-runtime@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz"
-  integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
-  dependencies:
-    core-js "^2.4.0"
-    regenerator-runtime "^0.11.0"
-
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
@@ -1938,7 +1923,7 @@ ci-info@^3.2.0:
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.3.0.tgz#b4ed1fb6818dea4803a55c623041f9165d2066b2"
   integrity sha512-riT/3vI5YpVH6/qomlDnJow6TBee2PBKSEpx3O32EGPYbWGIRsIlGRms3Sm74wYE1JMo8RnO04Hb12+v1J5ICw==
 
-classnames@2.x, classnames@^2.2.6, classnames@^2.3.1:
+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==
@@ -2035,18 +2020,6 @@ compare-func@^2.0.0:
     array-ify "^1.0.0"
     dot-prop "^5.1.0"
 
-component-classes@^1.2.5:
-  version "1.2.6"
-  resolved "https://registry.npmjs.org/component-classes/-/component-classes-1.2.6.tgz"
-  integrity sha1-xkI5TDYYpNiwuJGe/Mu9kw5c1pE=
-  dependencies:
-    component-indexof "0.0.3"
-
-component-indexof@0.0.3:
-  version "0.0.3"
-  resolved "https://registry.npmjs.org/component-indexof/-/component-indexof-0.0.3.tgz"
-  integrity sha1-EdCRMSI5648yyPJa6csAL/6NPCQ=
-
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
@@ -2252,11 +2225,6 @@ core-js-pure@^3.19.0:
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.19.3.tgz#c69b2b36b58927317824994b532ec3f0f7e49607"
   integrity sha512-N3JruInmCyt7EJj5mAq3csCgGYgiSqu7p7TQp2KOztr180/OAIxyIvL1FCjzgmQk/t3Yniua50Fsak7FShI9lA==
 
-core-js@^2.4.0:
-  version "2.6.12"
-  resolved "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz"
-  integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
-
 core-util-is@~1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
@@ -2292,14 +2260,6 @@ crypto-random-string@^2.0.0:
   resolved "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz"
   integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
 
-css-animation@^1.3.2:
-  version "1.6.1"
-  resolved "https://registry.npmjs.org/css-animation/-/css-animation-1.6.1.tgz"
-  integrity sha512-/48+/BaEaHRY6kNQ2OIPzKf9A6g8WjZYjhiNDNuIVbsm5tXCGIAsHDjB4Xu1C4vXJtUWZo26O68OQkDpNBaPog==
-  dependencies:
-    babel-runtime "6.x"
-    component-classes "^1.2.5"
-
 csstype@^3.0.2:
   version "3.0.10"
   resolved "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz"
@@ -2315,6 +2275,11 @@ dargs@^7.0.0:
   resolved "https://registry.yarnpkg.com/dargs/-/dargs-7.0.0.tgz#04015c41de0bcb69ec84050f3d9be0caf8d6d5cc"
   integrity sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==
 
+date-fns@^2.27.0:
+  version "2.27.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.27.0.tgz#e1ff3c3ddbbab8a2eaadbb6106be2929a5a2d92b"
+  integrity sha512-sj+J0Mo2p2X1e306MHq282WS4/A8Pz/95GIFcsPNMPMZVI3EUrAdSv90al1k+p74WGLCruMXk23bfEDZa71X9Q==
+
 dateformat@^3.0.0:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
@@ -2463,10 +2428,13 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
-dom-align@^1.7.0:
+dom-helpers@^5.0.1:
-  version "1.12.2"
+  version "5.2.1"
-  resolved "https://registry.npmjs.org/dom-align/-/dom-align-1.12.2.tgz"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
-  integrity sha512-pHuazgqrsTFrGU2WLDdXxCFabkdQDx72ddkraZNih1KsMcN5qsRSTR9O4VJRlwTPCPb5COYg3LOfiMHHcPInHg==
+  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
 
 dot-prop@^5.1.0, dot-prop@^5.2.0:
   version "5.3.0"
@@ -4160,11 +4128,6 @@ modify-values@^1.0.0:
   resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
   integrity sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==
 
-moment@2.x:
-  version "2.29.1"
-  resolved "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz"
-  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
-
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -4256,7 +4219,7 @@ npm-run-path@^4.0.0, npm-run-path@^4.0.1:
   dependencies:
     path-key "^3.0.0"
 
-object-assign@4.x, object-assign@^4.1.1:
+object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz"
   integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
@@ -4532,11 +4495,6 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
-performance-now@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz"
-  integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
-
 picocolors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz"
@@ -4606,7 +4564,7 @@ progress@^2.0.0:
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
-prop-types@15.x, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.7.2:
+prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -4677,13 +4635,6 @@ quick-lru@^5.1.1:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
   integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
 
-raf@^3.4.0, raf@^3.4.1:
-  version "3.4.1"
-  resolved "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz"
-  integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
-  dependencies:
-    performance-now "^2.1.0"
-
 randombytes@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz"
@@ -4691,65 +4642,6 @@ randombytes@^2.1.0:
   dependencies:
     safe-buffer "^5.1.0"
 
-rc-align@^2.4.0:
-  version "2.4.5"
-  resolved "https://registry.npmjs.org/rc-align/-/rc-align-2.4.5.tgz"
-  integrity sha512-nv9wYUYdfyfK+qskThf4BQUSIadeI/dCsfaMZfNEoxm9HwOIioQ+LyqmMK6jWHAZQgOzMLaqawhuBXlF63vgjw==
-  dependencies:
-    babel-runtime "^6.26.0"
-    dom-align "^1.7.0"
-    prop-types "^15.5.8"
-    rc-util "^4.0.4"
-
-rc-animate@2.x:
-  version "2.11.1"
-  resolved "https://registry.npmjs.org/rc-animate/-/rc-animate-2.11.1.tgz"
-  integrity sha512-1NyuCGFJG/0Y+9RKh5y/i/AalUCA51opyyS/jO2seELpgymZm2u9QV3xwODwEuzkmeQ1BDPxMLmYLcTJedPlkQ==
-  dependencies:
-    babel-runtime "6.x"
-    classnames "^2.2.6"
-    css-animation "^1.3.2"
-    prop-types "15.x"
-    raf "^3.4.0"
-    rc-util "^4.15.3"
-    react-lifecycles-compat "^3.0.4"
-
-rc-time-picker@^3.7.3:
-  version "3.7.3"
-  resolved "https://registry.npmjs.org/rc-time-picker/-/rc-time-picker-3.7.3.tgz"
-  integrity sha512-Lv1Mvzp9fRXhXEnRLO4nW6GLNxUkfAZ3RsiIBsWjGjXXvMNjdr4BX/ayElHAFK0DoJqOhm7c5tjmIYpEOwcUXg==
-  dependencies:
-    classnames "2.x"
-    moment "2.x"
-    prop-types "^15.5.8"
-    raf "^3.4.1"
-    rc-trigger "^2.2.0"
-    react-lifecycles-compat "^3.0.4"
-
-rc-trigger@^2.2.0:
-  version "2.6.5"
-  resolved "https://registry.npmjs.org/rc-trigger/-/rc-trigger-2.6.5.tgz"
-  integrity sha512-m6Cts9hLeZWsTvWnuMm7oElhf+03GOjOLfTuU0QmdB9ZrW7jR2IpI5rpNM7i9MvAAlMAmTx5Zr7g3uu/aMvZAw==
-  dependencies:
-    babel-runtime "6.x"
-    classnames "^2.2.6"
-    prop-types "15.x"
-    rc-align "^2.4.0"
-    rc-animate "2.x"
-    rc-util "^4.4.0"
-    react-lifecycles-compat "^3.0.4"
-
-rc-util@^4.0.4, rc-util@^4.15.3, rc-util@^4.4.0:
-  version "4.21.1"
-  resolved "https://registry.npmjs.org/rc-util/-/rc-util-4.21.1.tgz"
-  integrity sha512-Z+vlkSQVc1l8O2UjR3WQ+XdWlhj5q9BMQNLk2iOBch75CqPfrJyGtcWMcnhRlNuDu0Ndtt4kLVO8JI8BrABobg==
-  dependencies:
-    add-dom-event-listener "^1.1.0"
-    prop-types "^15.5.10"
-    react-is "^16.12.0"
-    react-lifecycles-compat "^3.0.4"
-    shallowequal "^1.1.0"
-
 rc@^1.2.8:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
@@ -4769,21 +4661,26 @@ react-dom@^17.0.0:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
-react-is@^16.12.0, react-is@^16.8.1:
+react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-lifecycles-compat@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz"
-  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
-
 react-refresh@^0.11.0:
   version "0.11.0"
   resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz"
   integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
 
+react-transition-group@^4.4.1:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
+  integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react@^17.0.0:
   version "17.0.2"
   resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
@@ -4877,11 +4774,6 @@ regenerate@^1.4.2:
   resolved "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz"
   integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
 
-regenerator-runtime@^0.11.0:
-  version "0.11.1"
-  resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz"
-  integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
-
 regenerator-runtime@^0.13.4:
   version "0.13.9"
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz"
@@ -5162,11 +5054,6 @@ serialize-javascript@^4.0.0:
   dependencies:
     randombytes "^2.1.0"
 
-shallowequal@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz"
-  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
-
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
@@ -5641,6 +5528,13 @@ uglify-js@^3.1.4:
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.14.5.tgz#cdabb7d4954231d80cb4a927654c4655e51f4859"
   integrity sha512-qZukoSxOG0urUTvjc2ERMTcAy+BiFh3weWAkeurLwjrCba73poHmG3E36XEjd/JGukMzwTL7uCxZiAexj8ppvQ==
 
+ui-neumorphism@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/ui-neumorphism/-/ui-neumorphism-1.1.3.tgz#3bd54ff4e269d199d4c9245a664884a20308c065"
+  integrity sha512-LAOnLzOq7XA9s+N3khUEeZb8LcUBptUcTXRtdiO3cGLc5hms5k5Q6Xhnl9DV/ILZd1HALUGu4598hf+9gY/d+w==
+  dependencies:
+    react-transition-group "^4.4.1"
+
 unbox-primitive@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz"
@@ -5740,6 +5634,11 @@ use-position@^1.0.0:
   resolved "https://registry.npmjs.org/use-position/-/use-position-1.0.0.tgz"
   integrity sha512-YEN3YwP3rBmtlJeU49C4qPTPPV+FZJ8O+L3VpIFwnaDcYzf1RVp2HWYWsuLytYHm5ga2a3lZjyk4ou5vonxNrQ==
 
+use-stay-awake@^0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/use-stay-awake/-/use-stay-awake-0.1.7.tgz#6d8cb574eefe1c5dcca8db45ac157b57986369a5"
+  integrity sha512-w445fnTM/R2wQaikiizrWtC5MLIgJnpPju47EfFxs8jDvWY8pSdtWSpLqflLM2YNQPbZ8d0cgiO3fkMCbapYfg==
+
 util-deprecate@^1.0.1, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"