From 3ae2946d57a15872ebce550419fdba28882b104e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20Sz=C3=BCcs?=
 <127139797+balazs-szucs@users.noreply.github.com>
Date: Thu, 13 Nov 2025 12:59:11 +0100
Subject: [PATCH] [V2] refactor(ui): migrate compress/booklet/sign-up to
 Mantine Checkbox (#4886)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Description of Changes
- Updated `BookletImpositionSettings` to use Mantine's `Checkbox` for
better UI consistency
- Replaced manual checkbox implementations with Mantine's `Checkbox` in
`CompressSettings`
- Added labels and tooltips for enhanced accessibility and usability

### Before:

<img width="225" height="347" alt="image"
src="https://github.com/user-attachments/assets/2bc2e5bd-33e8-40c3-8957-8ed461f7f397"
/>
<img width="225" height="347" alt="image"
src="https://github.com/user-attachments/assets/04425759-f05d-4a41-829e-30cc8febcc59"
/>
<img width="225" height="347" alt="image"
src="https://github.com/user-attachments/assets/a25122ab-377b-48a0-9692-7548e4cb2100"
/>
<img width="225" height="347" alt="image"
src="https://github.com/user-attachments/assets/bb206b71-9252-4bba-8627-d211de21d404"
/>



### After:

<img width="225" height="347" alt="image"
src="https://github.com/user-attachments/assets/3d797372-a97b-4a6b-94f7-8478cea3776e"
/>
<img width="225" height="347" alt="image"
src="https://github.com/user-attachments/assets/310bbc9b-60e7-4e00-b8f2-e2290d20b307"
/>

<img width="225" height="397" alt="image"
src="https://github.com/user-attachments/assets/207f9b1d-5f2d-4c67-a97d-74dece3adef7"
/>
<img width="225" height="397" alt="image"
src="https://github.com/user-attachments/assets/ee3889eb-5494-4763-993e-76dbd0aa4c26"
/>

<!--
Please provide a summary of the changes, including:

- What was changed
- Why the change was made
- Any challenges encountered

Closes #(issue_number)
-->

---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### Translations (if applicable)

- [ ] I ran
[`scripts/counter_translation.py`](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/docs/counter_translation.md)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.

---------

Signed-off-by: Balázs Szücs <bszucs1209@gmail.com>
---
 .../BookletImpositionSettings.tsx             | 147 +++++++++---------
 .../tools/compress/CompressSettings.tsx       |  20 +--
 .../proprietary/routes/signup/SignupForm.tsx  |  20 +--
 3 files changed, 90 insertions(+), 97 deletions(-)

diff --git a/frontend/src/core/components/tools/bookletImposition/BookletImpositionSettings.tsx b/frontend/src/core/components/tools/bookletImposition/BookletImpositionSettings.tsx
index f0c76f04c..d9c668229 100644
--- a/frontend/src/core/components/tools/bookletImposition/BookletImpositionSettings.tsx
+++ b/frontend/src/core/components/tools/bookletImposition/BookletImpositionSettings.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Stack, Text, Divider, Collapse, Button, NumberInput } from "@mantine/core";
+import { Stack, Text, Divider, Collapse, Button, NumberInput, Checkbox } from "@mantine/core";
 import { BookletImpositionParameters } from "@app/hooks/tools/bookletImposition/useBookletImpositionParameters";
 import ButtonSelector from "@app/components/shared/ButtonSelector";
 
