feat(settings): bring back react-switch

package.json

@@ -51,7 +51,6 @@
     "@types/react": "17.0.35",
     "@types/react-dom": "17.0.11",
     "@types/react-helmet": "6.1.4",
-    "@types/react-toggle": "4.0.3",
     "@vitejs/plugin-react": "1.0.9",
     "@wkovacs64/prettier-config": "3.0.0",
     "autoprefixer": "10.4.0",
@@ -70,13 +69,12 @@
     "npm-run-all": "4.1.5",
     "postcss": "8.3.11",
     "prettier": "2.4.1",
-    "prop-types": "15.7.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-helmet": "6.1.0",
     "react-icons": "4.3.1",
     "react-router-dom": "6.0.2",
-    "react-toggle": "4.1.2",
+    "react-switch": "6.0.0",
     "semantic-release": "18.0.0",
     "start-server-and-test": "1.14.0",
     "tailwindcss": "2.2.19",

src/pages/settings.tsx

@@ -1,7 +1,6 @@
-import 'react-toggle/style.css';
 import * as React from 'react';
 import { useNavigate } from 'react-router-dom';
-import Toggle from 'react-toggle';
+import ReactSwitch from 'react-switch';
 import {
   appDefaultPartySize,
   appDefaultTipPercent,
@@ -11,6 +10,10 @@ import {
 import NumericInput from '../shared/numeric-input';
 import BrandButton from '../shared/brand-button';
 
+// TODO: remove this Vite-related hack once react-switch is available as ESM
+// @ts-ignore
+const Switch = ReactSwitch.default ? ReactSwitch.default : ReactSwitch;
+
 function SettingsPage() {
   const navigate = useNavigate();
   const [defaultPartySize, setDefaultPartySize] =
@@ -54,11 +57,12 @@ function SettingsPage() {
       <div className="text-3xl md:text-4xl grid gap-y-14 mb-14 w-full">
         <div className="flex items-center justify-between">
           <label htmlFor="dark-mode">Dark mode:</label>
-          <Toggle
+          <Switch
             id="dark-mode"
             aria-checked={isCurrentlyDark}
             checked={isCurrentlyDark}
             onChange={handleThemeToggle}
+            onColor="#8d6c9f"
           />
         </div>
         <div>

yarn.lock

@@ -1820,13 +1820,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-toggle@4.0.3":
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/@types/react-toggle/-/react-toggle-4.0.3.tgz#8db98ac8d2c5e8c03c2d3a42027555c1cd2289da"
-  integrity sha512-57QdMWeeQdRjM2/p+udgYerxUbSkmeUIW18kwUttcci6GHkgxoqCsDZfRtsCsAHcvvM5VBQdtDUEgLWo2e87mA==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react@*":
   version "17.0.34"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.34.tgz#797b66d359b692e3f19991b6b07e4b0c706c0102"
@@ -2678,11 +2671,6 @@ cidr-regex@^3.1.1:
   dependencies:
     ip-regex "^4.1.0"
 
-classnames@^2.2.5:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
-  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
-
 clean-stack@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
@@ -6683,7 +6671,7 @@ promzard@^0.3.0:
   dependencies:
     read "1"
 
-prop-types@15.7.2, prop-types@^15.7.2:
+prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -6853,12 +6841,12 @@ react-side-effect@^2.1.0:
   resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.1.tgz#66c5701c3e7560ab4822a4ee2742dee215d72eb3"
   integrity sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==
 
-react-toggle@4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/react-toggle/-/react-toggle-4.1.2.tgz#b00500832f925ad524356d909821821ae39f6c52"
-  integrity sha512-4Ohw31TuYQdhWfA6qlKafeXx3IOH7t4ZHhmRdwsm1fQREwOBGxJT+I22sgHqR/w8JRdk+AeMCJXPImEFSrNXow==
+react-switch@6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/react-switch/-/react-switch-6.0.0.tgz#bd4a2dea08f211b8a32e55e8314fd44bc1ec947e"
+  integrity sha512-QV3/6eRK5/5epdQzIqvDAHRoGLbCv/wDpHUi6yBMXY1Xco5XGuIZxvB49PHoV1v/SpEgOCJLD/Zo43iic+aEIw==
   dependencies:
-    classnames "^2.2.5"
+    prop-types "^15.7.2"
 
 react@17.0.2:
   version "17.0.2"