Rewrite styles to scss and use i respective components

src/components/Fadeable/Fadeable.tsx

@@ -0,0 +1,27 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import './fadeable.scss';
+type FadeableProps = {
+  leaving: boolean;
+  onLeave: () => void;
+};
+
+export default function Fadeable({ leaving, onLeave, children }: React.PropsWithChildren<FadeableProps>) {
+  const [faded, setFaded] = useState(leaving);
+
+  useEffect(() => {
+    setFaded(leaving);
+  }, [leaving]);
+
+  const handleTransitionEnd = () => {
+    if (faded) {
+      onLeave();
+    }
+  };
+
+  return (
+    <div className={classNames('fadable', { 'is-faded': faded })} onTransitionEnd={handleTransitionEnd}>
+      {children}
+    </div>
+  );
+}

src/components/Fadeable/fadeable.scss

@@ -0,0 +1,8 @@
+.fadable {
+  opacity: 1;
+  transition: opacity 0.2s cubic-bezier(0.54, 0, 0.28, 1);
+
+  &.is-faded {
+   opacity: 0;
+  }
+}