UI updates

frontend/src/app/drive/global/page.tsx

@@ -4,7 +4,7 @@ import { FileActionButtons, FileTable } from "@/components/common/FileTable";
 import { FileDropZone } from "@/components/Files/FileDropZone";
 import { NoUploadsPlaceholder } from "@/components/Files/NoUploadsPlaceholder";
 import { ApiService } from "@/services/api";
-import { useCallback, useEffect, useState } from "react";
+import { Fragment, useCallback, useEffect, useState } from "react";
 import { UploadingObjects } from "../../../components/Files/UploadingObjects";
 import { ObjectSummary } from "../../../models/UploadedObjectMetadata";
 import { LoaderCircle } from "lucide-react";
@@ -42,11 +42,10 @@ export default function Page() {
   return (
     <div className="flex w-full">
       <div className="w-full flex flex-col gap-4">
-        <div className="flex justify-between items-center gap-4">
-          <div className="flex-1">
-            <FileDropZone />
+        <div className="w-full flex justify-start items-center gap-4">
+          <div className="w-full max-w-md">
+            <SearchBar scope="global" />
           </div>
-          <SearchBar scope="global" />
         </div>
         <div className="">
           <UploadingObjects />

frontend/src/app/drive/layout.tsx

@@ -116,7 +116,7 @@ export default function AppLayout({
                 />
               )}
             </aside>
-            <main className="flex-1 overflow-auto p-6">{children}</main>
+            <main className="flex-1 overflow-auto p-6 flex">{children}</main>
           </UserEnsurer>
         </div>
       </div>

frontend/src/app/drive/page.tsx

@@ -43,10 +43,10 @@ export default function Page() {
     <div className="flex w-full">
       <div className="w-full flex flex-col gap-4">
         <div className="flex justify-between items-center gap-4">
+          <SearchBar scope="user" />
           <div className="flex-1">
             <FileDropZone />
           </div>
-          <SearchBar scope="user" />
         </div>
         <div className="">
           <UploadingObjects />

frontend/src/components/SharedFiles/NoSharedFilesPlaceholder.tsx

@@ -2,10 +2,11 @@ export const NoSharedFilesPlaceholder = () => {
   return (
     <div className="max-w-2xl mx-auto p-6 bg-white rounded-lg">
       <h2 className="text-2xl font-bold mb-4 text-center">
-        No shared with you files yet
+        No files have been shared with you yet
       </h2>
       <p className="text-center mb-6">
-        Share files with others by clicking the share button on the top right
+        Share files with others by clicking the share button on any of your
+        files.
       </p>
     </div>
   );

frontend/src/components/SharedFiles/index.tsx

@@ -26,7 +26,6 @@ export const SharedFiles = ({
   return (
     <div className="flex w-full">
       <div className="w-full flex flex-col gap-4">
-        <FileDropZone />
         <div className="">
           <UploadingObjects />
           {objects === null && (

frontend/src/components/TrashFiles/NoFilesInTrashPlaceholder.tsx

@@ -2,9 +2,7 @@ export const NoFilesInTrashPlaceholder = () => {
   return (
     <div className="max-w-2xl mx-auto p-6 bg-white rounded-lg">
       <h2 className="text-2xl font-bold mb-4 text-center">No files in trash</h2>
-      <p className="text-center mb-6">
-        Files you mark as deleted will appear here.
-      </p>
+      <p className="text-center mb-6">Files you remove will appear here.</p>
     </div>
   );
 };

frontend/src/components/UploadedObjectInformation/index.tsx

@@ -2,11 +2,10 @@ import {
   OwnerRole,
   UploadedObjectMetadata,
 } from "../../models/UploadedObjectMetadata";
-import { getTypeFromMetadata, handleFileDownload } from "../../utils/file";
+import { getTypeFromMetadata } from "../../utils/file";
 import { useUserStore } from "../../states/user";
 import { useCallback, useMemo, useState } from "react";
 import { Button } from "../common/Button";
-import { ApiService } from "../../services/api";
 import { ObjectShareModal } from "../Files/ObjectShareModal";
 import { ObjectDeleteModal } from "../Files/ObjectDeleteModal";
 import { Loader } from "lucide-react";
@@ -98,7 +97,7 @@ export const UploadedObjectInformation = ({
           onClick={handleDelete}
           disabled={!hasFileOwnership}
         >
-          Delete
+          Remove
         </Button>
       </div>
       <span className="text-xl font-semibold ml-2">Metadata</span>
@@ -179,7 +178,6 @@ export const UploadedObjectInformation = ({
       <div className="grid grid-cols-2 gap-y-2 gap-x-4 text-primary font-medium bg-gray-50 p-4 rounded-lg">
         {owners?.map((o) => (
           <div className="flex">
-            <span>{o.role.charAt(0).toUpperCase() + o.role.slice(1)}</span>
             <span className="ml-[4px]">{o.publicId}</span>
           </div>
         ))}