saulteafarmer/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2025-08-22 04:09:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

px -> rem

Browse Source
This commit is contained in:
Connor Yoh 2025-08-06 13:25:27 +01:00
parent 43ccb7bd2e
commit fcf7fcd9a3
5 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/fileManager/CompactFileDetails.tsx
View File

@ -38,7 +38,7 @@ const CompactFileDetails: React.FC<CompactFileDetailsProps> = ({
{/* Compact mobile layout */} {/* Compact mobile layout */}
<Box style={{ display: 'flex', gap: '0.75rem', alignItems: 'center' }}> <Box style={{ display: 'flex', gap: '0.75rem', alignItems: 'center' }}>
{/* Small preview */} {/* 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 ? ( {currentFile && thumbnail ? (
<img <img
src={thumbnail} src={thumbnail}
@ -47,7 +47,7 @@ const CompactFileDetails: React.FC<CompactFileDetailsProps> = ({
maxWidth: '100%', maxWidth: '100%',
maxHeight: '100%', maxHeight: '100%',
objectFit: 'contain', objectFit: 'contain',
borderRadius: '4px', borderRadius: '0.25rem',
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)' boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)'
}} }}
/> />
@ -81,7 +81,7 @@ const CompactFileDetails: React.FC<CompactFileDetailsProps> = ({
{/* Navigation arrows for multiple files */} {/* Navigation arrows for multiple files */}
{hasMultipleFiles && ( {hasMultipleFiles && (
<Box style={{ display: 'flex', gap: '4px' }}> <Box style={{ display: 'flex', gap: '0.25rem' }}>
<ActionIcon <ActionIcon
variant="subtle" variant="subtle"
size="sm" size="sm"

6
frontend/src/components/fileManager/DragOverlay.tsx
View File

@ -22,8 +22,8 @@ const DragOverlay: React.FC<DragOverlayProps> = ({ isVisible }) => {
right: 0, right: 0,
bottom: 0, bottom: 0,
backgroundColor: alpha(theme.colors.blue[6], 0.1), backgroundColor: alpha(theme.colors.blue[6], 0.1),
border: `2px dashed ${theme.colors.blue[6]}`, border: `0.125rem dashed ${theme.colors.blue[6]}`,
borderRadius: 30, borderRadius: '1.875rem',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
@ -32,7 +32,7 @@ const DragOverlay: React.FC<DragOverlayProps> = ({ isVisible }) => {
}} }}
> >
<Stack align="center" gap="md"> <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"> <Text size="xl" fw={500} c="blue.6">
{t('fileManager.dropFilesHere', 'Drop files here to upload')} {t('fileManager.dropFilesHere', 'Drop files here to upload')}
</Text> </Text>

8
frontend/src/components/fileManager/FileListArea.tsx
View File

@ -39,9 +39,9 @@ const FileListArea: React.FC<FileListAreaProps> = ({
> >
<Stack gap={0}> <Stack gap={0}>
{recentFiles.length === 0 ? ( {recentFiles.length === 0 ? (
<Center style={{ height: '200px' }}> <Center style={{ height: '12.5rem' }}>
<Stack align="center" gap="sm"> <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 c="dimmed" ta="center">{t('fileManager.noRecentFiles', 'No recent files')}</Text>
<Text size="xs" c="dimmed" ta="center" style={{ opacity: 0.7 }}> <Text size="xs" c="dimmed" ta="center" style={{ opacity: 0.7 }}>
{t('fileManager.dropFilesHint', 'Drop files anywhere to upload')} {t('fileManager.dropFilesHint', 'Drop files anywhere to upload')}
@ -68,9 +68,9 @@ const FileListArea: React.FC<FileListAreaProps> = ({
// Google Drive placeholder // Google Drive placeholder
return ( return (
<Center style={{ height: '200px' }}> <Center style={{ height: '12.5rem' }}>
<Stack align="center" gap="sm"> <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> <Text c="dimmed" ta="center">{t('fileManager.googleDriveNotAvailable', 'Google Drive integration coming soon')}</Text>
</Stack> </Stack>
</Center> </Center>

12
frontend/src/components/fileManager/FilePreview.tsx
View File

@ -60,7 +60,7 @@ const FilePreview: React.FC<FilePreviewProps> = ({
height: '100%', height: '100%',
backgroundColor: 'var(--mantine-color-gray-2)', backgroundColor: 'var(--mantine-color-gray-2)',
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)', 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 zIndex: 1
}} }}
/> />
@ -73,7 +73,7 @@ const FilePreview: React.FC<FilePreviewProps> = ({
height: '100%', height: '100%',
backgroundColor: 'var(--mantine-color-gray-1)', backgroundColor: 'var(--mantine-color-gray-1)',
boxShadow: '0 3px 10px rgba(0, 0, 0, 0.12)', 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 zIndex: 2
}} }}
/> />
@ -92,11 +92,11 @@ const FilePreview: React.FC<FilePreviewProps> = ({
width: 'auto', width: 'auto',
height: 'auto', height: 'auto',
boxShadow: '0 6px 16px rgba(0, 0, 0, 0.2)', boxShadow: '0 6px 16px rgba(0, 0, 0, 0.2)',
borderRadius: '8px', borderRadius: '0.5rem',
position: 'relative', position: 'relative',
zIndex: 3, zIndex: 3,
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)', 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 opacity: isAnimating ? 0.7 : 1
}} }}
/> />
@ -109,10 +109,10 @@ const FilePreview: React.FC<FilePreviewProps> = ({
position: 'relative', position: 'relative',
zIndex: 3, zIndex: 3,
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)', 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 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> </Center>
) : null} ) : null}
</Box> </Box>

4
frontend/src/components/fileManager/MobileLayout.tsx
View File

@ -45,7 +45,7 @@ const MobileLayout: React.FC = () => {
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
backgroundColor: 'var(--bg-file-list)', backgroundColor: 'var(--bg-file-list)',
borderRadius: '8px', borderRadius: '0.5rem',
border: '1px solid var(--mantine-color-gray-2)', border: '1px solid var(--mantine-color-gray-2)',
overflow: 'hidden', overflow: 'hidden',
minHeight: 0 minHeight: 0
@ -65,7 +65,7 @@ const MobileLayout: React.FC = () => {
scrollAreaStyle={{ scrollAreaStyle={{
height: calculateFileListHeight(), height: calculateFileListHeight(),
maxHeight: '60vh', maxHeight: '60vh',
minHeight: '150px', minHeight: '9.375rem',
backgroundColor: 'transparent', backgroundColor: 'transparent',
border: 'none', border: 'none',
borderRadius: 0 borderRadius: 0