From 9fcd63d17785291a919db893f7b2456d4833756d Mon Sep 17 00:00:00 2001
From: MathieuG-P <40181755+Zagrios@users.noreply.github.com>
Date: Sat, 25 Jun 2022 03:49:08 +0200
Subject: [PATCH] modals rework

---
 .../modal-types/guard-modal.component.tsx     |  3 +-
 .../modal-types/login-modal.component.tsx     |  3 +-
 .../modal-types/uninstall-modal.component.tsx |  3 +-
 .../components/modal/modal.component.tsx      | 38 ++++++++++++++-----
 4 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/src/renderer/components/modal/modal-types/guard-modal.component.tsx b/src/renderer/components/modal/modal-types/guard-modal.component.tsx
index 9f83c0fb..75d637c5 100644
--- a/src/renderer/components/modal/modal-types/guard-modal.component.tsx
+++ b/src/renderer/components/modal/modal-types/guard-modal.component.tsx
@@ -14,8 +14,7 @@ export function GuardModal({resolver}: {resolver: (x: ModalResponse) => void}) {
     }
 
   return (
-    <form className="relative p-4  text-gray-200 overflow-hidden rounded-md shadow-lg shadow-black bg-gradient-to-br from-main-color-3 to-main-color-2" onSubmit={(e) => {e.preventDefault(); login();}}>
-        <span className="absolute bg-gradient-to-r from-blue-500 to-red-500 top-0 w-full left-0 h-1"></span>
+    <form onSubmit={(e) => {e.preventDefault(); login();}}>
         <h1 className="text-3xl uppercase tracking-wide w-full text-center">Steam Guard</h1>
         <BsmImage className="mx-auto h-24" image={BeatConflict}/>
         <div className="mb-4">
diff --git a/src/renderer/components/modal/modal-types/login-modal.component.tsx b/src/renderer/components/modal/modal-types/login-modal.component.tsx
index f6f3db55..190f428c 100644
--- a/src/renderer/components/modal/modal-types/login-modal.component.tsx
+++ b/src/renderer/components/modal/modal-types/login-modal.component.tsx
@@ -16,8 +16,7 @@ export function LoginModal({resolver}: {resolver: (x: ModalResponse) => void}) {
     }
 
   return (
-    <form className="relative p-4  text-gray-200 overflow-hidden rounded-md shadow-lg shadow-black bg-gradient-to-br from-main-color-3 to-main-color-2" onSubmit={(e) => {e.preventDefault(); loggin();}}>
-        <span className="absolute bg-gradient-to-r from-blue-500 to-red-500 top-0 w-full left-0 h-1"></span>
+    <form onSubmit={(e) => {e.preventDefault(); loggin();}}>
         <h1 className="text-3xl uppercase tracking-wide w-full text-center">Steam Login</h1>
         <BsmImage className="mx-auto h-20" image={BeatImpatient} />
         <div className="mb-2">
diff --git a/src/renderer/components/modal/modal-types/uninstall-modal.component.tsx b/src/renderer/components/modal/modal-types/uninstall-modal.component.tsx
index f440c7e0..640a6a69 100644
--- a/src/renderer/components/modal/modal-types/uninstall-modal.component.tsx
+++ b/src/renderer/components/modal/modal-types/uninstall-modal.component.tsx
@@ -9,8 +9,7 @@ export function UninstallModal({resolver}: {resolver: (x: ModalResponse) => void
     const version = ModalService.getInsance().getModalData<BSVersion>();
 
   return (
-    <form className="relative p-4  text-gray-200 overflow-hidden rounded-md shadow-lg shadow-black bg-gradient-to-br from-main-color-3 to-main-color-2" onSubmit={(e) => {e.preventDefault(); resolver({exitCode: ModalExitCode.COMPLETED})}}>
-        <span className="absolute bg-gradient-to-r from-blue-500 to-red-500 top-0 w-full left-0 h-1"></span>
+    <form onSubmit={(e) => {e.preventDefault(); resolver({exitCode: ModalExitCode.COMPLETED})}}>
         <h1 className="text-3xl uppercase tracking-wide w-full text-center">Uninstall</h1>
         <BsmImage className="mx-auto h-24" image={BeatConflict}/>
         <p className="max-w-sm">Are you sure you want to uninstall BeatSaber {version.BSVersion} ? You will have to re-download it to play it.</p>
diff --git a/src/renderer/components/modal/modal.component.tsx b/src/renderer/components/modal/modal.component.tsx
index c871aa78..df51e74e 100644
--- a/src/renderer/components/modal/modal.component.tsx
+++ b/src/renderer/components/modal/modal.component.tsx
@@ -1,32 +1,50 @@
 import { ModalExitCode, ModalService, ModalType } from "renderer/services/modale.service";
 
 import { useEffect, useState } from "react"
+import { AnimatePresence, motion } from "framer-motion";
 
 import { LoginModal } from "./modal-types/login-modal.component";
 import { GuardModal } from "./modal-types/guard-modal.component";
 import { UninstallModal } from "./modal-types/uninstall-modal.component";
+import { InstallationFolderModal } from "./modal-types/installation-folder-modal.component";
 
 export function Modal() {
 
   const [modalType, setModalType] = useState(null as ModalType);
+  const [modalYOut, setModalYOut] = useState(window.innerHeight);
 
   const modalSevice = ModalService.getInsance();
 
+  const handleResize = () => setModalYOut(window.innerHeight);
+
   useEffect(() => {
     modalSevice.modalType$.subscribe(type => {
       setModalType(type);
-    })
+    });
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    }
   }, [])
 
-
-  return (
-    <div className={`absolute w-screen h-screen flex content-center items-center justify-center z-50 ${modalType ? "top-0" : "top-[calc(100%+50px)]"}`}>
-      <span onClick={() => modalSevice.resolve({exitCode: ModalExitCode.NO_CHOICE})} className={`absolute top-0 bottom-0 right-0 left-0 transition-opacity bg-black ${modalType ? "opacity-60" : "opacity-0"}`}></span>
-      <div className={`absolute transition-transform duration-200 ${modalType ? "translate-y-0" : "translate-y-[200%]"}`}>
-          {modalType === ModalType.STEAM_LOGIN && <LoginModal resolver={modalSevice.getResolver()}/>}
-          {modalType === ModalType.GUARD_CODE && <GuardModal resolver={modalSevice.getResolver()}/>}
-          {modalType === ModalType.UNINSTALL && <UninstallModal resolver={modalSevice.getResolver()}/>}
+  return  (
+    <AnimatePresence>
+    {modalType && (
+      <div className="top-0 absolute w-screen h-screen flex content-center items-center justify-center z-50">
+        <motion.span key="modal-overlay" onClick={() => modalSevice.resolve({exitCode: ModalExitCode.NO_CHOICE})} className="absolute top-0 bottom-0 right-0 left-0 bg-black" initial={{opacity: 0}} animate={{opacity: modalType && .60}} exit={{opacity: 0}} transition={{duration: .2}}/>
+        <motion.div key="modal" initial={{y: modalYOut}} animate={{y: 0}} exit={{y: modalYOut}}>
+          <div className="relative p-4 text-gray-200 overflow-hidden rounded-md shadow-lg shadow-black bg-gradient-to-br from-main-color-3 to-main-color-2">
+            <span className="absolute bg-gradient-to-r from-blue-500 to-red-500 top-0 w-full left-0 h-1"></span>
+            {modalType === ModalType.STEAM_LOGIN && <LoginModal resolver={modalSevice.getResolver()}/>}
+            {modalType === ModalType.GUARD_CODE && <GuardModal resolver={modalSevice.getResolver()}/>}
+            {modalType === ModalType.UNINSTALL && <UninstallModal resolver={modalSevice.getResolver()}/>}
+            {modalType === ModalType.INSTALLATION_FOLDER && <InstallationFolderModal resolver={modalSevice.getResolver()}/>}
+          </div>
+        </motion.div>
       </div>
-    </div>
+    )}
+    </AnimatePresence>
   )
 }