From 560abfb348c1643de18b50cd47d63be86622efe7 Mon Sep 17 00:00:00 2001
From: Connor Yoh <connor@stirlingpdf.com>
Date: Fri, 22 Aug 2025 16:33:02 +0100
Subject: [PATCH] File manager tweaks

---
 .../components/fileManager/FileInfoCard.tsx   | 10 +++++-----
 .../fileManager/FileSourceButtons.tsx         |  6 +++---
 .../src/components/shared/FilePreview.tsx     | 19 +++++++++++++++++--
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/fileManager/FileInfoCard.tsx b/frontend/src/components/fileManager/FileInfoCard.tsx
index f8cc84cb8..68c2a491d 100644
--- a/frontend/src/components/fileManager/FileInfoCard.tsx
+++ b/frontend/src/components/fileManager/FileInfoCard.tsx
@@ -17,7 +17,7 @@ const FileInfoCard: React.FC<FileInfoCardProps> = ({
 
   return (
     <Card withBorder p={0} h={`calc(${modalHeight} * 0.32 - 1rem)`} style={{ flex: 1, overflow: 'hidden' }}>
-      <Box bg="blue.6" p="sm" style={{ borderTopLeftRadius: 'var(--mantine-radius-md)', borderTopRightRadius: 'var(--mantine-radius-md)' }}>
+      <Box bg="gray.4" p="sm" style={{ borderTopLeftRadius: 'var(--mantine-radius-md)', borderTopRightRadius: 'var(--mantine-radius-md)' }}>
         <Text size="sm" fw={500} ta="center" c="white">
           {t('fileManager.details', 'File Details')}
         </Text>
@@ -31,7 +31,7 @@ const FileInfoCard: React.FC<FileInfoCardProps> = ({
             </Text>
           </Group>
           <Divider />
-          
+
           <Group justify="space-between" py="xs">
             <Text size="sm" c="dimmed">{t('fileManager.fileFormat', 'Format')}</Text>
             {currentFile ? (
@@ -43,7 +43,7 @@ const FileInfoCard: React.FC<FileInfoCardProps> = ({
             )}
           </Group>
           <Divider />
-          
+
           <Group justify="space-between" py="xs">
             <Text size="sm" c="dimmed">{t('fileManager.fileSize', 'Size')}</Text>
             <Text size="sm" fw={500}>
@@ -51,7 +51,7 @@ const FileInfoCard: React.FC<FileInfoCardProps> = ({
             </Text>
           </Group>
           <Divider />
-          
+
           <Group justify="space-between" py="xs">
             <Text size="sm" c="dimmed">{t('fileManager.fileVersion', 'Version')}</Text>
             <Text size="sm" fw={500}>
@@ -64,4 +64,4 @@ const FileInfoCard: React.FC<FileInfoCardProps> = ({
   );
 };
 
-export default FileInfoCard;
\ No newline at end of file
+export default FileInfoCard;
diff --git a/frontend/src/components/fileManager/FileSourceButtons.tsx b/frontend/src/components/fileManager/FileSourceButtons.tsx
index a6870a661..87496f580 100644
--- a/frontend/src/components/fileManager/FileSourceButtons.tsx
+++ b/frontend/src/components/fileManager/FileSourceButtons.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Stack, Text, Button, Group } from '@mantine/core';
 import HistoryIcon from '@mui/icons-material/History';
-import FolderIcon from '@mui/icons-material/Folder';
+import UploadIcon from '@mui/icons-material/Upload';
 import CloudIcon from '@mui/icons-material/Cloud';
 import { useTranslation } from 'react-i18next';
 import { useFileManagerContext } from '../../contexts/FileManagerContext';
@@ -48,7 +48,7 @@ const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({
       <Button
         variant="subtle"
         color='var(--mantine-color-gray-6)'
-        leftSection={<FolderIcon />}
+        leftSection={<UploadIcon />}
         justify={horizontal ? "center" : "flex-start"}
         onClick={onLocalFileClick}
         fullWidth={!horizontal}
@@ -63,7 +63,7 @@ const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({
           }
         }}
       >
-        {horizontal ? t('fileManager.localFiles', 'Local') : t('fileManager.localFiles', 'Local Files')}
+        {horizontal ? t('fileManager.uploadFiles', 'Upload') : t('fileManager.uploadFiles', 'Upload Files')}
       </Button>
       
       <Button
diff --git a/frontend/src/components/shared/FilePreview.tsx b/frontend/src/components/shared/FilePreview.tsx
index a13894040..06c55ee2d 100644
--- a/frontend/src/components/shared/FilePreview.tsx
+++ b/frontend/src/components/shared/FilePreview.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Box } from '@mantine/core';
+import { Box, Center } from '@mantine/core';
+import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
 import { FileMetadata } from '../../types/file';
 import DocumentThumbnail from './filePreview/DocumentThumbnail';
 import DocumentStack from './filePreview/DocumentStack';
@@ -38,7 +39,21 @@ const FilePreview: React.FC<FilePreviewProps> = ({
   onPrevious,
   onNext
 }) => {
-  if (!file) return null;
+  if (!file) {
+    return (
+      <Box style={{ width: '100%', height: '100%' }}>
+        <Center style={{ width: '100%', height: '100%' }}>
+          <InsertDriveFileIcon 
+            style={{ 
+              fontSize: '4rem', 
+              color: 'var(--mantine-color-gray-4)',
+              opacity: 0.6 
+            }} 
+          />
+        </Center>
+      </Box>
+    );
+  }
   
   const hasMultipleFiles = totalFiles > 1;