From dd45b0ba2d6bd9dd476aafbcc19709e078661e42 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 11:09:38 +0100
Subject: [PATCH] feat(ui): update CompressSettings and OAuth buttons for
 improved usability
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replaced `Slider` with `SliderWithInput` in `CompressSettings` for enhanced functionality
- Translated compression level tooltips and descriptions using i18n for better localization
- Switched custom `Button` in `OAuthButtons` to semantic `button` for accessibility
- Adjusted styles and interactions in `auth.css` for hover and focus states

Signed-off-by: Balázs Szücs <bszucs1209@gmail.com>
---
 .../tools/compress/CompressSettings.tsx       | 22 ++++++++-----------
 .../proprietary/routes/authShared/auth.css    | 17 ++++++++++++--
 .../proprietary/routes/login/OAuthButtons.tsx | 10 ++++-----
 3 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/frontend/src/core/components/tools/compress/CompressSettings.tsx b/frontend/src/core/components/tools/compress/CompressSettings.tsx
index 8d9fca833..bc2a31284 100644
--- a/frontend/src/core/components/tools/compress/CompressSettings.tsx
+++ b/frontend/src/core/components/tools/compress/CompressSettings.tsx
@@ -1,4 +1,5 @@
 import { Stack, Text, NumberInput, Select, Divider, Checkbox } from "@mantine/core";
+import SliderWithInput from '@app/components/shared/sliderWithInput/SliderWithInput';
 import { useTranslation } from "react-i18next";
 import { CompressParameters } from "@app/hooks/tools/compress/useCompressParameters";
 import ButtonSelector from "@app/components/shared/ButtonSelector";
@@ -32,24 +33,19 @@ const CompressSettings = ({ parameters, onParameterChange, disabled = false }: C
       {parameters.compressionMethod === 'quality' && (
         <Stack gap="sm">
           <Divider />
-          <Text size="sm" fw={500}>Compression Level</Text>
-          <Slider
-            min={1}
-            max={9}
-            step={1}
+          <SliderWithInput
+            label={t('compress.tooltip.qualityAdjustment.title', 'Compression Level')}
             value={parameters.compressionLevel}
             onChange={(value) => onParameterChange('compressionLevel', value)}
             disabled={disabled}
-            marks={[
-              { value: 1, label: 'Min 1' },
-              { value: 9, label: 'Max 9' },
-            ]}
-            label={(value) => `${value}`}
+            min={1}
+            max={9}
+            step={1}
           />
           <Text size="xs" c="dimmed" style={{ marginTop: '8px' }}>
-            {parameters.compressionLevel <= 3 && "1-3 PDF compression"}
-            {parameters.compressionLevel >= 4 && parameters.compressionLevel <= 6 && "4-6 lite image compression"}
-            {parameters.compressionLevel >= 7 && "7-9 intense image compression Will dramatically reduce image quality"}
+            {parameters.compressionLevel <= 3 && t('compress.tooltip.qualityAdjustment.bullet1', '1-3 PDF compression')}
+            {parameters.compressionLevel >= 4 && parameters.compressionLevel <= 6 && t('compress.tooltip.qualityAdjustment.text', '4-6 lite image compression')}
+            {parameters.compressionLevel >= 7 && t('compress.tooltip.qualityAdjustment.bullet2', '7-9 intense image compression Will dramatically reduce image quality')}
           </Text>
         </Stack>
       )}
diff --git a/frontend/src/proprietary/routes/authShared/auth.css b/frontend/src/proprietary/routes/authShared/auth.css
index 7f75e9dda..907ffe973 100644
--- a/frontend/src/proprietary/routes/authShared/auth.css
+++ b/frontend/src/proprietary/routes/authShared/auth.css
@@ -185,8 +185,8 @@
   width: 100%;
   display: flex;
   align-items: center;
-  justify-content: center;
-  padding: 1rem 1rem; /* 16px 16px */
+  justify-content: flex-start;
+  padding: 0.75rem 1rem; /* 12px 16px */
   border: 1px solid #d1d5db;
   border-radius: 0.75rem; /* 12px */
   background-color: var(--auth-card-bg-light-only);
@@ -195,6 +195,12 @@
   color: var(--auth-text-primary-light-only);
   cursor: pointer;
   gap: 0.75rem; /* 12px */
+  font-family: inherit;
+  transition: background-color 0.2s ease;
+}
+
+.oauth-button-vertical:hover:not(:disabled) {
+  background-color: #f3f4f6;
 }
 
 .oauth-button-vertical:disabled {
@@ -202,6 +208,11 @@
   opacity: 0.6;
 }
 
+.oauth-button-vertical:focus-visible {
+  outline: 2px solid var(--auth-border-focus-light-only);
+  outline-offset: 2px;
+}
+
 .oauth-icon-small {
   width: 1.75rem; /* 28px */
   height: 1.75rem; /* 28px */
@@ -217,6 +228,8 @@
 .oauth-icon-tiny {
   width: 1.25rem; /* 20px */
   height: 1.25rem; /* 20px */
+  display: block;
+  flex-shrink: 0;
 }
 
 /* Login Header Styles */
diff --git a/frontend/src/proprietary/routes/login/OAuthButtons.tsx b/frontend/src/proprietary/routes/login/OAuthButtons.tsx
index a71667311..f0cd82dc3 100644
--- a/frontend/src/proprietary/routes/login/OAuthButtons.tsx
+++ b/frontend/src/proprietary/routes/login/OAuthButtons.tsx
@@ -65,17 +65,17 @@ export default function OAuthButtons({ onProviderClick, isSubmitting, layout = '
   return (
     <div className="oauth-container-vertical">
       {enabledProviders.map((p) => (
-        <Button
+        <button
           key={p.id}
+          type="button"
           onClick={() => onProviderClick(p.id as any)}
           disabled={isSubmitting}
           className="oauth-button-vertical"
           title={p.label}
-          variant="default"
-          leftSection={<img src={`${BASE_PATH}/Login/${p.file}`} alt={p.label} className="oauth-icon-tiny" />}
         >
-          {p.label}
-        </Button>
+          <img src={`${BASE_PATH}/Login/${p.file}`} alt={p.label} className="oauth-icon-tiny" />
+          <span>{p.label}</span>
+        </button>
       ))}
     </div>
   );