From 1cc5c9df3bfcde67f4b27268e68c77f6d00abea0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20Sz=C3=BCcs?= <bszucs1209@gmail.com>
Date: Fri, 14 Nov 2025 22:46:48 +0100
Subject: [PATCH] feat(ui): adjust CompressSettings and SliderWithInput for
 better readability
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Increased `Stack` gap in `CompressSettings` from `sm` to `md`
- Updated compression level descriptions with more detailed tooltips
- Adjusted label font weight and margin in `SliderWithInput` for improved presentation
- Added suffix support for numeric input in `SliderWithInput`

Signed-off-by: Balázs Szücs <bszucs1209@gmail.com>
---
 .../shared/sliderWithInput/SliderWithInput.tsx         |  5 +++--
 .../components/tools/compress/CompressSettings.tsx     | 10 +++++-----
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/frontend/src/core/components/shared/sliderWithInput/SliderWithInput.tsx b/frontend/src/core/components/shared/sliderWithInput/SliderWithInput.tsx
index 29b917871..85e7039e2 100644
--- a/frontend/src/core/components/shared/sliderWithInput/SliderWithInput.tsx
+++ b/frontend/src/core/components/shared/sliderWithInput/SliderWithInput.tsx
@@ -23,8 +23,8 @@ export default function SliderWithInput({
 }: Props) {
   return (
     <div>
-      <Text size="sm" fw={600} mb={4}>{label}: {Math.round(value)}{suffix}</Text>
-      <Group gap="sm" align="center">
+      <Text size="sm" fw={500} mb={8}>{label}</Text>
+      <Group gap="md" align="center">
         <div style={{ flex: 1 }}>
           <Slider min={min} max={max} step={step} value={value} onChange={onChange} disabled={disabled} />
         </div>
@@ -35,6 +35,7 @@ export default function SliderWithInput({
           max={max}
           step={step}
           disabled={disabled}
+          suffix={suffix}
           style={{ width: 90 }}
         />
       </Group>
diff --git a/frontend/src/core/components/tools/compress/CompressSettings.tsx b/frontend/src/core/components/tools/compress/CompressSettings.tsx
index d1deb0423..c021a50b2 100644
--- a/frontend/src/core/components/tools/compress/CompressSettings.tsx
+++ b/frontend/src/core/components/tools/compress/CompressSettings.tsx
@@ -31,7 +31,7 @@ const CompressSettings = ({ parameters, onParameterChange, disabled = false }: C
 
       {/* Quality Adjustment */}
       {parameters.compressionMethod === 'quality' && (
-        <Stack gap="sm">
+        <Stack gap="md">
           <Divider />
           <SliderWithInput
             label={t('compress.tooltip.qualityAdjustment.title', 'Compression Level')}
@@ -43,10 +43,10 @@ const CompressSettings = ({ parameters, onParameterChange, disabled = false }: C
             step={1}
             suffix=""
           />
-          <Text size="xs" c="dimmed" style={{ marginTop: '8px' }}>
-            {parameters.compressionLevel <= 3 && t('compress.compressionLevel.range1to3')}
-            {parameters.compressionLevel >= 4 && parameters.compressionLevel <= 6 && t('compress.compressionLevel.range4to6')}
-            {parameters.compressionLevel >= 7 && t('compress.compressionLevel.range7to9')}
+          <Text size="xs" c="dimmed" mt={-4}>
+            {parameters.compressionLevel <= 3 && t('compress.compressionLevel.range1to3', 'Lower values preserve quality but result in larger files')}
+            {parameters.compressionLevel >= 4 && parameters.compressionLevel <= 6 && t('compress.compressionLevel.range4to6', 'Medium compression with moderate quality reduction')}
+            {parameters.compressionLevel >= 7 && t('compress.compressionLevel.range7to9', 'Higher values reduce file size significantly but may reduce image clarity')}
           </Text>
         </Stack>
       )}