From 24a956c940690400bd18e229a77fa2b1477c7fc3 Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Thu, 4 Aug 2022 21:31:02 +0300
Subject: [PATCH] refactor modal animations and add more padding to the modal
 footer

---
 frontend/public/global.css                            | 4 ++--
 frontend/src/animations.js                            | 9 +++++++++
 frontend/src/components/overlays/CreateAccount.svelte | 5 ++---
 frontend/src/components/overlays/CreateChannel.svelte | 7 +++----
 frontend/src/components/overlays/EditChannel.svelte   | 7 +++----
 frontend/src/components/overlays/EditMessage.svelte   | 6 +++---
 frontend/src/components/overlays/Login.svelte         | 5 ++---
 frontend/src/components/overlays/Prompt.svelte        | 7 +++----
 frontend/src/components/overlays/Settings.svelte      | 7 +++----
 frontend/src/components/overlays/Toast.svelte         | 5 ++---
 10 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/frontend/public/global.css b/frontend/public/global.css
index eb3570a..bf4849d 100644
--- a/frontend/public/global.css
+++ b/frontend/public/global.css
@@ -137,13 +137,13 @@ body {
 }
 
 .modal-header {
-	margin-bottom: var(--space-norm);
+	margin-bottom: var(--space-md);
 	text-align: center;
 }
 
 .modal-footer {
 	margin-top: auto;
-	padding-top: var(--space-norm);
+	padding-top: var(--space-lg);
 }
 
 .modal-primary-action {
diff --git a/frontend/src/animations.js b/frontend/src/animations.js
index d97be8d..a282c38 100644
--- a/frontend/src/animations.js
+++ b/frontend/src/animations.js
@@ -1,6 +1,15 @@
 import { fade, fly } from "svelte/transition";
+import { cubicInOut } from "svelte/easing";
 import { getItem } from "./storage";
 
+export function maybeModalFade(node) {
+    return maybeFade(node, { duration: 160, easing: cubicInOut });
+}
+
+export function maybeModalFly(node) {
+    return maybeFly(node, { duration: 210, easing: cubicInOut, y: 15 });
+}
+
 export function maybeFly(...e) {
     if (getItem("ui:doAnimations"))
         return fly(...e);
diff --git a/frontend/src/components/overlays/CreateAccount.svelte b/frontend/src/components/overlays/CreateAccount.svelte
index 67152a7..065b7c9 100644
--- a/frontend/src/components/overlays/CreateAccount.svelte
+++ b/frontend/src/components/overlays/CreateAccount.svelte
@@ -1,9 +1,8 @@
 <script>
-    import { quintInOut } from "svelte/easing";
     import { overlayStore } from "../../stores";
     import request from "../../request";
     import { apiRoute } from "../../storage";
-    import { maybeFly } from "../../animations";
+    import { maybeModalFly } from "../../animations";
 
     let username = "";
     let password = "";
@@ -58,7 +57,7 @@
 </style>
 
 <div class="modal-backdrop modal-backdrop-opaque" on:keydown="{ onKeydown }">
-    <div class="modal" transition:maybeFly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation on:outroend="{ outroEnd }">
+    <div class="modal" transition:maybeModalFly on:click|stopPropagation on:outroend="{ outroEnd }">
         <div class="modal-header">
             <span class="h4">Create an Account</span>
         </div>
diff --git a/frontend/src/components/overlays/CreateChannel.svelte b/frontend/src/components/overlays/CreateChannel.svelte
index aaae8df..f78bee2 100644
--- a/frontend/src/components/overlays/CreateChannel.svelte
+++ b/frontend/src/components/overlays/CreateChannel.svelte
@@ -1,9 +1,8 @@
 <script>
-    import { quintInOut } from "svelte/easing";
     import { overlayStore } from "../../stores";
     import request from "../../request";
     import { apiRoute } from "../../storage";
-    import { maybeFade, maybeFly } from "../../animations";
+    import { maybeModalFade, maybeModalFly } from "../../animations";
 
     let channelName = "";
     let createButtonEnabled = true;
@@ -35,8 +34,8 @@
     }
 </style>
 
-<div class="modal-backdrop" transition:maybeFade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }" on:keydown="{ onKeydown }">
-    <div class="modal" transition:maybeFly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation>
+<div class="modal-backdrop" transition:maybeModalFade on:click="{ close }" on:keydown="{ onKeydown }">
+    <div class="modal" transition:maybeModalFly on:click|stopPropagation>
         <div class="modal-header">
             <span class="h4">Create Channel</span>
         </div>
diff --git a/frontend/src/components/overlays/EditChannel.svelte b/frontend/src/components/overlays/EditChannel.svelte
index 46df536..930b2bf 100644
--- a/frontend/src/components/overlays/EditChannel.svelte
+++ b/frontend/src/components/overlays/EditChannel.svelte
@@ -1,6 +1,5 @@
 <script>
-    import { maybeFade, maybeFly } from "../../animations";
-    import { quintInOut } from "svelte/easing";
+    import { maybeModalFade, maybeModalFly } from "../../animations";
     import { overlayStore } from "../../stores";
     import request from "../../request";
     import { apiRoute } from "../../storage";
@@ -51,8 +50,8 @@
     }
 </style>
 
-<div class="modal-backdrop" transition:maybeFade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }" on:keydown="{ onKeydown }">
-    <div class="modal" transition:maybeFly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation>
+<div class="modal-backdrop" transition:maybeModalFade on:click="{ close }" on:keydown="{ onKeydown }">
+    <div class="modal" transition:maybeModalFly on:click|stopPropagation>
         <div class="modal-header">
             <span class="h4">Edit Channel</span>
         </div>
