From 76a3f7d42a7a939a5d10f3e2f8a493709f05b3f6 Mon Sep 17 00:00:00 2001
From: HF <hf@pixelplanet.fun>
Date: Mon, 11 Jul 2022 15:52:17 +0200
Subject: [PATCH] move from unmaintained react-toggle-button to react-toggle

---
 package-lock.json                   | 101 +++++--------------
 package.json                        |   2 +-
 src/components/HistorySelect.jsx    |  12 +--
 src/components/MdToggleButton.jsx   |  29 +-----
 src/components/windows/Settings.jsx |   1 +
 src/server.js                       |   1 -
 src/styles/default.css              | 145 ++++++++++++++++++++++++++++
 7 files changed, 181 insertions(+), 110 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4be025d4..c0d9cab3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,7 +38,7 @@
         "react-redux": "^7.2.6",
         "react-responsive": "^8.2.0",
         "react-stay-scrolled": "^7.4.0",
-        "react-toggle-button": "^2.1.0",
+        "react-toggle": "^4.1.2",
         "redis": "^4.1.0",
         "redux": "^4.1.2",
         "redux-logger": "^3.0.6",
@@ -3760,6 +3760,11 @@
         "node": ">=6.0"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
     "node_modules/clean-css": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.0.tgz",
@@ -8356,11 +8361,6 @@
       "resolved": "https://registry.npmjs.org/pause/-/pause-0.0.1.tgz",
       "integrity": "sha512-KG8UEiEVkR3wGEb4m5yZkVCzigAD+cVEJck2CzYZO37ZGJfctvVptVO192MwrtPhzONn6go8ylnOdMhKqi4nfg=="
     },
-    "node_modules/performance-now": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
-      "integrity": "sha512-YHk5ez1hmMR5LOkb9iJkLKqoBlL7WD5M8ljC75ZfzXriuBIVNuecaXuU7e+hOwyqf24Wxhh7Vxgt7Hnw9288Tg=="
-    },
     "node_modules/pg-connection-string": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.5.0.tgz",
@@ -8719,19 +8719,6 @@
         }
       ]
     },
-    "node_modules/raf": {
-      "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"
-      }
-    },
-    "node_modules/raf/node_modules/performance-now": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
-    },
     "node_modules/random-bytes": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/random-bytes/-/random-bytes-1.0.0.tgz",
@@ -8900,29 +8887,17 @@
         "react": ">=16.8.0"
       }
     },
-    "node_modules/react-toggle-button": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/react-toggle-button/-/react-toggle-button-2.2.0.tgz",
-      "integrity": "sha512-u6D/TalAvfuaIHq59v8WAddztrM6W/FtmTFrk6bvb3JmMpEDh2gQbKD8hFbfCtwwOAygZfsmzQdUAYg3x+wywQ==",
+    "node_modules/react-toggle": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/react-toggle/-/react-toggle-4.1.2.tgz",
+      "integrity": "sha512-4Ohw31TuYQdhWfA6qlKafeXx3IOH7t4ZHhmRdwsm1fQREwOBGxJT+I22sgHqR/w8JRdk+AeMCJXPImEFSrNXow==",
       "dependencies": {
-        "prop-types": "^15.6.0",
-        "react-motion": "^0.5.2"
+        "classnames": "^2.2.5"
       },
       "peerDependencies": {
-        "react": ">=0.13.2 || ^0.14 || ^15.0.0"
-      }
-    },
-    "node_modules/react-toggle-button/node_modules/react-motion": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/react-motion/-/react-motion-0.5.2.tgz",
-      "integrity": "sha512-9q3YAvHoUiWlP3cK0v+w1N5Z23HXMj4IF4YuvjvWegWqNPfLXsOBE/V7UvQGpXxHFKRQQcNcVQE31g9SB/6qgQ==",
-      "dependencies": {
-        "performance-now": "^0.2.0",
-        "prop-types": "^15.5.8",
-        "raf": "^3.1.0"
-      },
-      "peerDependencies": {
-        "react": "^0.14.9 || ^15.3.0 || ^16.0.0"
+        "prop-types": ">= 15.3.0 < 18",
+        "react": ">= 15.3.0 < 18",
+        "react-dom": ">= 15.3.0 < 18"
       }
     },
     "node_modules/readable-stream": {
@@ -13900,6 +13875,11 @@
       "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
       "dev": true
     },
+    "classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
     "clean-css": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.0.tgz",
@@ -17411,11 +17391,6 @@
       "resolved": "https://registry.npmjs.org/pause/-/pause-0.0.1.tgz",
       "integrity": "sha512-KG8UEiEVkR3wGEb4m5yZkVCzigAD+cVEJck2CzYZO37ZGJfctvVptVO192MwrtPhzONn6go8ylnOdMhKqi4nfg=="
     },
