From be2b971de66b693c16502ca0136204dff1e75163 Mon Sep 17 00:00:00 2001
From: EthanHealy01 <ethan.healy.21@gmail.com>
Date: Wed, 30 Jul 2025 14:51:02 +0100
Subject: [PATCH] change the Output settings to be hocr XML or Sandwich, fix
 dark mode / light mode theme issue for languages

---
 .../tools/ocr/LanguagePicker.module.css       | 54 +++++++++--
 .../components/tools/ocr/LanguagePicker.tsx   | 91 +++----------------
 2 files changed, 62 insertions(+), 83 deletions(-)

diff --git a/frontend/src/components/tools/ocr/LanguagePicker.module.css b/frontend/src/components/tools/ocr/LanguagePicker.module.css
index c40a821c1..7e37f5493 100644
--- a/frontend/src/components/tools/ocr/LanguagePicker.module.css
+++ b/frontend/src/components/tools/ocr/LanguagePicker.module.css
@@ -6,7 +6,7 @@
   align-items: center; /* Center align items vertically */
   height: 32px;
   border: 1px solid var(--border-default);
-  background-color: white; /* Default white background for light mode */
+  background-color: var(--mantine-color-white); /* Use Mantine color variable */
   color: var(--text-secondary);
   border-radius: var(--radius-sm);
   padding: 4px 8px;
