diff --git a/frontend/src/FileManager/FileManager.scss b/frontend/src/FileManager/FileManager.scss
index 117948d..d10e32f 100644
--- a/frontend/src/FileManager/FileManager.scss
+++ b/frontend/src/FileManager/FileManager.scss
@@ -39,7 +39,6 @@ svg {
font-family: var(--file-manager-font-family);
}
- border: 1px solid #dddddd;
border-radius: 8px;
position: relative;
background-color: white;
diff --git a/frontend/src/FileManager/NavigationPane/FolderTree.jsx b/frontend/src/FileManager/NavigationPane/FolderTree.jsx
index f8fee53..880d1f9 100644
--- a/frontend/src/FileManager/NavigationPane/FolderTree.jsx
+++ b/frontend/src/FileManager/NavigationPane/FolderTree.jsx
@@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react";
-import Collapsible from "react-collapsible";
+import Collapse from "../../components/Collapse/Collapse";
import { FaRegFolder, FaRegFolderOpen } from "react-icons/fa";
import { MdKeyboardArrowRight } from "react-icons/md";
import { useFileNavigation } from "../../contexts/FileNavigationContext";
@@ -44,7 +44,7 @@ const FolderTree = ({ folder }) => {
@@ -58,13 +58,13 @@ const FolderTree = ({ folder }) => {
-
+
{folder.subDirectories.map((item, index) => (
))}
-
+
);
} else {
diff --git a/frontend/src/FileManager/NavigationPane/NavigationPane.scss b/frontend/src/FileManager/NavigationPane/NavigationPane.scss
index 2fd51c9..495cd19 100644
--- a/frontend/src/FileManager/NavigationPane/NavigationPane.scss
+++ b/frontend/src/FileManager/NavigationPane/NavigationPane.scss
@@ -43,33 +43,14 @@
}
}
- .folder-rotate-down {
- animation: rotateFolderDown 0.5s linear forwards;
- }
-
- @keyframes rotateFolderDown {
- from {
- transform: rotate(0deg);
- }
+ .folder-icon-default {
+ transform: rotate(0deg);
+ transition: transform 0.5s ease-in-out;
- to {
+ &.folder-rotate-down {
transform: rotate(90deg);
}
}
-
- .folder-rotate-right {
- animation: rotateRight 0.5s linear forwards;
- }
-
- @keyframes rotateRight {
- from {
- transform: rotate(90deg);
- }
-
- to {
- transform: rotate(0deg);
- }
- }
}
.active-list-item {
diff --git a/frontend/src/components/Collapse/Collapse.jsx b/frontend/src/components/Collapse/Collapse.jsx
new file mode 100644
index 0000000..db4eab1
--- /dev/null
+++ b/frontend/src/components/Collapse/Collapse.jsx
@@ -0,0 +1,22 @@
+import { useState, useEffect } from "react";
+import { useCollapse } from "react-collapsed";
+
+const Collapse = ({ open, children }) => {
+ const [isExpanded, setExpanded] = useState(open);
+ const { getCollapseProps } = useCollapse({
+ isExpanded,
+ duration: 500,
+ });
+
+ useEffect(() => {
+ setExpanded(open);
+ }, [open, setExpanded]);
+
+ return (
+ <>
+ {children}
+
+ );
+};
+
+export default Collapse;
diff --git a/frontend/src/components/Loader/Loader.jsx b/frontend/src/components/Loader/Loader.jsx
index 25801bf..1afcbf2 100644
--- a/frontend/src/components/Loader/Loader.jsx
+++ b/frontend/src/components/Loader/Loader.jsx
@@ -1,14 +1,14 @@
+import { ImSpinner2 } from "react-icons/im";
import "./Loader.scss";
-import ReactLoading from "react-loading";
-const Loader = ({ isLoading }) => {
- if (isLoading) {
- return (
-
-
-
- );
- }
+const Loader = ({ loading = false, className }) => {
+ if (!loading) return null;
+
+ return (
+
+
+
+ );
};
export default Loader;
diff --git a/frontend/src/components/Loader/Loader.scss b/frontend/src/components/Loader/Loader.scss
index 38b4fed..d6aa031 100644
--- a/frontend/src/components/Loader/Loader.scss
+++ b/frontend/src/components/Loader/Loader.scss
@@ -1,10 +1,38 @@
-.fm-loader {
- z-index: 3;
+.loader-container {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
height: -webkit-fill-available;
width: -webkit-fill-available;
- background-color: rgba(255, 255, 255, 0.542);
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: 1000;
+}
+
+.spinner {
+ font-size: 3rem;
+ color: white;
+ animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+.upload-loading {
+ position: relative;
+ display: block;
+ background-color: transparent;
+ z-index: 0;
+
+ .spinner {
+ font-size: .9rem;
+ color: black;
+ }
}
\ No newline at end of file