-    "performance-now": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
-      "integrity": "sha512-YHk5ez1hmMR5LOkb9iJkLKqoBlL7WD5M8ljC75ZfzXriuBIVNuecaXuU7e+hOwyqf24Wxhh7Vxgt7Hnw9288Tg=="
-    },
     "pg-connection-string": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.5.0.tgz",
@@ -17663,21 +17638,6 @@
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
       "dev": true
     },
-    "raf": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
-      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
-      "requires": {
-        "performance-now": "^2.1.0"
-      },
-      "dependencies": {
-        "performance-now": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-          "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
-        }
-      }
-    },
     "random-bytes": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/random-bytes/-/random-bytes-1.0.0.tgz",
@@ -17803,25 +17763,12 @@
         "tiny-invariant": "^1.2.0"
       }
     },
-    "react-toggle-button": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/react-toggle-button/-/react-toggle-button-2.2.0.tgz",
-      "integrity": "sha512-u6D/TalAvfuaIHq59v8WAddztrM6W/FtmTFrk6bvb3JmMpEDh2gQbKD8hFbfCtwwOAygZfsmzQdUAYg3x+wywQ==",
+    "react-toggle": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/react-toggle/-/react-toggle-4.1.2.tgz",
+      "integrity": "sha512-4Ohw31TuYQdhWfA6qlKafeXx3IOH7t4ZHhmRdwsm1fQREwOBGxJT+I22sgHqR/w8JRdk+AeMCJXPImEFSrNXow==",
       "requires": {
-        "prop-types": "^15.6.0",
-        "react-motion": "^0.5.2"
-      },
-      "dependencies": {
-        "react-motion": {
-          "version": "0.5.2",
-          "resolved": "https://registry.npmjs.org/react-motion/-/react-motion-0.5.2.tgz",
-          "integrity": "sha512-9q3YAvHoUiWlP3cK0v+w1N5Z23HXMj4IF4YuvjvWegWqNPfLXsOBE/V7UvQGpXxHFKRQQcNcVQE31g9SB/6qgQ==",
-          "requires": {
-            "performance-now": "^0.2.0",
-            "prop-types": "^15.5.8",
-            "raf": "^3.1.0"
-          }
-        }
+        "classnames": "^2.2.5"
       }
     },
     "readable-stream": {
diff --git a/package.json b/package.json
index 5f3f63b2..312d7c39 100644
--- a/package.json
+++ b/package.json
@@ -53,7 +53,7 @@
     "react-redux": "^7.2.6",
     "react-responsive": "^8.2.0",
     "react-stay-scrolled": "^7.4.0",
-    "react-toggle-button": "^2.1.0",
+    "react-toggle": "^4.1.2",
     "redis": "^4.1.0",
     "redux": "^4.1.2",
     "redux-logger": "^3.0.6",
diff --git a/src/components/HistorySelect.jsx b/src/components/HistorySelect.jsx
index dba26937..8c561899 100644
--- a/src/components/HistorySelect.jsx
+++ b/src/components/HistorySelect.jsx
@@ -14,14 +14,14 @@ import { requestHistoricalTimes } from '../store/actions/fetch';
 
 
 function stringToDate(dateString) {
-  if (!dateString) return null;
+  if (!dateString) return '';
   // YYYYMMDD
   // eslint-disable-next-line max-len
   return `${dateString.substring(0, 4)}-${dateString.substring(4, 6)}-${dateString.substring(6)}`;
 }
 
 function stringToTime(timeString) {
-  if (!timeString) return null;
+  if (!timeString) return '';
   return `${timeString.substring(0, 2)}:${timeString.substring(2)}`;
 }
 
@@ -105,17 +105,18 @@ const HistorySelect = () => {
     <div id="historyselect">
       <input
         type="date"
-        requiredPattern="\d{4}-\d{2}-\d{2}"
+        pattern="\d{4}-\d{2}-\d{2}"
+        key="dateinput"
         value={selectedDate}
         min={canvasStartDate}
         max={max}
         ref={dateSelect}
         onChange={handleDateChange}
       />
-      <div>
+      <div key="timeselcon">
         { (!!times.length && historicalTime && !submitting)
           && (
-            <div>
+            <div key="timesel">
               <button
                 type="button"
                 className="hsar"
@@ -128,7 +129,6 @@ const HistorySelect = () => {
                 {times.map((value) => (
                   <option
                     value={value}
-                    selected={value === selectedTime}
                   >
                     {value}
                   </option>
diff --git a/src/components/MdToggleButton.jsx b/src/components/MdToggleButton.jsx
index 378311ad..f5eb650d 100644
--- a/src/components/MdToggleButton.jsx
+++ b/src/components/MdToggleButton.jsx
@@ -2,35 +2,14 @@
  */
 
 import React from 'react';
-import ToggleButton from 'react-toggle-button';
-import { MdCheck, MdClose } from 'react-icons/md';
-
+import ToggleButton from 'react-toggle';
 
 const MdToggleButton = ({ value, onToggle, deactivated }) => (
   <ToggleButton
-    inactiveLabel={<MdClose />}
-    activeLabel={<MdCheck />}
-    value={value}
-    onToggle={onToggle}
-    colors={(deactivated)
-      ? {
-        activeThumb: {
-          base: '#b2b2b2',
-        },
-        inactiveTumb: {
-          base: '#b2b2b2',
-        },
-        active: {
-          base: '#cbcbcb',
-        },
-        inactive: {
-          base: '#cbcbcb',
-        },
-      }
-      : {}}
-    thumbStyleHover={{ backgroundColor: '#ededed' }}
+    checked={value}
+    onChange={onToggle}
+    disabled={deactivated}
   />
 );
 
-// thumbAnimateRange={[-10, 36]}
 export default MdToggleButton;
diff --git a/src/components/windows/Settings.jsx b/src/components/windows/Settings.jsx
index 4415d7c7..3f845078 100644
--- a/src/components/windows/Settings.jsx
+++ b/src/components/windows/Settings.jsx
@@ -44,6 +44,7 @@ const titleStyles = {
 
 const rowStyles = {
   ...flexy,
+  alignItems: 'center',
   flexDirection: 'row',
 };
 
diff --git a/src/server.js b/src/server.js
index 0139de56..35410a28 100644
--- a/src/server.js
+++ b/src/server.js
@@ -7,7 +7,6 @@ import compression from 'compression';
 import express from 'express';
 import http from 'http';
 
-// import baseCss from './components/base.tcss';
 import forceGC from './core/forceGC';
 import logger from './core/logger';
 import rankings from './core/ranking';
diff --git a/src/styles/default.css b/src/styles/default.css
index f262ba57..e96746a2 100644
--- a/src/styles/default.css
+++ b/src/styles/default.css
@@ -951,3 +951,148 @@ tr:nth-child(even) {
   width: 100%;
   position: absolute;
 }
+
+/*-----------*/
+/* react-toggle css */
+
+.react-toggle {
+  touch-action: pan-x;
+
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  padding: 0;
+
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.react-toggle-screenreader-only {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.react-toggle--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  -webkit-transition: opacity 0.25s;
+  transition: opacity 0.25s;
+}
+
+.react-toggle-track {
+  width: 50px;
+  height: 24px;
+  padding: 0;
+  border-radius: 30px;
+  background-color: #4D4D4D;
+  -webkit-transition: all 0.2s ease;
+  -moz-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+}
+
+.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
+  background-color: #000000;
+}
+
+.react-toggle--checked .react-toggle-track {
+  background-color: #19AB27;
+}
+
+.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
+  background-color: #128D15;
+}
+
+.react-toggle-track-check {
+  position: absolute;
+  width: 14px;
+  height: 10px;
+  top: 0px;
+  bottom: 0px;
+  margin-top: auto;
+  margin-bottom: auto;
+  line-height: 0;
+  left: 8px;
+  opacity: 0;
+  -webkit-transition: opacity 0.25s ease;
+  -moz-transition: opacity 0.25s ease;
+  transition: opacity 0.25s ease;
+}
+
+.react-toggle--checked .react-toggle-track-check {
+  opacity: 1;
+  -webkit-transition: opacity 0.25s ease;
+  -moz-transition: opacity 0.25s ease;
+  transition: opacity 0.25s ease;
+}
+
+.react-toggle-track-x {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  top: 0px;
+  bottom: 0px;
+  margin-top: auto;
+  margin-bottom: auto;
+  line-height: 0;
+  right: 10px;
+  opacity: 1;
+  -webkit-transition: opacity 0.25s ease;
+  -moz-transition: opacity 0.25s ease;
+  transition: opacity 0.25s ease;
+}
+
+.react-toggle--checked .react-toggle-track-x {
+  opacity: 0;
+}
+
+.react-toggle-thumb {
+  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  width: 22px;
+  height: 22px;
+  border: 1px solid #4D4D4D;
+  border-radius: 50%;
+  background-color: #FAFAFA;
+
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+
+  -webkit-transition: all 0.25s ease;
+  -moz-transition: all 0.25s ease;
+  transition: all 0.25s ease;
+}
+
+.react-toggle--checked .react-toggle-thumb {
+  left: 27px;
+  border-color: #19AB27;
+}
+
+.react-toggle--focus .react-toggle-thumb {
+  -webkit-box-shadow: 0px 0px 3px 2px #0099E0;
+  -moz-box-shadow: 0px 0px 3px 2px #0099E0;
+  box-shadow: 0px 0px 2px 3px #0099E0;
+}
+
+.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb {
+  -webkit-box-shadow: 0px 0px 5px 5px #0099E0;
+  -moz-box-shadow: 0px 0px 5px 5px #0099E0;
+  box-shadow: 0px 0px 5px 5px #0099E0;
+}