Animate <Dialog> (#4)

Co-authored-by: Antony1060 <[email protected]>

web/.eslintrc.json

@@ -13,7 +13,9 @@
  "v3xlabs"
  ],
  "env": {
- "node": true
+ "node": true,
+ "browser": true
  },
  "rules": {}
 }
+

web/src/Profile.tsx

@@ -107,6 +107,7 @@ const postUpdateProfile = async (
  console.log({ response });
 };
 
+// eslint-disable-next-line sonarjs/cognitive-complexity
 export const Profile: FC<{ name: string }> = ({ name }) => {
  const { data } = useSWR(name, getProfile);
  const { address } = useAccount();

web/src/dialog/Dialog.tsx

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import { FC, PropsWithChildren } from 'react';
+import { FC, PropsWithChildren, useRef } from 'react';
 import { FiX } from 'react-icons/fi';
 
 const variants = {
@@ -32,13 +32,20 @@ export const Dialog: FC<
  const vstyle = variants[variant];
  const closestyle = close_styling[closeVariant];
 
+ const dialog = useRef(null);
+ const backdrop = useRef(null);
+
  return (
  // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
  <div tabIndex={-1} className="fixed z-50">
- <div className="fixed z-0 inset-0 bg-ens-light-grey-active/20 dark:bg-ens-light-grey-active/20 backdrop-blur-md"></div>
  <div
+ ref={backdrop}
+ className="fixed z-0 inset-0 bg-ens-light-grey-active/20 dark:bg-ens-light-grey-active/20 backdrop-blur-md animate-backdrop"
+ ></div>
+ <div
+ ref={dialog}
  className={clsx(
- 'fixed z-10 flex items-center justify-center max-w-full',
+ 'fixed z-10 flex items-center justify-center max-w-full animate-dialog',
  vstyle.outer
  )}
  >
@@ -49,7 +56,42 @@ export const Dialog: FC<
  )}
  >
  <button
- onClick={() => {
+ onClick={async () => {
+ const dialogElm: HTMLElement = dialog.current;
+ const backdropElm: HTMLElement = backdrop.current;
+
+ await Promise.all([
+ dialogElm.animate(
+ [
+ {
+ top: '0px',
+ opacity: 1,
+ },
+ {
+ top: '-100px',
+ opacity: 0,
+ },
+ ],
+ {
+ duration: 200,
+ fill: 'forwards',
+ }
+ ).finished,
+ backdropElm.animate(
+ [
+ {
+ opacity: 1,
+ },
+ {
+ opacity: 0,
+ },
+ ],
+ {
+ duration: 200,
+ fill: 'forwards',
+ }
+ ).finished,
+ ]);
  onClose();
  }}
  className={clsx('absolute', closestyle)}

web/src/global.css

@@ -3,6 +3,38 @@
 @tailwind utilities;
 @tailwind variants;
 
+@keyframes slideFromTop {
+ from {
+ opacity: 0;
+ top: -100px;
+ }
+
+ to {
+ opacity: 1;
+ top: 0px;
+ }
+}
+
+.animate-dialog {
+ /* Nice cubic besier eased animation */
+ animation: slideFromTop 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+
+@keyframes backdropAnimation {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+.animate-backdrop {
+ /* Nice cubic besier eased animation */
+ animation: backdropAnimation 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+
 .btn {
  @apply rounded-xl;
 }
@@ -38,3 +70,4 @@
 .input {
  @apply border bg-ens-light-background-primary dark:bg-ens-dark-background-primary border-ens-light-border dark:border-ens-dark-border pl-9 rounded-md py-2 w-full;
 }
+