@@ -17,7 +17,7 @@
 
 /* Dark mode background */
 [data-mantine-color-scheme="dark"] .languagePicker {
-  background-color: #2A2F36; /* Specific dark background color */
+  background-color: var(--mantine-color-dark-6); /* Use Mantine dark color instead of hardcoded */
 }
 
 .languagePicker:hover {
@@ -27,7 +27,7 @@
 
 /* Dark mode hover */
 [data-mantine-color-scheme="dark"] .languagePicker:hover {
-  background-color: #3A3F46; /* Slightly lighter hover color */
+  background-color: var(--mantine-color-dark-5); /* Use Mantine color variable */
 }
 
 .languagePicker:disabled {
@@ -44,7 +44,7 @@
 }
 
 .languagePickerDropdown {
-  background-color: white; /* Default white background for light mode */
+  background-color: var(--mantine-color-white); /* Use Mantine color variable */
   border: 1px solid var(--border-default);
   border-radius: var(--radius-sm);
   padding: 4px;
@@ -52,7 +52,7 @@
 
 /* Dark mode dropdown background */
 [data-mantine-color-scheme="dark"] .languagePickerDropdown {
-  background-color: #2A2F36;
+  background-color: var(--mantine-color-dark-6);
 }
 
 .languagePickerOption {
@@ -70,7 +70,7 @@
 
 /* Dark mode option hover */
 [data-mantine-color-scheme="dark"] .languagePickerOption:hover {
-  background-color: #3A3F46;
+  background-color: var(--mantine-color-dark-5);
 }
 
 .languagePickerOption.selected {
@@ -81,7 +81,7 @@
 /* Dark mode selected option */
 [data-mantine-color-scheme="dark"] .languagePickerOption.selected {
   background-color: var(--mantine-color-blue-8); /* Darker blue for better contrast */
-  color: white; /* White text for dark mode selected items */
+  color: var(--mantine-color-white); /* White text for dark mode selected items */
 }
 
 .languagePickerOption.selected:hover {
@@ -91,4 +91,44 @@
 /* Dark mode selected option hover */
 [data-mantine-color-scheme="dark"] .languagePickerOption.selected:hover {
   background-color: var(--mantine-color-blue-7); /* Slightly lighter on hover */
+}
+
+/* Additional helper classes for the component */
+.languagePickerTarget {
+  width: 100%;
+}
+
+.languagePickerContent {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.languagePickerText {
+  flex: 1;
+  text-align: left;
+}
+
+.languagePickerScrollArea {
+  max-height: 180px;
+  border-bottom: 1px solid var(--border-default);
+  padding-bottom: 8px;
+}
+
+.languagePickerFooter {
+  padding: 8px;
+  text-align: center;
+  font-size: 12px;
+}
+
+.languagePickerLink {
+  color: var(--mantine-color-blue-6);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+/* Dark mode link */
+[data-mantine-color-scheme="dark"] .languagePickerLink {
+  color: var(--mantine-color-blue-4);
 } 
\ No newline at end of file
diff --git a/frontend/src/components/tools/ocr/LanguagePicker.tsx b/frontend/src/components/tools/ocr/LanguagePicker.tsx
index baf684089..e4c8b8d89 100644
--- a/frontend/src/components/tools/ocr/LanguagePicker.tsx
+++ b/frontend/src/components/tools/ocr/LanguagePicker.tsx
@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from 'react';
-import { Stack, Text, Loader, Popover, useMantineTheme, useMantineColorScheme, Box } from '@mantine/core';
+import { Stack, Text, Loader, Popover, Box } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { tempOcrLanguages } from '../../../utils/tempOcrLanguages';
 import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
+import styles from './LanguagePicker.module.css';
 
 export interface LanguageOption {
   value: string;
@@ -27,8 +28,6 @@ const LanguagePicker: React.FC<LanguagePickerProps> = ({
   languagesEndpoint = '/api/v1/ui-data/ocr-pdf'
 }) => {
   const { t } = useTranslation();
-  const theme = useMantineTheme();
-  const { colorScheme } = useMantineColorScheme();
   const [availableLanguages, setAvailableLanguages] = useState<LanguageOption[]>([]);
   const [isLoadingLanguages, setIsLoadingLanguages] = useState(true);
 
@@ -102,28 +101,6 @@ const LanguagePicker: React.FC<LanguagePickerProps> = ({
 
   const selectedLanguage = availableLanguages.find(lang => lang.value === value);
 
-  // Get appropriate background colors based on color scheme
-  const getBackgroundColor = () => {
-    if (colorScheme === 'dark') {
-      return '#2A2F36'; // Specific dark background color
-    }
-    return 'white'; // White background for light mode
-  };
-
-  const getSelectedItemBackgroundColor = () => {
-    if (colorScheme === 'dark') {
-      return 'var(--mantine-color-blue-8)'; // Darker blue for better contrast
-    }
-    return 'var(--mantine-color-blue-1)'; // Light blue for light mode
-  };
-
-  const getSelectedItemTextColor = () => {
-    if (colorScheme === 'dark') {
-      return 'white'; // White text for dark mode selected items
-    }
-    return 'var(--mantine-color-blue-9)'; // Dark blue text for light mode
-  };
-
   return (
     <Box>
       {label && (
@@ -134,78 +111,40 @@ const LanguagePicker: React.FC<LanguagePickerProps> = ({
       <Popover width="target" position="bottom" withArrow={false} shadow="md">
         <Popover.Target>
           <Box
+            className={`${styles.languagePicker} ${disabled ? '' : ''}`}
             style={{
-              width: '100%',
-              display: 'flex',
-              flexDirection: 'row',
-              alignItems: 'center', // Center align items vertically
-              height: '32px',
-              border: `1px solid var(--border-default)`,
-              backgroundColor: getBackgroundColor(),
-              color: 'var(--text-secondary)',
-              borderRadius: 'var(--radius-sm)',
-              padding: '4px 8px',
-              fontSize: '13px',
-              cursor: disabled ? 'not-allowed' : 'pointer',
               opacity: disabled ? 0.6 : 1,
-              transition: 'all 0.2s ease'
+              cursor: disabled ? 'not-allowed' : 'pointer'
             }}
           >
-            <Text size="sm" style={{ flex: 1 }}>
-              {selectedLanguage?.label || placeholder}
-            </Text>
-            <UnfoldMoreIcon style={{ 
-              fontSize: '16px', 
-              color: 'var(--text-muted)', 
-              marginLeft: 'auto',
-              display: 'flex',
-              alignItems: 'center'
-            }} />
+            <div className={styles.languagePickerContent}>
+              <Text size="sm" className={styles.languagePickerText}>
+                {selectedLanguage?.label || placeholder}
+              </Text>
+              <UnfoldMoreIcon className={styles.languagePickerIcon} />
+            </div>
           </Box>
         </Popover.Target>
-        <Popover.Dropdown style={{
-          backgroundColor: getBackgroundColor(),
-          border: '1px solid var(--border-default)',
-          borderRadius: 'var(--radius-sm)',
-          padding: '4px'
-        }}>
+        <Popover.Dropdown className={styles.languagePickerDropdown}>
           <Stack gap="xs">
-            <Box style={{
-              maxHeight: '180px',
-              overflowY: 'auto',
-              borderBottom: '1px solid var(--border-default)',
-              paddingBottom: '8px'
-            }}>
+            <Box className={styles.languagePickerScrollArea}>
               {availableLanguages.map((lang) => (
                 <Box
                   key={lang.value}
-                  style={{
-                    padding: '6px 10px',
-                    cursor: 'pointer',
-                    borderRadius: 'var(--radius-xs)',
-                    fontSize: '13px',
-                    color: value === lang.value ? getSelectedItemTextColor() : 'var(--text-primary)',
-                    backgroundColor: value === lang.value ? getSelectedItemBackgroundColor() : 'transparent',
-                    transition: 'background-color 0.2s ease'
-                  }}
+                  className={`${styles.languagePickerOption} ${value === lang.value ? styles.selected : ''}`}
                   onClick={() => onChange(lang.value)}
                 >
                   <Text size="sm">{lang.label}</Text>
                 </Box>
               ))}
             </Box>
-            <Box style={{
-              padding: '8px',
-              textAlign: 'center',
-              fontSize: '12px'
-            }}>
+            <Box className={styles.languagePickerFooter}>
               <Text size="xs" c="dimmed" mb={4}>
                 {t('ocr.languagePicker.additionalLanguages', 'Looking for additional languages?')}
               </Text>
               <Text 
                 size="xs" 
-                c="blue" 
-                style={{ textDecoration: 'underline', cursor: 'pointer' }}
+                className={styles.languagePickerLink}
                 onClick={() => window.open('https://docs.stirlingpdf.com/Advanced%20Configuration/OCR', '_blank')}
               >
                 {t('ocr.languagePicker.viewSetupGuide', 'View setup guide →')}