dev day #62

frontend/src/components/common/CustomRichEditor.tsx

@@ -18,7 +18,6 @@ import {
   SimpleGrid,
   useToast,
   VStack,
-  useColorModeValue,
   ButtonGroup,
   IconButton,
   Tooltip,
@@ -82,11 +81,12 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
   const [cropMaxWidth, setCropMaxWidth] = useState<number>(1500);
   const imgRef = useRef<HTMLImageElement | null>(null);
 
-  const borderColor = useColorModeValue('gray.200', 'gray.600');
-  const bgColor = useColorModeValue('white', 'gray.800');
-  const hoverBg = useColorModeValue('gray.50', 'gray.700');
-  const toolbarBg = useColorModeValue('white', 'gray.800');
-  const toolbarBorder = useColorModeValue('gray.200', 'gray.700');
+  // Force white mode for better readability in admin
+  const borderColor = 'gray.200';
+  const bgColor = 'white';
+  const hoverBg = 'gray.50';
+  const toolbarBg = 'white';
+  const toolbarBorder = 'gray.200';
   
   // Image editing state
   const [selectedImageElement, setSelectedImageElement] = useState<HTMLImageElement | null>(null);
@@ -569,6 +569,7 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
 
       {editorMode === 'rich' ? (
         <Box 
+          position="relative"
           borderWidth="1px" 
           borderColor={borderColor}
           borderRadius="md" 
@@ -579,15 +580,27 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
               borderBottom: '1px solid',
               borderColor: borderColor,
               bg: hoverBg,
+              '& button': {
+                color: 'gray.700 !important',
+              },
+              '& .ql-stroke': {
+                stroke: 'gray.700 !important',
+              },
+              '& .ql-fill': {
+                fill: 'gray.700 !important',
+              },
             },
             '.ql-container': {
               fontSize: '16px',
               fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif',
+              bg: 'white',
             },
             '.ql-editor': {
               minHeight: height,
               maxHeight: '70vh',
               overflowY: 'auto',
+              bg: 'white !important',
+              color: 'gray.800 !important',
               '&::-webkit-scrollbar': {
                 width: '8px',
               },
@@ -614,7 +627,7 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
               },
             },
             '.ql-editor.ql-blank::before': {
-              color: 'gray.400',
+              color: 'gray.400 !important',
               fontStyle: 'italic',
             },
           }}
@@ -869,7 +882,7 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
                   justifyContent="center" 
                   alignItems="center" 
                   p={4}
-                  bg={useColorModeValue('gray.50', 'gray.900')}
+                  bg="gray.50"
                   borderRadius="md"
                 >
                   <ReactCrop