From d0c59a6ab583a49e0c69e1f5050cccc31f237c71 Mon Sep 17 00:00:00 2001
From: James Brunton <james@stirlingpdf.com>
Date: Mon, 8 Sep 2025 17:13:09 +0100
Subject: [PATCH] Change selector to use big buttons

---
 .../tools/redact/RedactModeSelector.tsx       | 49 ++++++++++---------
 1 file changed, 25 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/tools/redact/RedactModeSelector.tsx b/frontend/src/components/tools/redact/RedactModeSelector.tsx
index 20546dab1..b8981986c 100644
--- a/frontend/src/components/tools/redact/RedactModeSelector.tsx
+++ b/frontend/src/components/tools/redact/RedactModeSelector.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import { Select, Stack, Text } from '@mantine/core';
+import { Button, Stack, Text } from '@mantine/core';
 import { RedactMode } from '../../../hooks/tools/redact/useRedactParameters';
 
 interface RedactModeSelectorProps {
@@ -11,35 +11,36 @@ interface RedactModeSelectorProps {
 export default function RedactModeSelector({ mode, onModeChange, disabled }: RedactModeSelectorProps) {
   const { t } = useTranslation();
 
-  const modeOptions = [
-    {
-      value: 'automatic',
-      label: t('redact.modeSelector.automatic', 'Automatic'),
-      disabled: false
-    },
-    {
-      value: 'manual',
-      label: t('redact.modeSelector.manual', 'Manual'),
-      disabled: true // Disabled until implemented
-    }
-  ];
-
   return (
     <Stack gap="sm">
       <Text size="sm" fw={600}>
         {t('redact.modeSelector.title', 'Redaction Mode')}
       </Text>
 
-      <Select
-        value={mode}
-        onChange={(value) => {
-          if (value && value !== 'manual') { // Don't allow manual selection yet
-            onModeChange(value as RedactMode);
-          }
-        }}
-        disabled={disabled}
-        data={modeOptions}
-      />
+      <div style={{ display: 'flex', gap: '4px' }}>
+        <Button
+          variant={mode === 'automatic' ? 'filled' : 'outline'}
+          color={mode === 'automatic' ? 'blue' : 'var(--text-muted)'}
+          onClick={() => onModeChange('automatic')}
+          disabled={disabled}
+          style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
+        >
+          <div style={{ textAlign: 'center', lineHeight: '1.1', fontSize: '11px' }}>
+            {t('redact.modeSelector.automatic', 'Automatic')}
+          </div>
+        </Button>
+        <Button
+          variant={mode === 'manual' ? 'filled' : 'outline'}
+          color={mode === 'manual' ? 'blue' : 'var(--text-muted)'}
+          onClick={() => onModeChange('manual')}
+          disabled={disabled || true} // Keep manual disabled until implemented
+          style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
+        >
+          <div style={{ textAlign: 'center', lineHeight: '1.1', fontSize: '11px' }}>
+            {t('redact.modeSelector.manual', 'Manual')}
+          </div>
+        </Button>
+      </div>
     </Stack>
   );
 }