Feature/v2/watermark (#4215)

Add watermark feature

Auto scroll on review

---------

Co-authored-by: Connor Yoh <connor@stirlingpdf.com>

frontend/src/components/shared/FileUploadButton.tsx

@@ -0,0 +1,45 @@
+import React, { useRef } from "react";
+import { FileButton, Button } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+
+interface FileUploadButtonProps {
+  file?: File;
+  onChange: (file: File | null) => void;
+  accept?: string;
+  disabled?: boolean;
+  placeholder?: string;
+  variant?: "outline" | "filled" | "light" | "default" | "subtle" | "gradient";
+  fullWidth?: boolean;
+}
+
+const FileUploadButton = ({
+  file,
+  onChange,
+  accept = "*/*",
+  disabled = false,
+  placeholder,
+  variant = "outline",
+  fullWidth = true
+}: FileUploadButtonProps) => {
+  const { t } = useTranslation();
+  const resetRef = useRef<() => void>(null);
+
+  const defaultPlaceholder = t('chooseFile', 'Choose File');
+
+  return (
+    <FileButton
+      resetRef={resetRef}
+      onChange={onChange}
+      accept={accept}
+      disabled={disabled}
+    >
+      {(props) => (
+        <Button {...props} variant={variant} fullWidth={fullWidth}>
+          {file ? file.name : (placeholder || defaultPlaceholder)}
+        </Button>
+      )}
+    </FileButton>
+  );
+};
+
+export default FileUploadButton;

frontend/src/components/shared/Tooltip.tsx

@@ -2,7 +2,8 @@ import React, { useState, useRef, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { isClickOutside, addEventListenerWithCleanup } from '../../utils/genericUtils';
 import { useTooltipPosition } from '../../hooks/useTooltipPosition';
-import { TooltipContent, TooltipTip } from './tooltip/TooltipContent';
+import { TooltipTip } from '../../types/tips';
+import { TooltipContent } from './tooltip/TooltipContent';
 import { useSidebarContext } from '../../contexts/SidebarContext';
 import styles from './tooltip/Tooltip.module.css'
 

frontend/src/components/shared/tooltip/TooltipContent.tsx

@@ -1,12 +1,6 @@
 import React from 'react';
 import styles from './Tooltip.module.css';
-
-export interface TooltipTip {
-  title?: string;
-  description?: string;
-  bullets?: string[];
-  body?: React.ReactNode;
-}
+import { TooltipTip } from '../../../types/tips';
 
 interface TooltipContentProps {
   content?: React.ReactNode;