Settings and notifications

components/ui/PageStack.jsx

@@ -1,8 +1,36 @@
 import classNames from 'classnames';
 
+import { Transition } from 'react-transition-group';
+
+const duration = 500;
+
+const defaultStyle = {
+  transition: `opacity ${duration}ms ease-in-out`,
+  opacity: 0,
+};
+
+const transitionStyles = {
+  entering: { opacity: 1 },
+  entered: { opacity: 1 },
+  exiting: { opacity: 0 },
+  exited: { opacity: 0 },
+};
+
 const PageStack = ({ children, className, ...props }) => (
   <div {...props} className={classNames('flex-1 z-0 overflow-hidden relative', className)}>
-    {children}
+    <Transition in={true} duration={duration}>
+      {state => (
+        <div
+          className="w-full h-full"
+          style={{
+            ...defaultStyle,
+            ...transitionStyles[state],
+          }}
+        >
+          {children}
+        </div>
+      )}
+    </Transition>
   </div>
 );
 

components/ui/Toggle.jsx

@@ -1,3 +1,5 @@
-const Toggle = () => <div></div>;
+import ReactToggle from 'react-toggle';
+
+const Toggle = props => <ReactToggle {...props} icons={false} />;
 
 export default Toggle;