fix buttons and formatting

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

@@ -1684,8 +1684,33 @@
     "title": "Booklet Imposition",
     "header": "Booklet Imposition",
     "submit": "Create Booklet",
+    "bookletType": {
+      "label": "Style",
+      "standard": "Standard",
+      "sideStitch": "Side Stitch",
+      "standardDesc": "Standard for saddle-stitched binding (fold in half)",
+      "sideStitchDesc": "Side stitch for binding along the edge"
+    },
+    "pagesPerSheet": {
+      "label": "Pages Per Sheet",
+      "two": "2 Pages",
+      "four": "4 Pages",
+      "twoDesc": "Two pages side by side on each sheet (most common)",
+      "fourDesc": "Four pages arranged in a 2x2 grid on each sheet"
+    },
+    "pageOrientation": {
+      "label": "Page Orientation",
+      "landscape": "Landscape",
+      "portrait": "Portrait",
+      "landscapeDesc": "A4 landscape → A5 portrait when folded (recommended, standard booklet size)",
+      "portraitDesc": "A4 portrait → A6 when folded (smaller booklet)"
+    },
+    "addBorder": {
+      "label": "Add borders around pages",
+      "tooltip": "Adds borders around each page section to help with cutting and alignment",
+      "description": "Helpful for cutting and alignment when printing"
+    },
     "files": {
-      "placeholder": "Select PDF files to create booklet impositions from"
     },
     "error": {
       "failed": "An error occurred while creating the booklet imposition."

frontend/src/components/shared/ButtonSelector.tsx

@@ -45,7 +45,10 @@ const ButtonSelector = <T extends string>({
               flex: fullWidth ? 1 : undefined,
               height: 'auto',
               minHeight: '2.5rem',
-              fontSize: 'var(--mantine-font-size-sm)'
+              fontSize: 'var(--mantine-font-size-sm)',
+              lineHeight: '1.4',
+              paddingTop: '0.5rem',
+              paddingBottom: '0.5rem'
             }}
           >
             {option.label}

frontend/src/components/tools/bookletImposition/BookletImpositionSettings.tsx

@@ -1,6 +1,8 @@
 import React from "react";
-import { Button, Stack, Text, Divider } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { Stack, Text, Divider } from "@mantine/core";
 import { BookletImpositionParameters } from "../../../hooks/tools/bookletImposition/useBookletImpositionParameters";
+import ButtonSelector from "../../shared/ButtonSelector";
 
 interface BookletImpositionSettingsProps {
   parameters: BookletImpositionParameters;
@@ -9,6 +11,7 @@ interface BookletImpositionSettingsProps {
 }
 
 const BookletImpositionSettings = ({ parameters, onParameterChange, disabled = false }: BookletImpositionSettingsProps) => {
+  const { t } = useTranslation();
 
   return (
     <Stack gap="md">
@@ -16,35 +19,20 @@ const BookletImpositionSettings = ({ parameters, onParameterChange, disabled = f
       
       {/* Booklet Type */}
       <Stack gap="sm">
-        <Text size="sm" fw={500}>Booklet Type</Text>
+        <ButtonSelector
-        <div style={{ display: 'flex', gap: '4px' }}>
+          label={t('bookletImposition.bookletType.label', 'Booklet Type')}
-          <Button
+          value={parameters.bookletType}
-            variant={parameters.bookletType === 'BOOKLET' ? 'filled' : 'outline'}
+          onChange={(value) => onParameterChange('bookletType', value)}
-            color={parameters.bookletType === 'BOOKLET' ? 'blue' : 'var(--text-muted)'}
+          options={[
-            onClick={() => onParameterChange('bookletType', 'BOOKLET')}
+            { value: 'BOOKLET', label: t('bookletImposition.bookletType.standard', 'Standard Booklet') },
-            disabled={disabled}
+            { value: 'SIDE_STITCH_BOOKLET', label: t('bookletImposition.bookletType.sideStitch', 'Side-Stitch Booklet') }
-            style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
+          ]}
-          >
+          disabled={disabled}
-            <div style={{ textAlign: 'center', lineHeight: '1.1', fontSize: '11px' }}>
+        />
-              Standard<br />Booklet
-            </div>
-          </Button>
-          <Button
-            variant={parameters.bookletType === 'SIDE_STITCH_BOOKLET' ? 'filled' : 'outline'}
-            color={parameters.bookletType === 'SIDE_STITCH_BOOKLET' ? 'blue' : 'var(--text-muted)'}
-            onClick={() => onParameterChange('bookletType', 'SIDE_STITCH_BOOKLET')}
-            disabled={disabled}
-            style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
-          >
-            <div style={{ textAlign: 'center', lineHeight: '1.1', fontSize: '11px' }}>
-              Side-Stitch<br />Booklet
-            </div>
-          </Button>
-        </div>
         <Text size="xs" c="dimmed">
-          {parameters.bookletType === 'BOOKLET' 
+          {parameters.bookletType === 'BOOKLET'
-            ? "Standard booklet for saddle-stitched binding (fold in half)"
+            ? t('bookletImposition.bookletType.standardDesc', 'Standard booklet for saddle-stitched binding (fold in half)')
-            : "Side-stitched booklet for binding along the edge"}
+            : t('bookletImposition.bookletType.sideStitchDesc', 'Side-stitched booklet for binding along the edge')}
         </Text>
       </Stack>
 
@@ -52,35 +40,20 @@ const BookletImpositionSettings = ({ parameters, onParameterChange, disabled = f
 
       {/* Pages Per Sheet */}
       <Stack gap="sm">
-        <Text size="sm" fw={500}>Pages Per Sheet</Text>
+        <ButtonSelector
-        <div style={{ display: 'flex', gap: '4px' }}>
+          label={t('bookletImposition.pagesPerSheet.label', 'Pages Per Sheet')}
-          <Button
+          value={parameters.pagesPerSheet}
-            variant={parameters.pagesPerSheet === 2 ? 'filled' : 'outline'}
+          onChange={(value) => onParameterChange('pagesPerSheet', value)}
-            color={parameters.pagesPerSheet === 2 ? 'blue' : 'var(--text-muted)'}
+          options={[
-            onClick={() => onParameterChange('pagesPerSheet', 2)}
+            { value: 2, label: t('bookletImposition.pagesPerSheet.two', '2 Pages') },
-            disabled={disabled}
+            { value: 4, label: t('bookletImposition.pagesPerSheet.four', '4 Pages') }
-            style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
+          ]}
-          >
+          disabled={disabled}
-            <div style={{ textAlign: 'center', lineHeight: '1.1', fontSize: '11px' }}>
+        />
-              2 Pages<br />Per Sheet
-            </div>
-          </Button>
-          <Button
-            variant={parameters.pagesPerSheet === 4 ? 'filled' : 'outline'}
-            color={parameters.pagesPerSheet === 4 ? 'blue' : 'var(--text-muted)'}
-            onClick={() => onParameterChange('pagesPerSheet', 4)}
-            disabled={disabled}
-            style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
-          >
-            <div style={{ textAlign: 'center', lineHeight: '1.1', fontSize: '11px' }}>
-              4 Pages<br />Per Sheet
-            </div>
-          </Button>
-        </div>
         <Text size="xs" c="dimmed">
-          {parameters.pagesPerSheet === 2 
+          {parameters.pagesPerSheet === 2
-            ? "Two pages side by side on each sheet (most common)"
+            ? t('bookletImposition.pagesPerSheet.twoDesc', 'Two pages side by side on each sheet (most common)')
-            : "Four pages arranged in a 2x2 grid on each sheet"}
+            : t('bookletImposition.pagesPerSheet.fourDesc', 'Four pages arranged in a 2x2 grid on each sheet')}
         </Text>
       </Stack>
 
@@ -88,35 +61,20 @@ const BookletImpositionSettings = ({ parameters, onParameterChange, disabled = f
 
       {/* Page Orientation */}
       <Stack gap="sm">
-        <Text size="sm" fw={500}>Page Orientation</Text>
+        <ButtonSelector
-        <div style={{ display: 'flex', gap: '4px' }}>
+          label={t('bookletImposition.pageOrientation.label', 'Page Orientation')}
-          <Button
+          value={parameters.pageOrientation}
-            variant={parameters.pageOrientation === 'LANDSCAPE' ? 'filled' : 'outline'}
+          onChange={(value) => onParameterChange('pageOrientation', value)}
-            color={parameters.pageOrientation === 'LANDSCAPE' ? 'blue' : 'var(--text-muted)'}
+          options={[
-            onClick={() => onParameterChange('pageOrientation', 'LANDSCAPE')}
+            { value: 'LANDSCAPE', label: t('bookletImposition.pageOrientation.landscape', 'Landscape') },
-            disabled={disabled}
+            { value: 'PORTRAIT', label: t('bookletImposition.pageOrientation.portrait', 'Portrait') }
-            style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
+          ]}
-          >
+          disabled={disabled}
-            <div style={{ textAlign: 'center', lineHeight: '1.1', fontSize: '11px' }}>
+        />
-              Landscape<br />(Recommended)
-            </div>
-          </Button>
-          <Button
-            variant={parameters.pageOrientation === 'PORTRAIT' ? 'filled' : 'outline'}
-            color={parameters.pageOrientation === 'PORTRAIT' ? 'blue' : 'var(--text-muted)'}
-            onClick={() => onParameterChange('pageOrientation', 'PORTRAIT')}
-            disabled={disabled}
-            style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
-          >
-            <div style={{ textAlign: 'center', lineHeight: '1.1', fontSize: '11px' }}>
-              Portrait
-            </div>
-          </Button>
-        </div>
         <Text size="xs" c="dimmed">
-          {parameters.pageOrientation === 'LANDSCAPE' 
+          {parameters.pageOrientation === 'LANDSCAPE'
-            ? "A4 landscape → A5 portrait when folded (standard booklet size)"
+            ? t('bookletImposition.pageOrientation.landscapeDesc', 'A4 landscape → A5 portrait when folded (recommended, standard booklet size)')
-            : "A4 portrait → A6 when folded (smaller booklet)"}
+            : t('bookletImposition.pageOrientation.portraitDesc', 'A4 portrait → A6 when folded (smaller booklet)')}
         </Text>
       </Stack>
 
@@ -125,8 +83,8 @@ const BookletImpositionSettings = ({ parameters, onParameterChange, disabled = f
       {/* Add Border Option */}
       <Stack gap="sm">
         <label
-          style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
+          style={{ display: 'flex', alignItems: 'center', gap: 'var(--mantine-spacing-xs)' }}
-          title="Adds borders around each page section to help with cutting and alignment"
+          title={t('bookletImposition.addBorder.tooltip', 'Adds borders around each page section to help with cutting and alignment')}
         >
           <input
             type="checkbox"
@@ -134,10 +92,10 @@ const BookletImpositionSettings = ({ parameters, onParameterChange, disabled = f
             onChange={(e) => onParameterChange('addBorder', e.target.checked)}
             disabled={disabled}
           />
-          <Text size="sm">Add borders around pages</Text>
+          <Text size="sm">{t('bookletImposition.addBorder.label', 'Add borders around pages')}</Text>
         </label>
-        <Text size="xs" c="dimmed" style={{ marginLeft: '24px' }}>
+        <Text size="xs" c="dimmed" style={{ marginLeft: 'var(--mantine-spacing-lg)' }}>
-          Helpful for cutting and alignment when printing
+          {t('bookletImposition.addBorder.description', 'Helpful for cutting and alignment when printing')}
         </Text>
       </Stack>
     </Stack>