diff --git a/frontend/public/branding/StirlingPDFLogoBlackText.svg b/frontend/public/branding/StirlingPDFLogoBlackText.svg new file mode 100644 index 000000000..a4a1a1f87 --- /dev/null +++ b/frontend/public/branding/StirlingPDFLogoBlackText.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/public/branding/StirlingPDFLogoGreyText.svg b/frontend/public/branding/StirlingPDFLogoGreyText.svg new file mode 100644 index 000000000..deac1ee16 --- /dev/null +++ b/frontend/public/branding/StirlingPDFLogoGreyText.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/public/branding/StirlingPDFLogoNoTextDark.svg b/frontend/public/branding/StirlingPDFLogoNoTextDark.svg new file mode 100644 index 000000000..6c99f5001 --- /dev/null +++ b/frontend/public/branding/StirlingPDFLogoNoTextDark.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/public/branding/StirlingPDFLogoNoTextLight.svg b/frontend/public/branding/StirlingPDFLogoNoTextLight.svg new file mode 100644 index 000000000..a0fa9cee5 --- /dev/null +++ b/frontend/public/branding/StirlingPDFLogoNoTextLight.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/public/branding/StirlingPDFLogoWhiteText.svg b/frontend/public/branding/StirlingPDFLogoWhiteText.svg new file mode 100644 index 000000000..ade693787 --- /dev/null +++ b/frontend/public/branding/StirlingPDFLogoWhiteText.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/src/components/shared/LandingPage.tsx b/frontend/src/components/shared/LandingPage.tsx index 977f1f280..40b765547 100644 --- a/frontend/src/components/shared/LandingPage.tsx +++ b/frontend/src/components/shared/LandingPage.tsx @@ -1,28 +1,146 @@ import React from 'react'; -import { Container, Stack, Text, Button } from '@mantine/core'; -import FolderIcon from '@mui/icons-material/FolderRounded'; -import { useFilesModalContext } from '../../contexts/FilesModalContext'; +import { Container, Text, Button, Checkbox, Group, useMantineColorScheme } from '@mantine/core'; +import { Dropzone } from '@mantine/dropzone'; +import AddIcon from '@mui/icons-material/Add'; +import { useTranslation } from 'react-i18next'; +import { useFileHandler } from '../../hooks/useFileHandler'; -interface LandingPageProps { - title: string; -} +const LandingPage = () => { + const { addMultipleFiles } = useFileHandler(); + const fileInputRef = React.useRef(null); + const { colorScheme } = useMantineColorScheme(); + const { t } = useTranslation(); + + const handleFileDrop = async (files: File[]) => { + await addMultipleFiles(files); + }; + + const handleAddFilesClick = () => { + fileInputRef.current?.click(); + }; + + const handleFileSelect = async (event: React.ChangeEvent) => { + const files = Array.from(event.target.files || []); + if (files.length > 0) { + await addMultipleFiles(files); + } + // Reset the input so the same file can be selected again + event.target.value = ''; + }; -const LandingPage = ({ title }: LandingPageProps) => { - const { openFilesModal } = useFilesModalContext(); return ( - - - - {title} - - - + Stirling PDF Logo + +
+ {/* Logo positioned absolutely in top right corner */} + + + {/* Centered content container */} +
+ {/* Stirling PDF Branding */} + + Stirling PDF + + + {/* Add Files Button */} + + + {/* Hidden file input for native file picker */} + + +
+ + {/* Instruction Text */} + + {t('fileUpload.dragFilesInOrClick', 'Drag files in or click "Add Files" to browse')} + +
+ ); }; diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css index f0fbe3ed1..1cf3581c4 100644 --- a/frontend/src/styles/theme.css +++ b/frontend/src/styles/theme.css @@ -113,6 +113,30 @@ /* Inactive icon colors for light mode */ --icon-inactive-bg: #9CA3AF; --icon-inactive-color: #FFFFFF; + + --accent-interactive: #4A90E2; + --text-instruction: #4A90E2; + --text-brand: var(--color-gray-700); + --text-brand-accent: #DC2626; + + /* container */ + --landing-paper-bg: var(--bg-surface); + --landing-inner-paper-bg: #EEF8FF; + --landing-inner-paper-border: #CDEAFF; + --landing-button-bg: var(--bg-surface); + --landing-button-color: var(--icon-tools-bg); + --landing-button-border: #E0F2F7; + --landing-button-hover-bg: rgb(251, 251, 251); + + /* drop state */ + --landing-drop-paper-bg: #E3F2FD; + --landing-drop-inner-paper-bg: #BBDEFB; + --landing-drop-inner-paper-border: #90CAF9; + + /* shadows */ + --drop-shadow-color: rgba(0, 0, 0, 0.08); + --drop-shadow-color-strong: rgba(0, 0, 0, 0.04); + --drop-shadow-filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.08)) drop-shadow(0 0.6rem 0.6rem rgba(0, 0, 0, 0.06)) drop-shadow(0 1.2rem 1rem rgba(0, 0, 0, 0.04)); } [data-mantine-color-scheme="dark"] { @@ -191,6 +215,29 @@ --tooltip-header-color: var(--text-primary); --tooltip-border: var(--border-default); + --accent-interactive: #ffffff; + --text-instruction: #ffffff; + --text-brand: var(--color-gray-800); + --text-brand-accent: #EF4444; + + /* container */ + --landing-paper-bg: #171A1F; + --landing-inner-paper-bg: var(--bg-raised); + --landing-inner-paper-border: #2D3237; + --landing-button-bg: #2B3037; + --landing-button-color: #ffffff; + --landing-button-border: #2D3237; + --landing-button-hover-bg: #4c525b; + + /* drop state */ + --landing-drop-paper-bg: #1A2332; + --landing-drop-inner-paper-bg: #2A3441; + --landing-drop-inner-paper-border: #3A4451; + + /* shadows */ + --drop-shadow-color: rgba(255, 255, 255, 0.08); + --drop-shadow-color-strong: rgba(255, 255, 255, 0.04); + --drop-shadow-filter: drop-shadow(0 0.2rem 0.4rem rgba(200, 200, 200, 0.08)) drop-shadow(0 0.6rem 0.6rem rgba(200, 200, 200, 0.06)) drop-shadow(0 1.2rem 1rem rgba(200, 200, 200, 0.04)); /* Adjust shadows for dark mode */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); @@ -200,6 +247,12 @@ --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.4); } +/* Dropzone drop state styling */ +[data-accept] .dropzone-inner { + background-color: var(--landing-drop-inner-paper-bg) !important; + border-color: var(--landing-drop-inner-paper-border) !important; +} + /* Smooth transitions for theme switching */ * { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;