@@ -21,28 +21,27 @@ const BookletImpositionSettings = ({ parameters, onParameterChange, disabled = f
 
       {/* Double Sided */}
       <Stack gap="sm">
-        <label
-          style={{ display: 'flex', alignItems: 'center', gap: 'var(--mantine-spacing-xs)' }}
-          title={t('bookletImposition.doubleSided.tooltip', 'Creates both front and back sides for proper booklet printing')}
-        >
-          <input
-            type="checkbox"
-            checked={parameters.doubleSided}
-            onChange={(e) => {
-              const isDoubleSided = e.target.checked;
-              onParameterChange('doubleSided', isDoubleSided);
-              // Reset to BOTH when turning double-sided back on
-              if (isDoubleSided) {
-                onParameterChange('duplexPass', 'BOTH');
-              } else {
-                // Default to FIRST pass when going to manual duplex
-                onParameterChange('duplexPass', 'FIRST');
-              }
-            }}
-            disabled={disabled}
-          />
-          <Text size="sm">{t('bookletImposition.doubleSided.label', 'Double-sided printing')}</Text>
-        </label>
+        <Checkbox
+          checked={parameters.doubleSided}
+          onChange={(event) => {
+            const isDoubleSided = event.currentTarget.checked;
+            onParameterChange('doubleSided', isDoubleSided);
+            // Reset to BOTH when turning double-sided back on
+            if (isDoubleSided) {
+              onParameterChange('duplexPass', 'BOTH');
+            } else {
+              // Default to FIRST pass when going to manual duplex
+              onParameterChange('duplexPass', 'FIRST');
+            }
+          }}
+          disabled={disabled}
+          label={
+            <div>
+              <Text size="sm">{t('bookletImposition.doubleSided.label', 'Double-sided printing')}</Text>
+              <Text size="xs" c="dimmed">{t('bookletImposition.doubleSided.tooltip', 'Creates both front and back sides for proper booklet printing')}</Text>
+            </div>
+          }
+        />
 
         {/* Manual Duplex Pass Selection - only show when double-sided is OFF */}
         {!parameters.doubleSided && (
@@ -90,47 +89,44 @@ const BookletImpositionSettings = ({ parameters, onParameterChange, disabled = f
         <Collapse in={advancedOpen}>
           <Stack gap="md" mt="md">
             {/* Right-to-Left Binding */}
-            <label
-              style={{ display: 'flex', alignItems: 'center', gap: 'var(--mantine-spacing-xs)' }}
-              title={t('bookletImposition.rtlBinding.tooltip', 'For Arabic, Hebrew, or other right-to-left languages')}
-            >
-              <input
-                type="checkbox"
-                checked={parameters.spineLocation === 'RIGHT'}
-                onChange={(e) => onParameterChange('spineLocation', e.target.checked ? 'RIGHT' : 'LEFT')}
-                disabled={disabled}
-              />
-              <Text size="sm">{t('bookletImposition.rtlBinding.label', 'Right-to-left binding')}</Text>
-            </label>
+            <Checkbox
+              checked={parameters.spineLocation === 'RIGHT'}
+              onChange={(event) => onParameterChange('spineLocation', event.currentTarget.checked ? 'RIGHT' : 'LEFT')}
+              disabled={disabled}
+              label={
+                <div>
+                  <Text size="sm">{t('bookletImposition.rtlBinding.label', 'Right-to-left binding')}</Text>
+                  <Text size="xs" c="dimmed">{t('bookletImposition.rtlBinding.tooltip', 'For Arabic, Hebrew, or other right-to-left languages')}</Text>
+                </div>
+              }
+            />
 
             {/* Add Border Option */}
-            <label
-              style={{ display: 'flex', alignItems: 'center', gap: 'var(--mantine-spacing-xs)' }}
-              title={t('bookletImposition.addBorder.tooltip', 'Adds borders around each page section to help with cutting and alignment')}
-            >
-              <input
-                type="checkbox"
-                checked={parameters.addBorder}
-                onChange={(e) => onParameterChange('addBorder', e.target.checked)}
-                disabled={disabled}
-              />
-              <Text size="sm">{t('bookletImposition.addBorder.label', 'Add borders around pages')}</Text>
-            </label>
+            <Checkbox
+              checked={parameters.addBorder}
+              onChange={(event) => onParameterChange('addBorder', event.currentTarget.checked)}
+              disabled={disabled}
+              label={
+                <div>
+                  <Text size="sm">{t('bookletImposition.addBorder.label', 'Add borders around pages')}</Text>
+                  <Text size="xs" c="dimmed">{t('bookletImposition.addBorder.tooltip', 'Adds borders around each page section to help with cutting and alignment')}</Text>
+                </div>
+              }
+            />
 
             {/* Gutter Margin */}
             <Stack gap="xs">
-              <label
-                style={{ display: 'flex', alignItems: 'center', gap: 'var(--mantine-spacing-xs)' }}
-                title={t('bookletImposition.addGutter.tooltip', 'Adds inner margin space for binding')}
-              >
-                <input
-                  type="checkbox"
-                  checked={parameters.addGutter}
-                  onChange={(e) => onParameterChange('addGutter', e.target.checked)}
-                  disabled={disabled}
-                />
-                <Text size="sm">{t('bookletImposition.addGutter.label', 'Add gutter margin')}</Text>
-              </label>
+              <Checkbox
+                checked={parameters.addGutter}
+                onChange={(event) => onParameterChange('addGutter', event.currentTarget.checked)}
+                disabled={disabled}
+                label={
+                  <div>
+                    <Text size="sm">{t('bookletImposition.addGutter.label', 'Add gutter margin')}</Text>
+                    <Text size="xs" c="dimmed">{t('bookletImposition.addGutter.tooltip', 'Adds inner margin space for binding')}</Text>
+                  </div>
+                }
+              />
 
               {parameters.addGutter && (
                 <NumberInput
@@ -147,23 +143,24 @@ const BookletImpositionSettings = ({ parameters, onParameterChange, disabled = f
             </Stack>
 
             {/* Flip on Short Edge */}
-            <label
-              style={{ display: 'flex', alignItems: 'center', gap: 'var(--mantine-spacing-xs)' }}
-              title={!parameters.doubleSided
-                ? t('bookletImposition.flipOnShortEdge.manualNote', 'Not needed in manual mode - you flip the stack yourself')
-                : t('bookletImposition.flipOnShortEdge.tooltip', 'Enable for short-edge duplex printing (automatic duplex only - ignored in manual mode)')
+            <Checkbox
+              checked={parameters.flipOnShortEdge}
+              onChange={(event) => onParameterChange('flipOnShortEdge', event.currentTarget.checked)}
+              disabled={disabled || !parameters.doubleSided}
+              label={
+                <div>
+                  <Text size="sm" c={!parameters.doubleSided ? "dimmed" : undefined}>
+                    {t('bookletImposition.flipOnShortEdge.label', 'Flip on short edge')}
+                  </Text>
+                  <Text size="xs" c="dimmed">
+                    {!parameters.doubleSided
+                      ? t('bookletImposition.flipOnShortEdge.manualNote', 'Not needed in manual mode - you flip the stack yourself')
+                      : t('bookletImposition.flipOnShortEdge.tooltip', 'Enable for short-edge duplex printing (automatic duplex only - ignored in manual mode)')
+                    }
+                  </Text>
+                </div>
               }
-            >
-              <input
-                type="checkbox"
-                checked={parameters.flipOnShortEdge}
-                onChange={(e) => onParameterChange('flipOnShortEdge', e.target.checked)}
-                disabled={disabled || !parameters.doubleSided}
-              />
-              <Text size="sm" c={!parameters.doubleSided ? "dimmed" : undefined}>
-                {t('bookletImposition.flipOnShortEdge.label', 'Flip on short edge')}
-              </Text>
-            </label>
+            />
 
             {/* Paper Size Note */}
             <Text size="xs" c="dimmed" fs="italic">
diff --git a/frontend/src/core/components/tools/compress/CompressSettings.tsx b/frontend/src/core/components/tools/compress/CompressSettings.tsx
index 7a7c93d67..398e0b7b4 100644
--- a/frontend/src/core/components/tools/compress/CompressSettings.tsx
+++ b/frontend/src/core/components/tools/compress/CompressSettings.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Stack, Text, NumberInput, Select, Divider } from "@mantine/core";
+import { Stack, Text, NumberInput, Select, Divider, Checkbox } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { CompressParameters } from "@app/hooks/tools/compress/useCompressParameters";
 import ButtonSelector from "@app/components/shared/ButtonSelector";
@@ -123,18 +123,12 @@ const CompressSettings = ({ parameters, onParameterChange, disabled = false }: C
 
       {/* Compression Options */}
       <Stack gap="sm">
-        <label
-          style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
-          title="Converts all images in the PDF to grayscale, which can significantly reduce file size while maintaining readability"
-        >
-          <input
-            type="checkbox"
-            checked={parameters.grayscale}
-            onChange={(e) => onParameterChange('grayscale', e.target.checked)}
-            disabled={disabled}
-          />
-          <Text size="sm">{t("compress.grayscale.label", "Apply Grayscale for compression")}</Text>
-        </label>
+        <Checkbox
+          checked={parameters.grayscale}
+          onChange={(event) => onParameterChange('grayscale', event.currentTarget.checked)}
+          disabled={disabled}
+          label={t("compress.grayscale.label", "Apply Grayscale for compression")}
+        />
       </Stack>
     </Stack>
   );
diff --git a/frontend/src/proprietary/routes/signup/SignupForm.tsx b/frontend/src/proprietary/routes/signup/SignupForm.tsx
index 35caf7764..9e6ac9dc0 100644
--- a/frontend/src/proprietary/routes/signup/SignupForm.tsx
+++ b/frontend/src/proprietary/routes/signup/SignupForm.tsx
@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import '@app/routes/authShared/auth.css';
 import { useTranslation } from 'react-i18next';
+import { Checkbox } from '@mantine/core';
 import { SignupFieldErrors } from '@app/routes/signup/SignupFormValidation';
 
 interface SignupFormProps {
@@ -133,19 +134,20 @@ export default function SignupForm({
       {/* Terms - only show if showTerms is true */}
       {showTerms && (
         <div className="auth-terms">
-          <input
+          <Checkbox
             id="agree"
-            type="checkbox"
             checked={agree}
-            onChange={(e) => setAgree?.(e.target.checked)}
+            onChange={(e) => setAgree?.(e.currentTarget.checked)}
             className="auth-checkbox"
+            label={
+              <span className="auth-terms-label">
+                {t("legal.iAgreeToThe", 'I agree to all of the')}{' '}
+                <a href="https://www.stirlingpdf.com/terms" target="_blank" rel="noopener noreferrer">
+                  {t('legal.terms', 'Terms and Conditions')}
+                </a>
+              </span>
+            }
           />
-          <label htmlFor="agree" className="auth-terms-label">
-            {t("legal.iAgreeToThe", 'I agree to all of the')} {" "}
-            <a href="https://www.stirlingpdf.com/terms" target="_blank" rel="noopener noreferrer">
-              {t('legal.terms', 'Terms and Conditions')}
-            </a>
-          </label>
         </div>
       )}