feat(ui): refine CompressSettings and OAuth buttons for usability and localization

- Added translated compression level tooltips in `translation.json`
- Updated `CompressSettings` to utilize new i18n keys for dynamic text rendering
- Enhanced `SliderWithInput` with a customizable suffix for flexible labeling
- Replaced buttons in `OAuthButtons` with Mantine's `Button` for better accessibility and styling

Signed-off-by: Balázs Szücs <bszucs1209@gmail.com>

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

@@ -3655,6 +3655,11 @@
         "text": "Select this option to convert all images to black and white, which can significantly reduce file size especially for scanned PDFs or image-heavy documents."
       }
     },
+    "compressionLevel": {
+      "range1to3": "Lower values preserve quality but result in larger files",
+      "range4to6": "Medium compression with moderate quality reduction",
+      "range7to9": "Higher values reduce file size significantly but may reduce image clarity"
+    },
     "error": {
       "failed": "An error occurred while compressing the PDF."
     },

frontend/src/core/components/shared/sliderWithInput/SliderWithInput.tsx

@@ -8,6 +8,7 @@ interface Props {
   min?: number;
   max?: number;
   step?: number;
+  suffix?: string;
 }
 
 export default function SliderWithInput({
@@ -18,10 +19,11 @@ export default function SliderWithInput({
   min = 0,
   max = 200,
   step = 1,
+  suffix = '%',
 }: Props) {
   return (
     <div>
-      <Text size="sm" fw={600} mb={4}>{label}: {Math.round(value)}%</Text>
+      <Text size="sm" fw={600} mb={4}>{label}: {Math.round(value)}{suffix}</Text>
       <Group gap="sm" align="center">
         <div style={{ flex: 1 }}>
           <Slider min={min} max={max} step={step} value={value} onChange={onChange} disabled={disabled} />

frontend/src/core/components/tools/compress/CompressSettings.tsx

@@ -41,11 +41,12 @@ const CompressSettings = ({ parameters, onParameterChange, disabled = false }: C
             min={1}
             max={9}
             step={1}
+            suffix=""
           />
           <Text size="xs" c="dimmed" style={{ marginTop: '8px' }}>
-            {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')}
+            {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>
         </Stack>
       )}

frontend/src/proprietary/routes/login/OAuthButtons.tsx

@@ -89,17 +89,18 @@ export default function OAuthButtons({ onProviderClick, isSubmitting, layout = '
   return (
     <div className="oauth-container-vertical">
       {providers.map((p) => (
-        <button
-          key={p.id}
-          type="button"
-          onClick={() => onProviderClick(p.id as any)}
-          disabled={isSubmitting}
-          className="oauth-button-vertical"
-          title={p.label}
-        >
-          <img src={`${BASE_PATH}/Login/${p.file}`} alt={p.label} className="oauth-icon-tiny" />
-          <span>{p.label}</span>
-        </button>
+        <div key={p.id} title={`${t('login.signInWith', 'Sign in with')} ${p.label}`}>
+          <Button
+            onClick={() => onProviderClick(p.id as any)}
+            disabled={isSubmitting}
+            className="oauth-button-vertical"
+            aria-label={`${t('login.signInWith', 'Sign in with')} ${p.label}`}
+            variant="default"
+          >
+            <img src={`${BASE_PATH}/Login/${p.file}`} alt={p.label} className="oauth-icon-tiny" />
+            <span>{p.label}</span>
+          </Button>
+        </div>
       ))}
     </div>
   );