imporved mobile styling and started dependecy injection for backend

src/components/FileItem/index.jsx

@@ -187,7 +187,7 @@ const FileItem = React.memo((props) => {
     return (
       <div
         className={classNames(
-          "border rounded-md o transition-all duration-400 ease-in-out cursor-pointer flex items-center justify-center flex-col h-[125px] sm:h-[150px] animiate hover:border-[#3c85ee] overflow-hidden bg-white",
+          "border rounded-md o transition-all duration-400 ease-in-out cursor-pointer flex items-center justify-center flex-col h-[130px] sm:h-[150px] animiate hover:border-[#3c85ee] overflow-hidden bg-white ",
           elementSelected || elementMultiSelected
             ? "border-[#3c85ee]"
             : "border-[#ebe9f9]"
@@ -262,7 +262,7 @@ const FileItem = React.memo((props) => {
         >
           <p
             className={classNames(
-              "m-0 text-[14px] leading-[16px] font-normal max-w-full overflow-hidden text-ellipsis whitespace-nowrap animate",
+              "text-[14px] leading-[16px] font-normal max-w-full overflow-hidden text-ellipsis whitespace-nowrap animate mb-1 sm:mb-0",
               elementSelected || elementMultiSelected
                 ? "text-white"
                 : "text-[#212b36]"

src/components/Files/index.jsx

@@ -119,7 +119,7 @@ const Files = memo(() => {
             <thead>
               <tr>
                 <th>
-                  <div className="flex flex-row items-center mb-2 ml-4">
+                  <div className="flex flex-row items-center mb-2">
                     <p className="text-[#212b36] text-sm font-medium">Name</p>
                   </div>
                 </th>

src/components/Header/index.tsx

@@ -4,9 +4,11 @@ import MenuIcon from "../../icons/MenuIcon";
 import { useAppDispatch, useAppSelector } from "../../hooks/store";
 import { useCallback, useMemo } from "react";
 import { toggleDrawer } from "../../reducers/leftSection";
+import { useUtils } from "../../hooks/utils";
 
 const Header = () => {
   const drawerOpen = useAppSelector((state) => state.leftSection.drawOpen);
+  const { isSettings } = useUtils();
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
 
@@ -28,15 +30,17 @@ const Header = () => {
             <img className="w-[35px]" src="/images/icon.png" alt="logo" />
           </a>
         </div>
-        <div className="items-center flex desktopMode:hidden mr-4">
-          <a className="inline-flex items-center justify-center cursor-pointer">
-            <MenuIcon
-              id="menu-icon"
-              onClick={toggleDrawerClick}
-              className="text-[#3c85ee] w-[35px]"
-            />
-          </a>
-        </div>
+        {!isSettings && (
+          <div className="items-center flex desktopMode:hidden mr-4">
+            <a className="inline-flex items-center justify-center cursor-pointer">
+              <MenuIcon
+                id="menu-icon"
+                onClick={toggleDrawerClick}
+                className="text-[#3c85ee] w-[35px]"
+              />
+            </a>
+          </div>
+        )}
         <SearchBar />
         <div className="justify-end w-[260px] hidden desktopMode:flex">
           <div>

src/components/LeftSection/index.jsx

@@ -71,7 +71,7 @@ const LeftSection = (props) => {
     [closeDrawer, leftSectionOpen]
   );
 
-  const { wrapperRef } = useClickOutOfBounds(closeDrawerEvent);
+  const { wrapperRef } = useClickOutOfBounds(closeDrawerEvent, leftSectionOpen);
 
   return (
     <div

src/components/QuickAccess/index.jsx

@@ -44,8 +44,8 @@ const QuickAccess = memo(() => {
             ? "justify-center xs:justify-normal"
             : "justify-normal",
           {
-            "max-h-32 sm:max-h-40": !quickAccessExpanded,
-            "max-h-[700px] sm:max-h-[665px] quickAccessOne:max-h-[1000px] quickAccessTwo:max-h-[660px] quickAccessThree:max-h-[490px]":
+            "max-h-36 sm:max-h-40": !quickAccessExpanded,
+            "max-h-[720px] sm:max-h-[665px] quickAccessOne:max-h-[1000px] quickAccessTwo:max-h-[660px] quickAccessThree:max-h-[490px]":
               quickAccessExpanded,
           }
         )}

src/components/QuickAccessItem/index.tsx

@@ -98,7 +98,7 @@ const QuickAccessItem = memo((props: QuickAccessItemProps) => {
   return (
     <div
       className={classNames(
-        "border rounded-md o transition-all duration-400 ease-in-out cursor-pointer flex items-center justify-center flex-col h-[125px] sm:h-[150px] animiate hover:border-[#3c85ee] overflow-hidden bg-white",
+        "border rounded-md o transition-all duration-400 ease-in-out cursor-pointer flex items-center justify-center flex-col h-[130px] sm:h-[150px] animiate hover:border-[#3c85ee] overflow-hidden bg-white",
         elementSelected || elementMultiSelected
           ? "border-[#3c85ee]"
           : "border-[#ebe9f9]"
@@ -169,7 +169,7 @@ const QuickAccessItem = memo((props: QuickAccessItemProps) => {
       >
         <p
           className={classNames(
-            "m-0 text-[14px] leading-[16px] font-normal max-w-full overflow-hidden text-ellipsis whitespace-nowrap animate",
+            "text-[14px] leading-[16px] font-normal max-w-full overflow-hidden text-ellipsis whitespace-nowrap animate mb-1 sm:mb-0",
             elementSelected || elementMultiSelected
               ? "text-white"
               : "text-[#212b36]"

src/components/UploadItem/UploadItem.jsx

@@ -17,6 +17,7 @@ const UploadItem = (props) => {
     if (completed && !filesRefreshed.current) {
       invalidateFilesCache();
       invalidateQuickFilesCache();
+      filesRefreshed.current = true;
     }
   }, [completed]);