css fixes

src/components/FileItem/index.jsx

@@ -43,11 +43,24 @@ const FileItem = React.memo((props) => {
     [file.filename]
   );
 
-  const fileClick = useCallback(() => {
+  const formattedFilename = useMemo(
+    () => capitalize(file.filename),
+    [file.filename]
+  );
+
+  const formattedCreatedDate = useMemo(
+    () => moment(file.uploadDate).format("MM/DD/YY hh:mma"),
+    [file.uploadDate]
+  );
+
+  // TODO: See if we can memoize this
+  const fileClick = () => {
     const currentDate = Date.now();
 
     if (!elementSelected) {
       dispatch(startSetSelectedItem(file._id, true, false));
+      lastSelected.current = Date.now();
+      return;
     }
 
     const isMobile = mobilecheck();
@@ -57,7 +70,7 @@ const FileItem = React.memo((props) => {
     }
 
     lastSelected.current = Date.now();
-  }, [startSetSelectedItem, dispatch, setPopupFile, mobilecheck, file._id]);
+  };
 
   if (listView) {
     return (
@@ -87,8 +100,8 @@ const FileItem = React.memo((props) => {
                 </span>
               </div>
             </span>
-            <p className="m-0 max-h-[30px] overflow-hidden whitespace-nowrap text-ellipsis block capitalize">
-              {props.file.filename}
+            <p className="m-0 max-h-[30px] overflow-hidden whitespace-nowrap text-ellipsis block">
+              {formattedFilename}
             </p>
           </div>
         </td>
@@ -96,8 +109,8 @@ const FileItem = React.memo((props) => {
           <p className="text-center">{bytes(props.file.length)}</p>
         </td>
         <td className="p-5 hidden fileListShowDetails:table-cell">
-          <p className="text-center">
-            {moment(props.file.uploadDate).format("MM/DD/YY hh:mma")}
+          <p className="text-center whitespace-nowrap">
+            {formattedCreatedDate}
           </p>
         </td>
         <td>
@@ -144,7 +157,7 @@ const FileItem = React.memo((props) => {
     return (
       <div
         className={classNames(
-          "border rounded-md o transition-all duration-400 ease-in-out cursor-pointer w-48 flex items-center justify-center flex-col h-[150px] animiate hover:border-[#3c85ee] overflow-hidden",
+          "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",
           elementSelected ? "border-[#3c85ee]" : "border-[#ebe9f9]"
         )}
         onClick={fileClick}
@@ -203,7 +216,9 @@ const FileItem = React.memo((props) => {
         <div
           className={classNames(
             "p-3 overflow-hidden text-ellipsis block w-full animate",
-            elementSelected ? "bg-[#3c85ee]" : "bg-white"
+            elementSelected
+              ? "bg-[#3c85ee] text-white"
+              : "bg-white text-[#637381]"
           )}
         >
           <p
@@ -212,15 +227,15 @@ const FileItem = React.memo((props) => {
               elementSelected ? "text-white" : "text-[#212b36]"
             )}
           >
-            {capitalize(file.filename)}
+            {formattedFilename}
           </p>
           <span
             className={classNames(
-              "m-0 text-[#637381] font-normal max-w-full whitespace-nowrap text-xs animate",
+              "m-0 text-[#637381] font-normal max-w-full whitespace-nowrap text-xs animate hidden sm:block mt-1",
               elementSelected ? "text-white" : "text-[#637381]"
             )}
           >
-            Created {moment(file.uploadDate).format("MM/DD/YY hh:mma")}
+            Created {formattedCreatedDate}
           </span>
         </div>
       </div>

src/components/Files/index.jsx

@@ -26,8 +26,8 @@ const Files = () => {
   return (
     <div className="mt-8">
       <div>
-        <div className="flex justify-between">
-          <h2 className="m-0 mb-[20px] text-[22px] font-medium">
+        <div className="flex justify-between items-center mb-[20px]">
+          <h2 className="m-0 text-[22px] font-medium">
             {search !== "" ? "Files" : "Home Files"}
           </h2>
           <div>
@@ -83,7 +83,7 @@ const Files = () => {
         </div>
 
         {!listView ? (
-          <div className="grid grid-cols-[repeat(auto-fit,minmax(185px,185px))] gap-[20px]">
+          <div className="grid grid-cols-[repeat(auto-fit,minmax(40%,45%))] xs:grid-cols-[repeat(auto-fit,minmax(185px,185px))] gap-[20px] justify-center xs:justify-normal">
             {files?.pages.map((filePage, index) => (
               <React.Fragment key={index}>
                 {filePage.map((file) => (

src/components/FolderItem/index.jsx

@@ -31,6 +31,8 @@ const FolderItem = React.memo((props) => {
 
     if (!elementSelected) {
       dispatch(startSetSelectedItem(folder._id, false, false));
+      lastSelected.current = Date.now();
+      return;
     }
 
     const isMobile = mobilecheck();
@@ -40,12 +42,19 @@ const FolderItem = React.memo((props) => {
     }
 
     lastSelected.current = Date.now();
-  }, [dispatch, startSetSelectedItem, mobilecheck, navigate, folder._id]);
+  }, [
+    dispatch,
+    startSetSelectedItem,
+    mobilecheck,
+    navigate,
+    folder._id,
+    elementSelected,
+  ]);
 
   return (
     <div
       className={classNames(
-        "p-[12px] border border-[#ebe9f9] rounded-[4px] overflow-hidden w-48 cursor-pointer animate",
+        "p-[12px] border border-[#ebe9f9] rounded-[4px] overflow-hidden cursor-pointer animate ",
         {
           "bg-[#3c85ee]": elementSelected,
         }
@@ -92,20 +101,29 @@ const FolderItem = React.memo((props) => {
       </div>
       <div
         className={classNames(
-          "mt-2",
-          elementSelected ? "text-white" : "text-black"
+          "overflow-hidden text-ellipsis block w-full animate mt-2",
+          elementSelected
+            ? "bg-[#3c85ee] text-white"
+            : "bg-white text-[#637381]"
         )}
       >
-        <p>{props.folder.name}</p>
+        <p
+          className={classNames(
+            "m-0 text-[14px] leading-[16px] font-normal max-w-full overflow-hidden text-ellipsis whitespace-nowrap animate",
+            elementSelected ? "text-white" : "text-black"
+          )}
+        >
+          {props.folder.name}
+        </p>
+        <span
+          className={classNames(
+            "m-0 font-normal max-w-full whitespace-nowrap text-xs animate hidden sm:block mt-1",
+            elementSelected ? "text-white" : "text-[#637381]"
+          )}
+        >
+          Created {moment(folder.createdAt).format("MM/DD/YY hh:mma")}
+        </span>
       </div>
-      <p
-        className={classNames(
-          "m-0 mt-2 font-normal max-w-full whitespace-nowrap text-xs animate",
-          elementSelected ? "text-white" : "text-[#637381]"
-        )}
-      >
-        Created {moment(folder.createdAt).format("MM/DD/YY hh:mma")}
-      </p>
     </div>
   );
 });

src/components/Folders/index.jsx

@@ -36,7 +36,7 @@ const Folder = () => {
     }
 
     dispatch(setSortBy(newSortBy));
-  }, [setSortBy, dispatch]);
+  }, [setSortBy, dispatch, sortBy]);
 
   const switchTypeOrderBy = useCallback(
     (e) => {
@@ -60,7 +60,7 @@ const Folder = () => {
 
       dispatch(setSortBy(newSortBy));
     },
-    [setSortBy, dispatch]
+    [setSortBy, dispatch, sortBy]
   );
 
   return (
@@ -68,8 +68,8 @@ const Folder = () => {
       className="mt-8"
       //   style={props.loading ? { display: "none" } : { display: "block" }}
     >
-      <div className="flex flex-row justify-between text-[#212b36]">
-        <h2 className="m-0 mb-[20px] text-[22px] font-medium">
+      <div className="flex flex-row mb-[20px] justify-between text-[#212b36] items-center">
+        <h2 className="m-0 text-[22px] font-medium">
           {folders?.length === 0 ? "No Folders" : "Folders"}
         </h2>
         <div className="flex flex-row items-center">
@@ -109,7 +109,7 @@ const Folder = () => {
         </div>
       </div>
 
-      <div className="grid grid-cols-[repeat(auto-fit,minmax(185px,185px))] gap-[20px]">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(40%,45%))] xs:grid-cols-[repeat(auto-fit,minmax(185px,185px))] gap-[20px] justify-center xs:justify-normal">
         {folders?.map((folder) => (
           <FolderItem folder={folder} key={folder._id} />
         ))}

src/components/QuickAccess/index.jsx

@@ -38,16 +38,14 @@ const QuickAccess = (props) => {
       </div>
 
       <div
-        className={classNames("grid gap-5 animate-movement", {
-          "max-h-40": !quickAccessExpanded,
-          "max-h-[665px] quickAccessOne:max-h-[1000px] quickAccessTwo:max-h-[660px] quickAccessThree:max-h-[490px]":
-            quickAccessExpanded,
-        })}
-        style={{
-          display: "grid",
-          gridTemplateColumns: "repeat(auto-fit, minmax(185px, 185px))",
-          gap: "20px",
-        }}
+        className={classNames(
+          "grid animate-movement grid-cols-[repeat(auto-fit,minmax(40%,45%))] xs:grid-cols-[repeat(auto-fit,minmax(185px,185px))] gap-[20px] justify-center xs:justify-normal",
+          {
+            "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,
+          }
+        )}
       >
         {quickfilesList?.map((file) => (
           <QuickAccessItem key={file._id} file={file} />

src/components/QuickAccessItem/index.jsx

@@ -43,11 +43,14 @@ const QuickAccessItem = memo((props) => {
     [file.filename]
   );
 
+  // TODO: See if we can memoize this
   const quickItemClick = () => {
     const currentDate = Date.now();
 
     if (!elementSelected) {
       dispatch(startSetSelectedItem(file._id, true, true));
+      lastSelected.current = Date.now();
+      return;
     }
 
     const isMobile = mobilecheck();
@@ -62,7 +65,7 @@ const QuickAccessItem = memo((props) => {
   return (
     <div
       className={classNames(
-        "border rounded-md o transition-all duration-400 ease-in-out cursor-pointer w-48 flex items-center justify-center flex-col h-[150px] animiate hover:border-[#3c85ee] overflow-hidden",
+        "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",
         elementSelected ? "border-[#3c85ee]" : "border-[#ebe9f9]"
       )}
       onClick={quickItemClick}
@@ -121,7 +124,9 @@ const QuickAccessItem = memo((props) => {
       <div
         className={classNames(
           "p-3 overflow-hidden text-ellipsis block w-full animate",
-          elementSelected ? "bg-[#3c85ee]" : "bg-white"
+          elementSelected
+            ? "bg-[#3c85ee] text-white"
+            : "bg-white text-[#637381]"
         )}
       >
         <p
@@ -134,7 +139,7 @@ const QuickAccessItem = memo((props) => {
         </p>
         <span
           className={classNames(
-            "m-0 text-[#637381] font-normal max-w-full whitespace-nowrap text-xs animate",
+            "text-[#637381] font-normal max-w-full whitespace-nowrap text-xs animate hidden sm:block mt-1",
             elementSelected ? "text-white" : "text-[#637381]"
           )}
         >