added animations

backend/middleware/folders/folder-middleware.ts

@@ -10,7 +10,6 @@ export const moveFolderListValidationRules = [
   query("folderIDs")
     .optional()
     .isArray()
-    .isLength({ min: 1 })
     .withMessage("FolderIDs must be an array of strings"),
   middlewareValidationFunction,
 ];

src/components/ContextMenu/ContextMenu.tsx

@@ -11,6 +11,7 @@ import { FileInterface } from "../../types/file";
 import { useNavigate } from "react-router-dom";
 import { useActions } from "../../hooks/actions";
 import { FolderInterface } from "../../types/folders";
+import classNames from "classnames";
 
 export interface ContextMenuProps {
   closeContext: () => void;
@@ -33,6 +34,7 @@ const ContextMenu: React.FC<ContextMenuProps> = memo((props) => {
     Y: 0,
     set: false,
   });
+  const [animate, setAnimate] = useState(false);
   const {
     closeContext,
     contextSelected,
@@ -134,6 +136,10 @@ const ContextMenu: React.FC<ContextMenuProps> = memo((props) => {
     }
   };
 
+  useEffect(() => {
+    setAnimate(true);
+  }, []);
+
   const outterWrapperClick = (e: React.MouseEvent<HTMLDivElement>) => {
     e.stopPropagation();
     if ((e.target as HTMLDivElement).id !== "context-wrapper") {
@@ -151,15 +157,20 @@ const ContextMenu: React.FC<ContextMenuProps> = memo((props) => {
       <div
         onClick={stopPropagation}
         ref={wrapperRef}
-        className="fixed min-w-[215px] bg-white shadow-lg rounded-md z-50"
+        className={classNames(
+          "fixed min-w-[215px] bg-white shadow-lg rounded-md z-50 animate-movement",
+          {
+            "opacity-0": !animate,
+            "opacity-100": animate,
+          }
+        )}
         style={
           fixedCoords.set
             ? {
-                display: "block",
                 left: `${fixedCoords.X}px`,
                 top: `${fixedCoords.Y}px`,
               }
-            : { opacity: 0 }
+            : {}
         }
       >
         <div>

src/components/FileInfoPopup/FileInfoPopup.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../hooks/store";
 import { downloadFileAPI } from "../../api/filesAPI";
 import CloseIcon from "../../icons/CloseIcon";
@@ -29,6 +29,7 @@ const FileInfoPopup = () => {
     clickStopPropagation,
     ...contextMenuState
   } = useContextMenu();
+  const [animate, setAnimate] = useState(false);
 
   const fileExtension = getFileExtension(file.filename, 3);
 
@@ -42,7 +43,8 @@ const FileInfoPopup = () => {
   const fileSize = bytes(file.metadata.size);
 
   const closePhotoViewer = () => {
-    dispatch(resetPopupSelect());
+    setAnimate(false);
+    setTimeout(() => dispatch(resetPopupSelect()), 200);
   };
 
   const downloadItem = () => {
@@ -56,7 +58,8 @@ const FileInfoPopup = () => {
     ) {
       return;
     }
-    dispatch(resetPopupSelect());
+    setAnimate(false);
+    setTimeout(() => dispatch(resetPopupSelect()), 200);
   };
 
   const permissionText = (() => {
@@ -74,6 +77,10 @@ const FileInfoPopup = () => {
     toast.success("Filename Copied");
   };
 
+  useEffect(() => {
+    setAnimate(true);
+  }, []);
+
   useEffect(() => {
     const handleBack = () => {
       dispatch(resetPopupSelect());
@@ -136,7 +143,10 @@ const FileInfoPopup = () => {
           </div>
         </div>
       </div>
-      <div className="w-[90%] sm:w-[500px] p-6 bg-white rounded-md">
+      <div
+        className="w-[90%] sm:w-[500px] p-6 bg-white rounded-md animate-easy"
+        style={{ marginTop: !animate ? "calc(100vh + 350px" : 0 }}
+      >
         <div className="bg-light-primary p-6 rounded-md flex items-center space-x-2">
           <input
             className="rounded-md w-full text-xs h-10 p-2"

src/components/MoverPopup/MoverPopup.tsx

@@ -23,6 +23,7 @@ const MoverPopup = () => {
   const [selectedFolder, setSelectedFolder] = useState<FolderInterface | null>(
     null
   );
+  const [animate, setAnimate] = useState(false);
   const multiSelectMode = useAppSelector(
     (state) => state.selected.multiSelectMode
   );
@@ -119,6 +120,10 @@ const MoverPopup = () => {
     }
   })();
 
+  useEffect(() => {
+    setAnimate(true);
+  }, []);
+
   const onHomeClick = () => {
     setSearch("");
     setDebouncedSearch("");
@@ -175,7 +180,8 @@ const MoverPopup = () => {
   const closeMoverModal = (e: React.MouseEvent<HTMLElement>) => {
     const target = e.target as HTMLElement;
     if (target.id !== "outer-wrapper") return;
-    dispatch(resetMoveModal());
+    setAnimate(false);
+    setTimeout(() => dispatch(resetMoveModal()), 200);
   };
 
   return (
@@ -192,7 +198,10 @@ const MoverPopup = () => {
           />
         </div>
       </div>
-      <div className="bg-white w-full max-w-[500px] p-4 rounded-md">
+      <div
+        className="bg-white w-full max-w-[500px] p-4 rounded-md animate-easy"
+        style={{ marginTop: !animate ? "calc(100vh + 480px" : 0 }}
+      >
         <div
           className={classNames("flex flex-row items-center", {
             "justify-between": multiSelectMode,

src/components/SharePopup/SharePopup.tsx

@@ -29,6 +29,7 @@ const SharePopup = memo(() => {
   const dispatch = useAppDispatch();
   const { refetch: refetchFiles } = useFiles(false);
   const { refetch: refetchQuickFiles } = useQuickFiles(false);
+  const [animate, setAnimate] = useState(false);
 
   const imageColor = getFileColor(file.filename);
 
@@ -126,7 +127,8 @@ const SharePopup = memo(() => {
   };
 
   const closeShareModal = () => {
-    dispatch(resetShareModal());
+    setAnimate(false);
+    setTimeout(() => dispatch(resetShareModal()), 200);
   };
 
   const outterWrapperClick = (e: any) => {
@@ -160,6 +162,10 @@ const SharePopup = memo(() => {
     setShareType(file.metadata.linkType ? file.metadata.linkType : "private");
   }, [file._id, file.metadata.link, file.metadata.linkType]);
 
+  useEffect(() => {
+    setAnimate(true);
+  }, []);
+
   const handleSelectChange = async (value: string) => {
     if (value === "private") {
       await removeLink();
@@ -207,7 +213,10 @@ const SharePopup = memo(() => {
           </div>
         </div>
       </div>
-      <div className="w-[90%] sm:w-[500px] p-6 bg-white rounded-md">
+      <div
+        className="w-[90%] sm:w-[500px] p-6 bg-white rounded-md animate-easy"
+        style={{ marginTop: !animate ? "calc(100vh + 340px" : 0 }}
+      >
         <p>Share file</p>
         <div className="bg-light-primary p-6 rounded-md mt-4 flex items-center space-x-2">
           <input

src/styles/styles.scss

@@ -10,6 +10,10 @@
   transition: 0.2s ease all;
 }
 
+.animate-easy {
+  transition: 0.3s ease all;
+}
+
 .animate-movement {
   transition: 0.4s ease all;
 }