Colours on document draw + translations

frontend/public/locales/en-GB/translation.json

@@ -1638,7 +1638,42 @@
     "previous": "Previous page",
     "maintainRatio": "Toggle maintain aspect ratio",
     "undo": "Undo",
-    "redo": "Redo"
+    "redo": "Redo",
+    "submit": "Sign Document",
+    "steps": {
+      "configure": "Configure Signature"
+    },
+    "type": {
+      "title": "Signature Type",
+      "draw": "Draw",
+      "canvas": "Canvas",
+      "image": "Image",
+      "text": "Text"
+    },
+    "draw": {
+      "title": "Draw your signature",
+      "clear": "Clear"
+    },
+    "image": {
+      "label": "Upload signature image",
+      "placeholder": "Select image file",
+      "hint": "Upload a PNG or JPG image of your signature"
+    },
+    "text": {
+      "name": "Signer Name",
+      "placeholder": "Enter your full name"
+    },
+    "instructions": {
+      "title": "How to add signature"
+    },
+    "activate": "Activate Signature Placement",
+    "deactivate": "Stop Placing Signatures",
+    "results": {
+      "title": "Signature Results"
+    },
+    "error": {
+      "failed": "An error occurred while signing the PDF."
+    }
   },
   "flatten": {
     "tags": "static,deactivate,non-interactive,streamline",

frontend/src/components/tools/sign/SignSettings.tsx

@@ -232,33 +232,18 @@ const SignSettings = ({ parameters, onParameterChange, disabled = false, onActiv
     }
   }, [parameters.signatureType, canvasSignatureData, imageSignatureData, onParameterChange]);
 
-  // Initialize draw mode on mount if draw type is selected
+  // Auto-activate draw mode when draw type is selected (only trigger on signatureType change)
   React.useEffect(() => {
-    console.log('SignSettings: Component mounted, initial signatureType:', parameters.signatureType);
-    if (parameters.signatureType === 'draw' && onActivateDrawMode) {
-      console.log('SignSettings: Initial activation of draw mode with delay');
-      // Add a delay to ensure the API bridge is ready
-      setTimeout(() => {
-        onActivateDrawMode();
-      }, 500);
-    }
-  }, [onActivateDrawMode]); // Only run on mount/when callback changes
-
-  // Auto-activate draw mode when draw type is selected
-  React.useEffect(() => {
-    console.log('SignSettings: signatureType changed to:', parameters.signatureType);
     if (parameters.signatureType === 'draw') {
-      console.log('SignSettings: Activating draw mode, onActivateDrawMode:', !!onActivateDrawMode);
       if (onActivateDrawMode) {
         onActivateDrawMode();
       }
     } else if (parameters.signatureType !== 'draw') {
-      console.log('SignSettings: Deactivating draw mode, onDeactivateSignature:', !!onDeactivateSignature);
       if (onDeactivateSignature) {
         onDeactivateSignature();
       }
     }
-  }, [parameters.signatureType, onActivateDrawMode, onDeactivateSignature]);
+  }, [parameters.signatureType]); // Only depend on signatureType to avoid loops
 
   // Update draw settings when color or pen size changes
   React.useEffect(() => {

frontend/src/components/viewer/SignatureAPIBridge.tsx

@@ -64,21 +64,14 @@ export const SignatureAPIBridge = forwardRef<SignatureAPI, SignatureAPIBridgePro
     },
 
     activateDrawMode: () => {
-      console.log('SignatureAPIBridge.activateDrawMode called, annotationApi:', !!annotationApi);
+      if (!annotationApi) return;
-      if (!annotationApi) {
-        console.log('No annotationApi available');
-        return;
-      }
 
-      console.log('Setting active tool to ink');
       // Activate the built-in ink tool for drawing
       annotationApi.setActiveTool('ink');
 
       // Set default ink tool properties (black color, 2px width)
       const activeTool = annotationApi.getActiveTool();
-      console.log('Active tool after setting ink:', activeTool);
       if (activeTool && activeTool.id === 'ink') {
-        console.log('Setting ink tool defaults');
         annotationApi.setToolDefaults('ink', {
           color: '#000000',
           thickness: 2

frontend/src/contexts/SignatureContext.tsx

@@ -61,14 +61,9 @@ export const SignatureProvider: React.FC<{ children: ReactNode }> = ({ children
   }, []);
 
   const activateDrawMode = useCallback(() => {
-    console.log('SignatureContext.activateDrawMode called, apiRef:', !!signatureApiRef.current);
     if (signatureApiRef.current) {
-      console.log('Calling signatureApiRef.current.activateDrawMode()');
       signatureApiRef.current.activateDrawMode();
       setPlacementMode(true);
-      console.log('Draw mode activated successfully');
-    } else {
-      console.log('signatureApiRef.current is null - cannot activate draw mode');
     }
   }, [setPlacementMode]);
 

frontend/src/tools/Sign.tsx

@@ -41,15 +41,6 @@ const Sign = (props: BaseToolProps) => {
     }
   }, [base.selectedFiles.length, setWorkbench]);
 
-  // Auto-activate draw mode when files are loaded and draw type is selected
-  useEffect(() => {
-    if (base.selectedFiles.length > 0 && base.params.parameters.signatureType === 'draw') {
-      console.log('Sign: Files loaded with draw mode, activating after delay');
-      setTimeout(() => {
-        activateDrawMode();
-      }, 1000); // Give viewer time to initialize
-    }
-  }, [base.selectedFiles.length, base.params.parameters.signatureType, activateDrawMode]);
 
   // Sync signature configuration with context
   useEffect(() => {