From fd010ed75e338906aefd401438acbb972ad50ff4 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Sun, 1 Aug 2021 21:08:42 +0100
Subject: [PATCH] Closing animation for settings.

---
 src/pages/settings/GenericSettings.tsx  | 24 +++++++++++++++++-------
 src/pages/settings/Settings.module.scss |  4 ++++
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/pages/settings/GenericSettings.tsx b/src/pages/settings/GenericSettings.tsx
index b9c9f546..42dd9f97 100644
--- a/src/pages/settings/GenericSettings.tsx
+++ b/src/pages/settings/GenericSettings.tsx
@@ -3,8 +3,9 @@ import { Helmet } from "react-helmet";
 import { Switch, useHistory, useParams } from "react-router-dom";
 
 import styles from "./Settings.module.scss";
+import classNames from "classnames";
 import { Text } from "preact-i18n";
-import { useContext, useEffect } from "preact/hooks";
+import { useContext, useEffect, useState } from "preact/hooks";
 
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 
@@ -48,12 +49,17 @@ export function GenericSettings({
     const theme = useContext(ThemeContext);
     const { page } = useParams<{ page: string }>();
 
+    const [closing, setClosing] = useState(false);
     function exitSettings() {
-        if (history.length > 0) {
-            history.goBack();
-        } else {
-            history.push("/");
-        }
+        setClosing(true);
+
+        setTimeout(() => {
+            if (history.length > 0) {
+                history.goBack();
+            } else {
+                history.push("/");
+            }
+        }, 100);
     }
 
     useEffect(() => {
@@ -68,7 +74,11 @@ export function GenericSettings({
     }, []);
 
     return (
-        <div className={styles.settings} data-mobile={isTouchscreenDevice}>
+        <div
+            className={classNames(styles.settings, {
+                [styles.closing]: closing,
+            })}
+            data-mobile={isTouchscreenDevice}>
             <Helmet>
                 <meta
                     name="theme-color"
diff --git a/src/pages/settings/Settings.module.scss b/src/pages/settings/Settings.module.scss
index b34ddd97..7dc73b2f 100644
--- a/src/pages/settings/Settings.module.scss
+++ b/src/pages/settings/Settings.module.scss
@@ -69,6 +69,10 @@
     height: 100%;
     position: fixed;
     animation: open 0.18s ease-out, opacity 0.18s;
+
+    &.closing {
+        animation: close 0.18s ease-in;
+    }
 }
 
 .settings {