fix deprecated switch component (#409)

package.json

@@ -24,7 +24,7 @@
     "react-router-dom": "^5.0.0",
     "react-scripts": "^3.0.1",
     "react-spring": "^8.0.20",
-    "react-toggle": "^4.0.2",
+    "react-switch": "^5.0.1",
     "styled-components": "^4.2.0",
     "web3-react": "^5.0.4"
   },

src/components/Footer/index.js

@@ -1,13 +1,10 @@
 import React from 'react'
 import styled from 'styled-components'
+import { darken, transparentize } from 'polished'
+import Toggle from 'react-switch'
 
 import { Link } from '../../theme'
-import { darken } from 'polished'
 import { useDarkModeManager } from '../../contexts/LocalStorage'
-import Toggle from 'react-toggle'
-import { transparentize } from 'polished'
-
-import 'react-toggle/style.css'
 
 const FooterFrame = styled.div`
   display: flex;
@@ -48,49 +45,29 @@ const Title = styled.div`
   }
 `
 
-const EmojiToggle = styled.span`
-  position: relative;
-  font-size: 15px;
-  font-family: 'Arial sans-serif';
-`
-
-const ToggleComponent = styled(Toggle)`
+const StyledToggle = styled(Toggle)`
   margin-right: 24px;
-  .react-toggle-track {
+
+  .react-switch-bg[style] {
     background-color: ${({ theme }) => theme.inputBackground} !important;
-    border: 1px solid ${({ theme }) => theme.concreteGray};
+    border: 1px solid ${({ theme }) => theme.concreteGray} !important;
   }
 
-  .react-toggle-track-x {
-    line-height: unset;
-    bottom: auto;
-    right: 14px;
-  }
-
-  .react-toggle-track-check {
-    line-height: unset;
-    bottom: auto;
-    left: 7px;
-  }
-
-  &&& .react-toggle-thumb {
+  .react-switch-handle[style] {
     background-color: ${({ theme }) => theme.inputBackground};
     box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.93, theme.royalBlue)};
     border: 1px solid ${({ theme }) => theme.mercuryGray};
     border-color: ${({ theme }) => theme.mercuryGray} !important;
-    /* border: none; */
-    top: 2px;
-    left: ${({ defaultChecked }) => (defaultChecked ? '28px' : '2px')};
   }
 `
 
-function ToggleIcon(props) {
-  return (
-    <EmojiToggle role="img" aria-label="sun">
-      {props.content}
-    </EmojiToggle>
-  )
-}
+const EmojiToggle = styled.span`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  font-family: Arial sans-serif;
+`
 
 export default function Footer() {
   const [isDark, toggleDarkMode] = useDarkModeManager()
@@ -110,10 +87,22 @@ export default function Footer() {
           </Link>
         </Title>
       </FooterElement>
-      <ToggleComponent
-        defaultChecked={!isDark}
-        icons={{ checked: <ToggleIcon content="☀️" />, unchecked: <ToggleIcon content="🌙️" /> }}
-        onChange={toggleDarkMode}
+
+      <StyledToggle
+        checked={!isDark}
+        uncheckedIcon={
+          <EmojiToggle role="img" aria-label="moon">
+            {/* eslint-disable-line jsx-a11y/accessible-emoji */}
+            🌙️
+          </EmojiToggle>
+        }
+        checkedIcon={
+          <EmojiToggle role="img" aria-label="sun">
+            {/* eslint-disable-line jsx-a11y/accessible-emoji */}
+            {'☀️'}
+          </EmojiToggle>
+        }
+        onChange={() => toggleDarkMode()}
       />
     </FooterFrame>
   )

yarn.lock

@@ -3134,10 +3134,6 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.5:
-  version "2.2.6"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
-
 clean-css@4.2.x:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.1.tgz#2d411ef76b8569b6d0c84068dabe85b0aa5e5c17"
@@ -9359,11 +9355,12 @@ react-style-singleton@^1.1.0:
     invariant "^2.2.4"
     tslib "^1.0.0"
 
-react-toggle@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/react-toggle/-/react-toggle-4.0.2.tgz#77f487860efb87fafd197672a2db8c885be1440f"
+react-switch@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/react-switch/-/react-switch-5.0.1.tgz#449277f4c3aed5286fffd0f50d5cbc2a23330406"
+  integrity sha512-Pa5kvqRfX85QUCK1Jv0rxyeElbC3aNpCP5hV0LoJpU/Y6kydf0t4kRriQ6ZYA4kxWwAYk/cH51T4/sPzV9mCgQ==
   dependencies:
-    classnames "^2.2.5"
+    prop-types "^15.6.2"
 
 react@^16.8.6:
   version "16.8.6"