From 75ff6ed4412a9fbe645dfe35befe29438dd901db Mon Sep 17 00:00:00 2001
From: Reece <reece@stirlingpdf.com>
Date: Mon, 3 Nov 2025 18:20:27 +0000
Subject: [PATCH] Ux cleanup

---
 .../annotation/shared/TextInputWithFont.tsx   | 34 ++++++++++++++++---
 .../components/tools/sign/SignSettings.tsx    | 26 ++++++++------
 2 files changed, 45 insertions(+), 15 deletions(-)

diff --git a/frontend/src/core/components/annotation/shared/TextInputWithFont.tsx b/frontend/src/core/components/annotation/shared/TextInputWithFont.tsx
index c6d9d03a9..c700d4d05 100644
--- a/frontend/src/core/components/annotation/shared/TextInputWithFont.tsx
+++ b/frontend/src/core/components/annotation/shared/TextInputWithFont.tsx
@@ -34,12 +34,18 @@ export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({
   const [fontSizeInput, setFontSizeInput] = useState(fontSize.toString());
   const fontSizeCombobox = useCombobox();
   const [isColorPickerOpen, setIsColorPickerOpen] = useState(false);
+  const [colorInput, setColorInput] = useState(textColor);
 
   // Sync font size input with prop changes
   useEffect(() => {
     setFontSizeInput(fontSize.toString());
   }, [fontSize]);
 
+  // Sync color input with prop changes
+  useEffect(() => {
+    setColorInput(textColor);
+  }, [textColor]);
+
   const fontOptions = [
     { value: 'Helvetica', label: 'Helvetica' },
     { value: 'Times-Roman', label: 'Times' },
@@ -50,6 +56,11 @@ export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({
 
   const fontSizeOptions = ['8', '12', '16', '20', '24', '28', '32', '36', '40', '48', '56', '64', '72', '80', '96', '112', '128', '144', '160', '176', '192', '200'];
 
+  // Validate hex color
+  const isValidHexColor = (color: string): boolean => {
+    return /^#[0-9A-Fa-f]{6}$/.test(color);
+  };
+
   return (
     <Stack gap="sm">
       <TextInput
@@ -136,13 +147,28 @@ export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({
           <Box>
             <TextInput
               label={t('sign.text.colorLabel', 'Text colour')}
-              value={textColor}
-              readOnly
+              value={colorInput}
+              placeholder="#000000"
               disabled={disabled}
-              onClick={() => !disabled && setIsColorPickerOpen(true)}
-              style={{ cursor: disabled ? 'default' : 'pointer', width: '100%' }}
+              onChange={(e) => {
+                const value = e.currentTarget.value;
+                setColorInput(value);
+
+                // Update color if valid hex
+                if (isValidHexColor(value)) {
+                  onTextColorChange(value);
+                }
+              }}
+              onBlur={() => {
+                // Revert to valid color on blur if invalid
+                if (!isValidHexColor(colorInput)) {
+                  setColorInput(textColor);
+                }
+              }}
+              style={{ width: '100%' }}
               rightSection={
                 <Box
+                  onClick={() => !disabled && setIsColorPickerOpen(true)}
                   style={{
                     width: 24,
                     height: 24,
diff --git a/frontend/src/core/components/tools/sign/SignSettings.tsx b/frontend/src/core/components/tools/sign/SignSettings.tsx
index 13dd1ade8..910c2727e 100644
--- a/frontend/src/core/components/tools/sign/SignSettings.tsx
+++ b/frontend/src/core/components/tools/sign/SignSettings.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect, useMemo, useRef } from 'react';
 import { useTranslation } from "react-i18next";
-import { Stack, Button, Text, Alert, SegmentedControl, Divider, ActionIcon, Tooltip } from '@mantine/core';
+import { Stack, Button, Text, Alert, SegmentedControl, Divider, ActionIcon, Tooltip, Group, Box } from '@mantine/core';
 import { SignParameters } from "@app/hooks/tools/sign/useSignParameters";
 import { SuggestedToolsSection } from "@app/components/tools/shared/SuggestedToolsSection";
 import { useSignature } from "@app/contexts/SignatureContext";
@@ -582,16 +582,20 @@ const SignSettings = ({
           {t('sign.step.placeDesc', 'Position the signature on your PDF')}
         </Text>
 
-        <DrawingControls
-          onUndo={onUndo}
-          onRedo={onRedo}
-          canUndo={historyAvailability.canUndo}
-          canRedo={historyAvailability.canRedo}
-          hasSignatureData={hasAnySignature}
-          disabled={disabled}
-          showPlaceButton={false}
-          additionalControls={placementToggleControl}
-        />
+        <Group gap="xs" wrap="nowrap" align="center">
+          <DrawingControls
+            onUndo={onUndo}
+            onRedo={onRedo}
+            canUndo={historyAvailability.canUndo}
+            canRedo={historyAvailability.canRedo}
+            hasSignatureData={hasAnySignature}
+            disabled={disabled}
+            showPlaceButton={false}
+          />
+          <Box style={{ marginLeft: 'auto' }}>
+            {placementToggleControl}
+          </Box>
+        </Group>
 
         <Alert color={placementAlert.color} title={placementAlert.title}>
           <Text size="sm">