Updated react-spring to latest.

components/common/Toast.js

@@ -2,9 +2,9 @@ import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import { useSpring, animated } from 'react-spring';
-import styles from './Toast.module.css';
 import Icon from 'components/common/Icon';
 import Close from 'assets/times.svg';
+import styles from './Toast.module.css';
 
 function Toast({ message, timeout = 3000, onClose }) {
   const props = useSpring({

components/common/Toast.module.css

@@ -1,5 +1,5 @@
 .toast {
-  position: absolute;
+  position: fixed;
   top: 30px;
   left: 0;
   right: 0;

components/settings/ThemeButton.js

@@ -9,7 +9,8 @@ import Icon from '../common/Icon';
 export default function ThemeButton() {
   const [theme, setTheme] = useTheme();
 
-  const transitions = useTransition(theme, theme => theme, {
+  const transitions = useTransition(theme, {
+    initial: { opacity: 1 },
     from: {
       opacity: 0,
       transform: `translateY(${theme === 'light' ? '20px' : '-20px'}) scale(0.5)`,
@@ -27,17 +28,11 @@ export default function ThemeButton() {
 
   return (
     <div className={styles.button} onClick={handleClick}>
-      {transitions.map(({ item, key, props }) =>
-        item === 'light' ? (
-          <animated.div key={key} style={props}>
-            <Icon icon={<Sun />} />
-          </animated.div>
-        ) : (
-          <animated.div key={key} style={props}>
-            <Icon icon={<Moon />} />
-          </animated.div>
-        ),
-      )}
+      {transitions((styles, item) => (
+        <animated.div key={item} style={styles}>
+          <Icon icon={item === 'light' ? <Sun /> : <Moon />} />
+        </animated.div>
+      ))}
     </div>
   );
 }