Merge branch 'V2' into feature/V2/tooltips

2025-08-11 13:48:37 +02:00 · 2025-08-08 12:03:19 +01:00 · 2025-08-08 12:03:19 +01:00 · a18e33e360
commit a18e33e360
parent 252c5cb7b9 f4e4831c0d
7 changed files with 211 additions and 20 deletions
--- a/frontend/public/branding/StirlingPDFLogoBlackText.svg
+++ b/frontend/public/branding/StirlingPDFLogoBlackText.svg
--- a/frontend/public/branding/StirlingPDFLogoGreyText.svg
+++ b/frontend/public/branding/StirlingPDFLogoGreyText.svg
--- a/frontend/public/branding/StirlingPDFLogoNoTextDark.svg
+++ b/frontend/public/branding/StirlingPDFLogoNoTextDark.svg
@ -0,0 +1,4 @@
+<svg width="146" height="157" viewBox="0 0 146 157" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.77397 72.5462L93.6741 23.0462L94.7739 70.0462L3.77395 119.046L3.77397 72.5462Z" fill="#E6E6E6" fill-opacity="0.9"/>
+<path d="M50.774 73.5735L96.387 50.2673L142 26.961L142 71.687L50.7739 122.046L50.774 73.5735Z" fill="#E6E6E6" fill-opacity="0.8"/>
+</svg>
--- a/frontend/public/branding/StirlingPDFLogoNoTextLight.svg
+++ b/frontend/public/branding/StirlingPDFLogoNoTextLight.svg
@ -0,0 +1,4 @@
+<svg width="146" height="146" viewBox="0 0 146 146" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.77397 72.5462L93.6741 23.0462L94.7739 70.0462L3.77395 119.046L3.77397 72.5462Z" fill="#ACACAC" fill-opacity="0.3"/>
+<path d="M50.774 73.5735L96.387 50.2673L142 26.961L142 71.687L50.7739 122.046L50.774 73.5735Z" fill="#FC9999" fill-opacity="0.5"/>
+</svg>
--- a/frontend/public/branding/StirlingPDFLogoWhiteText.svg
+++ b/frontend/public/branding/StirlingPDFLogoWhiteText.svg
--- 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<HTMLInputElement>(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<HTMLInputElement>) => {
+    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 (
-    <Container size="lg" p="xl" h="100%" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-      <Stack align="center" gap="lg">
-        <Text size="xl" fw={500} c="dimmed">
-          {title}
-        </Text>
-        <Button
-          leftSection={<FolderIcon />}
-          size="lg"
-          onClick={openFilesModal}
+    <Container size="lg" p={0} h="100%" className="flex items-center justify-center" style={{ position: 'relative' }}>
+      {/* White PDF Page Background */}
+      <Dropzone
+        onDrop={handleFileDrop}
+        accept={["application/pdf", "application/zip", "application/x-zip-compressed"]}
+        multiple={true}
+        className="w-4/5 flex items-center justify-center h-[95vh]"
+        style={{
+          position: 'absolute',
+          left: '50%',
+          transform: 'translateX(-50%)',
+          bottom: 0,
+          borderRadius: '0.5rem 0.5rem 0 0',
+          filter: 'var(--drop-shadow-filter)',
+          backgroundColor: 'var(--landing-paper-bg)',
+          transition: 'background-color 0.2s ease',
+        }}
+        activateOnClick={false}
+        styles={{
+          root: {
+            '&[data-accept]': {
+              backgroundColor: 'var(--landing-drop-paper-bg)',
+            },
+          },
+        }}
+      >
+        <div
+          style={{
+            position: 'absolute',
+            top: 0,
+            right: ".5rem",
+            zIndex: 10,
+
+          }}
        >
-          Open Files
-        </Button>
-      </Stack>
+          <img
+            src={colorScheme === 'dark' ? '/branding/StirlingPDFLogoNoTextDark.svg' : '/branding/StirlingPDFLogoNoTextLight.svg'}
+            alt="Stirling PDF Logo"
+            style={{
+              width: '10rem',
+              height: 'auto',
+              pointerEvents: 'none',
+              marginTop: '-0.5rem'
+            }}
+          />
+        </div>
+        <div
+          className={`min-h-[25vh] flex flex-col items-center justify-center px-8 py-8 w-full min-w-[360px] border transition-all duration-200 dropzone-inner relative`}
+          style={{
+            borderRadius: '0.5rem',
+            backgroundColor: 'var(--landing-inner-paper-bg)',
+            borderColor: 'var(--landing-inner-paper-border)',
+            borderWidth: '1px',
+            borderStyle: 'solid',
+          }}
+        >
+          {/* Logo positioned absolutely in top right corner */}
+
+
+          {/* Centered content container */}
+          <div className="flex flex-col items-center gap-4 flex-none w-full">
+            {/* Stirling PDF Branding */}
+            <Group gap="xs" align="center">
+              <img
+                src={colorScheme === 'dark' ? '/branding/StirlingPDFLogoWhiteText.svg' : '/branding/StirlingPDFLogoGreyText.svg'}
+                alt="Stirling PDF"
+                style={{ height: '2.2rem', width: 'auto' }}
+              />
+            </Group>
+
+            {/* Add Files Button */}
+            <Button
+              style={{
+                backgroundColor: 'var(--landing-button-bg)',
+                color: 'var(--landing-button-color)',
+                border: '1px solid var(--landing-button-border)',
+                borderRadius: '2rem',
+                height: '38px',
+                width: '80%',
+                marginTop: '0.8rem',
+                marginBottom: '0.8rem',
+
+              }}
+              onClick={handleAddFilesClick}
+            >
+              <AddIcon className="text-[var(--accent-interactive)]" />
+              <span>
+                {t('fileUpload.addFiles', 'Add Files')}
+              </span>
+            </Button>
+
+            {/* Hidden file input for native file picker */}
+            <input
+              ref={fileInputRef}
+              type="file"
+              multiple
+              accept=".pdf,.zip"
+              onChange={handleFileSelect}
+              style={{ display: 'none' }}
+            />
+
+          </div>
+
+          {/* Instruction Text */}
+          <span
+            className="text-[var(--accent-interactive)]"
+            style={{ fontSize: '.8rem' }}
+          >
+            {t('fileUpload.dragFilesInOrClick', 'Drag files in or click "Add Files" to browse')}
+          </span>
+        </div>
+      </Dropzone>
    </Container>
  );
 };
--- 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;