New icons for theme button.

components/settings/ThemeButton.js

@@ -1,22 +1,44 @@
 import React from 'react';
+import { useTransition, animated } from 'react-spring';
 import Button from 'components/common/Button';
 import useTheme from 'hooks/useTheme';
-import ToggleOn from 'assets/toggle-on.svg';
-import ToggleOff from 'assets/toggle-off.svg';
+import Sun from 'assets/sun.svg';
+import Moon from 'assets/moon.svg';
+import styles from './ThemeButton.module.css';
+import Icon from '../common/Icon';
 
 export default function ThemeButton() {
   const [theme, setTheme] = useTheme();
 
+  const transitions = useTransition(theme, theme => theme, {
+    from: {
+      opacity: 0,
+      transform: `translateY(${theme === 'light' ? '-20px' : '20px'}) scale(0.5)`,
+    },
+    enter: { opacity: 1, transform: 'translateY(0px) scale(1)' },
+    leave: {
+      opacity: 0,
+      transform: `translateY(${theme === 'light' ? '20px' : '-20px'}) scale(0.5)`,
+    },
+  });
+
   function handleClick() {
     setTheme(theme === 'light' ? 'dark' : 'light');
   }
 
   return (
-    <Button
-      icon={theme === 'light' ? <ToggleOff /> : <ToggleOn />}
-      size="large"
-      variant="light"
-      onClick={handleClick}
-    />
+    <Button className={styles.button} variant="light" 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>
+        ),
+      )}
+    </Button>
   );
 }

components/settings/ThemeButton.module.css

@@ -1,43 +1,3 @@
-.icon {
+.button svg {
   position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  line-height: 16px;
-}
-
-.sun {
-  height: 16px;
-  width: 16px;
-  border-radius: 100%;
-  background: var(--gray900);
-  z-index: 1;
-}
-
-.moon {
-  height: 16px;
-  width: 16px;
-  border-radius: 100%;
-  background: var(--gray900);
-}
-
-.moon:before {
-  content: '';
-  position: absolute;
-  height: 13px;
-  width: 13px;
-  left: -2px;
-  top: 0;
-  bottom: 0;
-  margin: auto;
-  border-radius: 100%;
-  background: var(--gray50);
-}
-
-.light .moon {
-  display: none;
-}
-
-.dark .sun {
-  display: none;
 }