diff --git a/frontend/src/components/overlays/EditMessage.svelte b/frontend/src/components/overlays/EditMessage.svelte
index 5e47506..5784bb3 100644
--- a/frontend/src/components/overlays/EditMessage.svelte
+++ b/frontend/src/components/overlays/EditMessage.svelte
@@ -3,7 +3,7 @@
     import { overlayStore } from "../../stores";
     import request from "../../request";
     import { apiRoute } from "../../storage";
-    import { maybeFade, maybeFly } from "../../animations";
+    import { maybeModalFade, maybeModalFly } from "../../animations";
 
     export let message;
 
@@ -51,8 +51,8 @@
     }
 </style>
 
-<div class="modal-backdrop" transition:maybeFade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }" on:keydown="{ onKeydown }">
-    <div class="modal" transition:maybeFly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation>
+<div class="modal-backdrop" transition:maybeModalFade on:click="{ close }" on:keydown="{ onKeydown }">
+    <div class="modal" transition:maybeModalFly on:click|stopPropagation>
         <div class="modal-header">
             <span class="h4">Edit Message</span>
         </div>
diff --git a/frontend/src/components/overlays/Login.svelte b/frontend/src/components/overlays/Login.svelte
index 8c3e629..eb16d37 100644
--- a/frontend/src/components/overlays/Login.svelte
+++ b/frontend/src/components/overlays/Login.svelte
@@ -1,10 +1,9 @@
 <script>
-    import { quintInOut } from "svelte/easing";
     import { overlayStore } from "../../stores";
     import request from "../../request";
     import { apiRoute } from "../../storage";
     import { authWithToken } from "../../auth";
-    import { maybeFly } from "../../animations";
+    import { maybeModalFly } from "../../animations";
 
     let username = "";
     let password = "";
@@ -62,7 +61,7 @@
 </style>
 
 <div class="modal-backdrop modal-backdrop-opaque" on:keydown="{ onKeydown }">
-    <div class="modal" transition:maybeFly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation on:outroend="{ outroEnd }">
+    <div class="modal" transition:maybeModalFly on:click|stopPropagation on:outroend="{ outroEnd }">
         <div class="modal-header">
             <span class="h4">Welcome back!</span>
         </div>
diff --git a/frontend/src/components/overlays/Prompt.svelte b/frontend/src/components/overlays/Prompt.svelte
index 6c939fc..cc40b5a 100644
--- a/frontend/src/components/overlays/Prompt.svelte
+++ b/frontend/src/components/overlays/Prompt.svelte
@@ -1,6 +1,5 @@
 <script>
-    import { maybeFade, maybeFly } from "../../animations";
-    import { quintInOut } from "svelte/easing";
+    import { maybeModalFade, maybeModalFly } from "../../animations";
     import { overlayStore } from "../../stores";
 
     export let onSubmit = async () => {};
@@ -34,8 +33,8 @@
     }
 </style>
 
-<div class="modal-backdrop" transition:maybeFade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }" on:keydown="{ onKeydown }">
-    <div class="modal" transition:maybeFly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation>
+<div class="modal-backdrop" transition:maybeModalFade on:click="{ close }" on:keydown="{ onKeydown }">
+    <div class="modal" transition:maybeModalFly on:click|stopPropagation>
         <div class="modal-header">
             <span class="h4">{ heading }</span>
         </div>
diff --git a/frontend/src/components/overlays/Settings.svelte b/frontend/src/components/overlays/Settings.svelte
index 473e12f..6264f4f 100644
--- a/frontend/src/components/overlays/Settings.svelte
+++ b/frontend/src/components/overlays/Settings.svelte
@@ -1,9 +1,8 @@
 <script>
-    import { quintInOut } from "svelte/easing";
     import { AtSignIcon } from "svelte-feather-icons";
     import { overlayStore, userInfoStore, smallViewport, theme, doAnimations } from "../../stores";
     import { logOut } from "../../auth";
-    import { maybeFade, maybeFly } from "../../animations";
+    import { maybeModalFade, maybeModalFly } from "../../animations";
     import request from "../../request";
     import { apiRoute } from "../../storage";
 
@@ -77,8 +76,8 @@
     }
 </style>
 
-<div class="modal-backdrop" transition:maybeFade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }">
-    <div class="modal" class:large-settings="{ !$smallViewport }" transition:maybeFly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation>
+<div class="modal-backdrop" transition:maybeModalFade on:click="{ close }">
+    <div class="modal" class:large-settings="{ !$smallViewport }" transition:maybeModalFly on:click|stopPropagation>
         <span class="input-label">Account</span>
         <div class="settings-card full-width">
             <AtSignIcon />
diff --git a/frontend/src/components/overlays/Toast.svelte b/frontend/src/components/overlays/Toast.svelte
index bc7baac..ceb61a7 100644
--- a/frontend/src/components/overlays/Toast.svelte
+++ b/frontend/src/components/overlays/Toast.svelte
@@ -1,7 +1,6 @@
 <script>
     import { XIcon } from "svelte-feather-icons";
-    import { quintInOut } from "svelte/easing";
-    import { maybeFly } from "../../animations";
+    import { maybeModalFly } from "../../animations";
     import { overlayStore } from "../../stores";
 
     export let message;
@@ -24,7 +23,7 @@
 </style>
 
 {#key message}
-    <div class="toast" transition:maybeFly="{{ duration: 300, easing: quintInOut, y: 10 }}">
+    <div class="toast" transition:maybeModalFly>
         <span>{ message }</span>
         <button class="icon-button icon-button-auto" on:click="{ () => overlayStore.close('toast') }">
             <XIcon />