From fcf7fcd9a3c4825f31b804cf2c9107f81a7d03d4 Mon Sep 17 00:00:00 2001
From: Connor Yoh <connor@stirlingpdf.com>
Date: Wed, 6 Aug 2025 13:25:27 +0100
Subject: [PATCH] px -> rem

---
 .../components/fileManager/CompactFileDetails.tsx    |  6 +++---
 frontend/src/components/fileManager/DragOverlay.tsx  |  6 +++---
 frontend/src/components/fileManager/FileListArea.tsx |  8 ++++----
 frontend/src/components/fileManager/FilePreview.tsx  | 12 ++++++------
 frontend/src/components/fileManager/MobileLayout.tsx |  4 ++--
 5 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/fileManager/CompactFileDetails.tsx b/frontend/src/components/fileManager/CompactFileDetails.tsx
index 3fbc299f5..467e1e4c2 100644
--- a/frontend/src/components/fileManager/CompactFileDetails.tsx
+++ b/frontend/src/components/fileManager/CompactFileDetails.tsx
@@ -38,7 +38,7 @@ const CompactFileDetails: React.FC<CompactFileDetailsProps> = ({
       {/* Compact mobile layout */}
       <Box style={{ display: 'flex', gap: '0.75rem', alignItems: 'center' }}>
         {/* Small preview */}
-        <Box style={{ width: '120px', height: '150px', flexShrink: 0, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <Box style={{ width: '7.5rem', height: '9.375rem', flexShrink: 0, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
           {currentFile && thumbnail ? (
             <img 
               src={thumbnail} 
@@ -47,7 +47,7 @@ const CompactFileDetails: React.FC<CompactFileDetailsProps> = ({
                 maxWidth: '100%', 
                 maxHeight: '100%', 
                 objectFit: 'contain',
-                borderRadius: '4px',
+                borderRadius: '0.25rem',
                 boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)'
               }}
             />
@@ -81,7 +81,7 @@ const CompactFileDetails: React.FC<CompactFileDetailsProps> = ({
         
         {/* Navigation arrows for multiple files */}
         {hasMultipleFiles && (
-          <Box style={{ display: 'flex', gap: '4px' }}>
+          <Box style={{ display: 'flex', gap: '0.25rem' }}>
             <ActionIcon
               variant="subtle"
               size="sm"
diff --git a/frontend/src/components/fileManager/DragOverlay.tsx b/frontend/src/components/fileManager/DragOverlay.tsx
index 8b26021d6..976bb940e 100644
--- a/frontend/src/components/fileManager/DragOverlay.tsx
+++ b/frontend/src/components/fileManager/DragOverlay.tsx
@@ -22,8 +22,8 @@ const DragOverlay: React.FC<DragOverlayProps> = ({ isVisible }) => {
         right: 0,
         bottom: 0,
         backgroundColor: alpha(theme.colors.blue[6], 0.1),
-        border: `2px dashed ${theme.colors.blue[6]}`,
-        borderRadius: 30,
+        border: `0.125rem dashed ${theme.colors.blue[6]}`,
+        borderRadius: '1.875rem',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
@@ -32,7 +32,7 @@ const DragOverlay: React.FC<DragOverlayProps> = ({ isVisible }) => {
       }}
     >
       <Stack align="center" gap="md">
-        <UploadFileIcon style={{ fontSize: 64, color: theme.colors.blue[6] }} />
+        <UploadFileIcon style={{ fontSize: '4rem', color: theme.colors.blue[6] }} />
         <Text size="xl" fw={500} c="blue.6">
           {t('fileManager.dropFilesHere', 'Drop files here to upload')}
         </Text>
diff --git a/frontend/src/components/fileManager/FileListArea.tsx b/frontend/src/components/fileManager/FileListArea.tsx
index 7f78c1e83..8e1975137 100644
--- a/frontend/src/components/fileManager/FileListArea.tsx
+++ b/frontend/src/components/fileManager/FileListArea.tsx
@@ -39,9 +39,9 @@ const FileListArea: React.FC<FileListAreaProps> = ({
       >
         <Stack gap={0}>
           {recentFiles.length === 0 ? (
-            <Center style={{ height: '200px' }}>
+            <Center style={{ height: '12.5rem' }}>
               <Stack align="center" gap="sm">
-                <HistoryIcon style={{ fontSize: 48, color: 'var(--mantine-color-gray-5)' }} />
+                <HistoryIcon style={{ fontSize: '3rem', color: 'var(--mantine-color-gray-5)' }} />
                 <Text c="dimmed" ta="center">{t('fileManager.noRecentFiles', 'No recent files')}</Text>
                 <Text size="xs" c="dimmed" ta="center" style={{ opacity: 0.7 }}>
                   {t('fileManager.dropFilesHint', 'Drop files anywhere to upload')}
@@ -68,9 +68,9 @@ const FileListArea: React.FC<FileListAreaProps> = ({
 
   // Google Drive placeholder
   return (
-    <Center style={{ height: '200px' }}>
+    <Center style={{ height: '12.5rem' }}>
       <Stack align="center" gap="sm">
-        <CloudIcon style={{ fontSize: 48, color: 'var(--mantine-color-gray-5)' }} />
+        <CloudIcon style={{ fontSize: '3rem', color: 'var(--mantine-color-gray-5)' }} />
         <Text c="dimmed" ta="center">{t('fileManager.googleDriveNotAvailable', 'Google Drive integration coming soon')}</Text>
       </Stack>
     </Center>
diff --git a/frontend/src/components/fileManager/FilePreview.tsx b/frontend/src/components/fileManager/FilePreview.tsx
index b6c6e3d29..f760cbebf 100644
--- a/frontend/src/components/fileManager/FilePreview.tsx
+++ b/frontend/src/components/fileManager/FilePreview.tsx
@@ -60,7 +60,7 @@ const FilePreview: React.FC<FilePreviewProps> = ({
                   height: '100%',
                   backgroundColor: 'var(--mantine-color-gray-2)',
                   boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
-                  transform: 'translate(12px, 12px) rotate(2deg)',
+                  transform: 'translate(0.75rem, 0.75rem) rotate(2deg)',
                   zIndex: 1
                 }}
               />
@@ -73,7 +73,7 @@ const FilePreview: React.FC<FilePreviewProps> = ({
                   height: '100%',
                   backgroundColor: 'var(--mantine-color-gray-1)',
                   boxShadow: '0 3px 10px rgba(0, 0, 0, 0.12)',
-                  transform: 'translate(6px, 6px) rotate(1deg)',
+                  transform: 'translate(0.375rem, 0.375rem) rotate(1deg)',
                   zIndex: 2
                 }}
               />
@@ -92,11 +92,11 @@ const FilePreview: React.FC<FilePreviewProps> = ({
                 width: 'auto', 
                 height: 'auto',
                 boxShadow: '0 6px 16px rgba(0, 0, 0, 0.2)',
-                borderRadius: '8px',
+                borderRadius: '0.5rem',
                 position: 'relative',
                 zIndex: 3,
                 transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-                transform: isAnimating ? 'scale(0.95) translateX(20px)' : 'scale(1) translateX(0)',
+                transform: isAnimating ? 'scale(0.95) translateX(1.25rem)' : 'scale(1) translateX(0)',
                 opacity: isAnimating ? 0.7 : 1
               }}
             />
@@ -109,10 +109,10 @@ const FilePreview: React.FC<FilePreviewProps> = ({
               position: 'relative',
               zIndex: 3,
               transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-              transform: isAnimating ? 'scale(0.95) translateX(20px)' : 'scale(1) translateX(0)',
+              transform: isAnimating ? 'scale(0.95) translateX(1.25rem)' : 'scale(1) translateX(0)',
               opacity: isAnimating ? 0.7 : 1
             }}>
-              <PictureAsPdfIcon style={{ fontSize: 48, color: 'var(--mantine-color-gray-6)' }} />
+              <PictureAsPdfIcon style={{ fontSize: '3rem', color: 'var(--mantine-color-gray-6)' }} />
             </Center>
           ) : null}
         </Box>
diff --git a/frontend/src/components/fileManager/MobileLayout.tsx b/frontend/src/components/fileManager/MobileLayout.tsx
index 4be5d4200..30d1ad6b9 100644
--- a/frontend/src/components/fileManager/MobileLayout.tsx
+++ b/frontend/src/components/fileManager/MobileLayout.tsx
@@ -45,7 +45,7 @@ const MobileLayout: React.FC = () => {
         display: 'flex', 
         flexDirection: 'column',
         backgroundColor: 'var(--bg-file-list)',
-        borderRadius: '8px',
+        borderRadius: '0.5rem',
         border: '1px solid var(--mantine-color-gray-2)',
         overflow: 'hidden',
         minHeight: 0
@@ -65,7 +65,7 @@ const MobileLayout: React.FC = () => {
             scrollAreaStyle={{ 
               height: calculateFileListHeight(),
               maxHeight: '60vh',
-              minHeight: '150px',
+              minHeight: '9.375rem',
               backgroundColor: 'transparent',
               border: 'none',
               borderRadius: 0