file info ui design

src/components/FileInfoPopup/FileInfoPopup.tsx

@@ -9,6 +9,13 @@ import { resetPopupSelect } from "../../reducers/selected";
 import { getFileColor, getFileExtension } from "../../utils/files";
 import bytes from "bytes";
 import dayjs from "dayjs";
+import LockIcon from "../../icons/LockIcon";
+import OneIcon from "../../icons/OneIcon";
+import PublicIcon from "../../icons/PublicIcon";
+import StorageIcon from "../../icons/StorageIcon";
+import CalendarIcon from "../../icons/CalendarIcon";
+import DownloadIcon from "../../icons/DownloadIcon";
+import { toast } from "react-toastify";
 
 const FileInfoPopup = () => {
   const file = useAppSelector((state) => state.selected.popupModal.file)!;
@@ -52,6 +59,21 @@ const FileInfoPopup = () => {
     dispatch(resetPopupSelect());
   };
 
+  const permissionText = (() => {
+    if (file.metadata.linkType === "one") {
+      return `Temporary`;
+    } else if (file.metadata.linkType === "public") {
+      return "Public";
+    } else {
+      return "Private";
+    }
+  })();
+
+  const copyName = () => {
+    navigator.clipboard.writeText(file.filename);
+    toast.success("Filename Copied");
+  };
+
   useEffect(() => {
     const handleBack = () => {
       dispatch(resetPopupSelect());
@@ -79,7 +101,6 @@ const FileInfoPopup = () => {
           />
         </div>
       )}
-
       <div
         className="absolute top-5 flex justify-between w-full"
         id="actions-wrapper"
@@ -115,32 +136,48 @@ const FileInfoPopup = () => {
           </div>
         </div>
       </div>
-      <div className="w-[300px] p-4 bg-white rounded-md border shadow-lg text-xs flex flex-col space-y-3">
-        <div className="flex justify-between">
-          <span className="text-gray-primary font-normal">Type</span>
-          <span className="text-black font-normal ">{fileExtension}</span>
-        </div>
-        <div className="flex justify-between">
-          <span className="text-gray-primary font-normal">Size</span>
-          <span className="text-black font-normal ">{fileSize}</span>
-        </div>
-        <div className="flex justify-between">
-          <span className="text-gray-primary font-normal ">Created</span>
-          <span className="text-black font-normal ">{formattedDate}</span>
-        </div>
-        <div className="flex justify-between">
-          <span className="text-gray-primary font-normal ">Access</span>
-          <span className="text-black font-normal ">
-            {file.metadata.link ? "Public" : "Private"}
-          </span>
-        </div>
-        <div className="flex justify-center">
-          <a
-            onClick={downloadItem}
-            className="px-5 py-2.5 inline-flex items-center justify-center border border-primary rounded-md text-primary text-sm font-medium no-underline animate mr-4 cursor-pointer hover:bg-white-hover"
+      <div className="w-[90%] sm:w-[500px] p-6 bg-white rounded-md">
+        <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"
+            value={file.filename}
+          />
+          <button
+            className="bg-primary text-white hover:bg-primary-hover text-xs w-24 min-w-20 p-1 py-3 rounded-md"
+            onClick={copyName}
           >
-            Download
-          </a>
+            Copy name
+          </button>
+        </div>
+        <p className="mt-4">File details</p>
+        <div className="mt-2 text-xs space-y-2">
+          <div className="flex flex-row items-center">
+            {!file.metadata.linkType && <LockIcon className="w-5 h-5" />}
+            {file.metadata.linkType === "one" && (
+              <OneIcon className="w-5 h-5" />
+            )}
+            {file.metadata.linkType === "public" && (
+              <PublicIcon className="w-5 h-5" />
+            )}
+            <p className="ml-2 text-gray-500">{permissionText}</p>
+          </div>
+          <div className="flex flex-row items-center">
+            <StorageIcon className="w-5 h-5" />
+            <p className="ml-2 text-gray-500">{fileSize}</p>
+          </div>
+          <div className="flex flex-row items-center" items-center>
+            <CalendarIcon className="w-5 h-5" />
+            <p className="ml-2 text-gray-500">{formattedDate}</p>
+          </div>
+          <div className="flex w-full justify-center items-center pt-4">
+            <button
+              className="bg-primary text-white hover:bg-primary-hover text-xs p-1 py-3 rounded-md flex items-center justify-center w-40 space-x-2"
+              onClick={downloadItem}
+            >
+              <DownloadIcon className="w-5 h-5" />
+              <p>Download</p>
+            </button>
+          </div>
         </div>
       </div>
     </div>

src/components/RightSection/RightSection.tsx

@@ -1,23 +1,16 @@
 import bytes from "bytes";
 import { memo, useMemo } from "react";
-import ContextMenu from "../ContextMenu/ContextMenu";
 import classNames from "classnames";
 import { useDispatch } from "react-redux";
 import { getFileColor, getFileExtension } from "../../utils/files";
-import { useContextMenu } from "../../hooks/contextMenu";
-import { useNavigate } from "react-router-dom";
 import { useAppSelector } from "../../hooks/store";
-import { resetSelected, setPopupSelect } from "../../reducers/selected";
-import { useUtils } from "../../hooks/utils";
+import { resetSelected } from "../../reducers/selected";
 import CloseIcon from "../../icons/CloseIcon";
 import FileDetailsIcon from "../../icons/FileDetailsIcon";
-import ActionsIcon from "../../icons/ActionsIcon";
 import dayjs from "dayjs";
 
 const RightSection = memo(() => {
   const selectedItem = useAppSelector((state) => state.selected.mainSection);
-  const { isTrash } = useUtils();
-  const navigate = useNavigate();
   const dispatch = useDispatch();
 
   const formattedName = useMemo(() => {
@@ -55,30 +48,10 @@ const RightSection = memo(() => {
     return getFileExtension(selectedItem.file.filename);
   })();
 
-  const {
-    onContextMenu,
-    closeContextMenu,
-    onTouchStart,
-    onTouchMove,
-    onTouchEnd,
-    clickStopPropagation,
-    ...contextMenuState
-  } = useContextMenu();
-
   const reset = () => {
     dispatch(resetSelected());
   };
 
-  const openItem = () => {
-    if (selectedItem.file) {
-      dispatch(setPopupSelect({ type: "file", file: selectedItem.file }));
-    } else if (!isTrash) {
-      navigate(`/folder/${selectedItem.id}`);
-    } else {
-      navigate(`/folder-trash/${selectedItem.id}`);
-    }
-  };
-
   const bannerBackgroundColor = (() => {
     if (selectedItem.file) {
       return getFileColor(selectedItem.file.filename);
@@ -180,35 +153,7 @@ const RightSection = memo(() => {
                 </span>
               </div>
             </div>
-            <div className="mt-[15px] flex items-center">
-              <a
-                className="w-[80px] h-[40px] inline-flex items-center justify-center border border-[#3c85ee] rounded-[4px] text-[#3c85ee] text-[15px] font-medium no-underline animate cursor-pointer hover:bg-[#f6f5fd]"
-                onClick={openItem}
-              >
-                Open
-              </a>
-              <div className="ml-[15px] px-[20px]">
-                <a
-                  className="w-[40px] h-[40px] rounded-[4px] inline-flex items-center justify-center border border-[#919eab] text-[#919eab] no-underline animate cursor-pointer"
-                  // @ts-ignore
-                  onClick={onContextMenu}
-                >
-                  <ActionsIcon className="w-[20px] h-[20px]" />
-                </a>
-              </div>
-            </div>
           </div>
-          {contextMenuState.selected && (
-            <div onClick={clickStopPropagation}>
-              <ContextMenu
-                contextSelected={contextMenuState}
-                closeContext={closeContextMenu}
-                folderMode={!selectedItem.file}
-                file={selectedItem.file}
-                folder={selectedItem.folder}
-              />
-            </div>
-          )}
         </div>
       )}
     </div>

src/components/SharePopup/SharePopup.tsx

@@ -15,7 +15,6 @@ import {
   setShareModal,
 } from "../../reducers/selected";
 import { toast } from "react-toastify";
-import dayjs from "dayjs";
 import LockIcon from "../../icons/LockIcon";
 import OneIcon from "../../icons/OneIcon";
 import PublicIcon from "../../icons/PublicIcon";
@@ -35,13 +34,6 @@ const SharePopup = memo(() => {
 
   const fileExtension = getFileExtension(file.filename, 3);
 
-  const formattedDate = useMemo(
-    () => dayjs(file.uploadDate).format("MM/DD/YYYY"),
-    [file.uploadDate]
-  );
-
-  const fileSize = bytes(file.length);
-
   const makePublic = async () => {
     try {
       setUpdating(true);

src/icons/CalendarIcon.tsx

@@ -0,0 +1,17 @@
+type CalendarIconType = React.SVGAttributes<SVGSVGElement>;
+
+const CalendarIcon: React.FC<CalendarIconType> = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      {...props}
+      fill="currentColor"
+    >
+      <title>calendar-range</title>
+      <path d="M9,10H7V12H9V10M13,10H11V12H13V10M17,10H15V12H17V10M19,3H18V1H16V3H8V1H6V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M19,19H5V8H19V19Z" />
+    </svg>
+  );
+};
+
+export default CalendarIcon;

src/icons/StorageIcon.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+type StorageIconType = React.SVGAttributes<SVGSVGElement>;
+
+const StorageIcon: React.FC<StorageIconType> = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      {...props}
+      fill="currentColor"
+    >
+      <title>database-outline</title>
+      <path d="M12 3C7.58 3 4 4.79 4 7V17C4 19.21 7.59 21 12 21S20 19.21 20 17V7C20 4.79 16.42 3 12 3M18 17C18 17.5 15.87 19 12 19S6 17.5 6 17V14.77C7.61 15.55 9.72 16 12 16S16.39 15.55 18 14.77V17M18 12.45C16.7 13.4 14.42 14 12 14C9.58 14 7.3 13.4 6 12.45V9.64C7.47 10.47 9.61 11 12 11C14.39 11 16.53 10.47 18 9.64V12.45M12 9C8.13 9 6 7.5 6 7S8.13 5 12 5C15.87 5 18 6.5 18 7S15.87 9 12 9Z" />
+    </svg>
+  );
+};
+
+export default StorageIcon;