From 63e3035bacd8d4852de3ba9341e49173176c994d Mon Sep 17 00:00:00 2001
From: perf3ct <jonfuller2012@gmail.com>
Date: Thu, 10 Jul 2025 20:27:51 +0000
Subject: [PATCH] fix(client): correctly style the document details page for
 light/dark mode

---
 .../src/components/FileIntegrityDisplay.tsx   |  39 +-
 .../src/components/ProcessingTimeline.tsx     |  35 +-
 frontend/src/contexts/ThemeContext.tsx        | 112 +++-
 frontend/src/pages/DocumentDetailsPage.tsx    | 497 +++++++++---------
 frontend/src/theme.ts                         |  28 +
 5 files changed, 408 insertions(+), 303 deletions(-)

diff --git a/frontend/src/components/FileIntegrityDisplay.tsx b/frontend/src/components/FileIntegrityDisplay.tsx
index 1d10f3a..e432ccf 100644
--- a/frontend/src/components/FileIntegrityDisplay.tsx
+++ b/frontend/src/components/FileIntegrityDisplay.tsx
@@ -19,7 +19,8 @@ import {
   Error as ErrorIcon,
   Info as InfoIcon,
 } from '@mui/icons-material';
-import { modernTokens } from '../theme';
+import { useTheme } from '../contexts/ThemeContext';
+import { useTheme as useMuiTheme } from '@mui/material/styles';
 
 interface FileIntegrityDisplayProps {
   fileHash?: string;
@@ -43,6 +44,8 @@ const FileIntegrityDisplay: React.FC<FileIntegrityDisplayProps> = ({
   compact = false,
 }) => {
   const [copied, setCopied] = useState(false);
+  const { modernTokens } = useTheme();
+  const theme = useMuiTheme();
 
   const copyToClipboard = (text: string) => {
     navigator.clipboard.writeText(text);
@@ -60,7 +63,7 @@ const FileIntegrityDisplay: React.FC<FileIntegrityDisplayProps> = ({
       return {
         status: 'unknown',
         icon: <InfoIcon />,
-        color: modernTokens.colors.neutral[500],
+        color: theme.palette.text.secondary,
         message: 'Hash not available',
       };
     }
@@ -70,7 +73,7 @@ const FileIntegrityDisplay: React.FC<FileIntegrityDisplayProps> = ({
       return {
         status: 'verified',
         icon: <CheckIcon />,
-        color: modernTokens.colors.success[500],
+        color: theme.palette.success.main,
         message: 'File integrity verified',
       };
     }
@@ -78,7 +81,7 @@ const FileIntegrityDisplay: React.FC<FileIntegrityDisplayProps> = ({
     return {
       status: 'warning',
       icon: <WarningIcon />,
-      color: modernTokens.colors.warning[500],
+      color: theme.palette.warning.main,
       message: 'Hash format unusual',
     };
   };
@@ -107,8 +110,8 @@ const FileIntegrityDisplay: React.FC<FileIntegrityDisplayProps> = ({
       <Paper 
         sx={{ 
           p: 2, 
-          background: `linear-gradient(135deg, ${modernTokens.colors.neutral[50]} 0%, ${modernTokens.colors.primary[50]} 100%)`,
-          border: `1px solid ${modernTokens.colors.neutral[200]}`,
+          backgroundColor: theme.palette.background.paper,
+          border: `1px solid ${theme.palette.divider}`,
         }}
       >
         <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }}>
@@ -183,8 +186,8 @@ const FileIntegrityDisplay: React.FC<FileIntegrityDisplayProps> = ({
     <Paper 
       sx={{ 
         p: 3,
-        background: `linear-gradient(135deg, ${modernTokens.colors.neutral[50]} 0%, ${modernTokens.colors.primary[50]} 100%)`,
-        border: `1px solid ${modernTokens.colors.neutral[200]}`,
+        backgroundColor: theme.palette.background.paper,
+        border: `1px solid ${theme.palette.divider}`,
       }}
     >
       {/* Header */}
@@ -194,7 +197,7 @@ const FileIntegrityDisplay: React.FC<FileIntegrityDisplayProps> = ({
             sx={{ 
               fontSize: 24, 
               mr: 1.5, 
-              color: modernTokens.colors.primary[500] 
+              color: theme.palette.primary.main 
             }} 
           />
           <Typography variant="h6" sx={{ fontWeight: 600 }}>
@@ -221,7 +224,7 @@ const FileIntegrityDisplay: React.FC<FileIntegrityDisplayProps> = ({
             sx={{ 
               fontSize: 18, 
               mr: 1, 
-              color: modernTokens.colors.neutral[600] 
+              color: theme.palette.text.secondary 
             }} 
           />
           <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
@@ -235,9 +238,9 @@ const FileIntegrityDisplay: React.FC<FileIntegrityDisplayProps> = ({
               display: 'flex', 
               alignItems: 'center', 
               p: 2, 
-              backgroundColor: modernTokens.colors.neutral[100],
+              backgroundColor: theme.palette.action.hover,
               borderRadius: 1,
-              border: `1px solid ${modernTokens.colors.neutral[200]}`,
+              border: `1px solid ${theme.palette.divider}`,
             }}
           >
             <Typography 
@@ -247,7 +250,7 @@ const FileIntegrityDisplay: React.FC<FileIntegrityDisplayProps> = ({
                 flex: 1, 
                 wordBreak: 'break-all',
                 fontSize: '0.8rem',
-                color: modernTokens.colors.neutral[700],
+                color: theme.palette.text.primary,
               }}
             >
               {fileHash}
@@ -294,8 +297,8 @@ const FileIntegrityDisplay: React.FC<FileIntegrityDisplayProps> = ({
               size="small"
               sx={{ 
                 fontSize: '0.75rem',
-                backgroundColor: modernTokens.colors.neutral[100],
-                border: `1px solid ${modernTokens.colors.neutral[300]}`,
+                backgroundColor: theme.palette.action.hover,
+                border: `1px solid ${theme.palette.divider}`,
               }}
             />
           </Box>
@@ -329,9 +332,9 @@ const FileIntegrityDisplay: React.FC<FileIntegrityDisplayProps> = ({
               size="small"
               sx={{ 
                 fontSize: '0.75rem',
-                backgroundColor: modernTokens.colors.primary[50],
-                color: modernTokens.colors.primary[700],
-                border: `1px solid ${modernTokens.colors.primary[200]}`,
+                backgroundColor: theme.palette.primary.light,
+                color: theme.palette.primary.dark,
+                border: `1px solid ${theme.palette.primary.main}`,
               }}
             />
           </Box>
diff --git a/frontend/src/components/ProcessingTimeline.tsx b/frontend/src/components/ProcessingTimeline.tsx
index 39161d0..81cd457 100644
--- a/frontend/src/components/ProcessingTimeline.tsx
+++ b/frontend/src/components/ProcessingTimeline.tsx
@@ -29,7 +29,8 @@ import {
   Schedule as ScheduleIcon,
   Person as PersonIcon,
 } from '@mui/icons-material';
-import { modernTokens } from '../theme';
+import { useTheme } from '../contexts/ThemeContext';
+import { useTheme as useMuiTheme } from '@mui/material/styles';
 import { documentService } from '../services/api';
 
 interface ProcessingTimelineProps {
@@ -70,6 +71,8 @@ const ProcessingTimeline: React.FC<ProcessingTimelineProps> = ({
   const [expanded, setExpanded] = useState(!compact);
   const [retryHistory, setRetryHistory] = useState<any[]>([]);
   const [loadingHistory, setLoadingHistory] = useState(false);
+  const { modernTokens } = useTheme();
+  const theme = useMuiTheme();
 
   const getStatusIcon = (type: string, status: string) => {
     switch (type) {
@@ -90,13 +93,13 @@ const ProcessingTimeline: React.FC<ProcessingTimelineProps> = ({
   const getStatusColor = (status: string) => {
     switch (status) {
       case 'success':
-        return modernTokens.colors.success[500];
+        return theme.palette.success.main;
       case 'error':
-        return modernTokens.colors.error[500];
+        return theme.palette.error.main;
       case 'warning':
-        return modernTokens.colors.warning[500];
+        return theme.palette.warning.main;
       default:
-        return modernTokens.colors.info[500];
+        return theme.palette.info.main;
     }
   };
 
@@ -213,8 +216,8 @@ const ProcessingTimeline: React.FC<ProcessingTimelineProps> = ({
       <Paper 
         sx={{ 
           p: 2,
-          background: `linear-gradient(135deg, ${modernTokens.colors.neutral[50]} 0%, ${modernTokens.colors.info[50]} 100%)`,
-          border: `1px solid ${modernTokens.colors.neutral[200]}`,
+          backgroundColor: theme.palette.background.paper,
+          border: `1px solid ${theme.palette.divider}`,
         }}
       >
         <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
@@ -223,7 +226,7 @@ const ProcessingTimeline: React.FC<ProcessingTimelineProps> = ({
               sx={{ 
                 fontSize: 18, 
                 mr: 1, 
-                color: modernTokens.colors.primary[500] 
+                color: theme.palette.primary.main 
               }} 
             />
             <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
@@ -274,8 +277,8 @@ const ProcessingTimeline: React.FC<ProcessingTimelineProps> = ({
     <Paper 
       sx={{ 
         p: 3,
-        background: `linear-gradient(135deg, ${modernTokens.colors.neutral[50]} 0%, ${modernTokens.colors.info[50]} 100%)`,
-        border: `1px solid ${modernTokens.colors.neutral[200]}`,
+        backgroundColor: theme.palette.background.paper,
+        border: `1px solid ${theme.palette.divider}`,
       }}
     >
       {/* Header */}
@@ -297,7 +300,7 @@ const ProcessingTimeline: React.FC<ProcessingTimelineProps> = ({
           <Chip 
             label={`${events.length} events`}
             size="small"
-            sx={{ backgroundColor: modernTokens.colors.neutral[100] }}
+            sx={{ backgroundColor: theme.palette.action.hover }}
           />
           {ocrRetryCount > 0 && (
             <Chip 
@@ -324,7 +327,7 @@ const ProcessingTimeline: React.FC<ProcessingTimelineProps> = ({
               </TimelineDot>
               {index < events.length - 1 && (
                 <TimelineConnector 
-                  sx={{ backgroundColor: modernTokens.colors.neutral[300] }}
+                  sx={{ backgroundColor: theme.palette.action.selected }}
                 />
               )}
             </TimelineSeparator>
@@ -347,7 +350,7 @@ const ProcessingTimeline: React.FC<ProcessingTimelineProps> = ({
               
               {event.metadata?.userId && (
                 <Box sx={{ display: 'flex', alignItems: 'center', mt: 1 }}>
-                  <PersonIcon sx={{ fontSize: 14, mr: 0.5, color: modernTokens.colors.neutral[500] }} />
+                  <PersonIcon sx={{ fontSize: 14, mr: 0.5, color: theme.palette.text.secondary }} />
                   <Typography variant="caption" color="text.secondary">
                     User: {event.metadata.userId.substring(0, 8)}...
                   </Typography>
@@ -366,7 +369,7 @@ const ProcessingTimeline: React.FC<ProcessingTimelineProps> = ({
 
       {/* Retry History Section */}
       {ocrRetryCount > 0 && (
-        <Box sx={{ mt: 3, pt: 2, borderTop: `1px solid ${modernTokens.colors.neutral[200]}` }}>
+        <Box sx={{ mt: 3, pt: 2, borderTop: `1px solid ${theme.palette.divider}` }}>
           <Button
             onClick={() => setExpanded(!expanded)}
             endIcon={<ExpandIcon sx={{ transform: expanded ? 'rotate(180deg)' : 'none' }} />}
@@ -390,8 +393,8 @@ const ProcessingTimeline: React.FC<ProcessingTimelineProps> = ({
                     key={retry.id} 
                     sx={{ 
                       p: 2, 
-                      backgroundColor: modernTokens.colors.neutral[50],
-                      border: `1px solid ${modernTokens.colors.neutral[200]}`,
+                      backgroundColor: theme.palette.background.default,
+                      border: `1px solid ${theme.palette.divider}`,
                     }}
                   >
                     <Typography variant="subtitle2">
diff --git a/frontend/src/contexts/ThemeContext.tsx b/frontend/src/contexts/ThemeContext.tsx
index 20c7631..ade4c8a 100644
--- a/frontend/src/contexts/ThemeContext.tsx
+++ b/frontend/src/contexts/ThemeContext.tsx
@@ -1,10 +1,13 @@
 import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
 import { createTheme, Theme, ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
 import { PaletteMode } from '@mui/material';
+import { modernTokens } from '../theme';
 
 interface ThemeContextType {
   mode: PaletteMode;
   toggleTheme: () => void;
+  modernTokens: typeof modernTokens;
+  glassEffect: (alphaValue?: number) => object;
 }
 
 const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
@@ -21,19 +24,53 @@ interface ThemeProviderProps {
   children: ReactNode;
 }
 
+// Glassmorphism effect that adapts to theme mode
+const createGlassEffect = (mode: PaletteMode) => (alphaValue: number = 0.1) => ({
+  background: mode === 'light' 
+    ? `rgba(255, 255, 255, ${alphaValue})` 
+    : `rgba(30, 30, 30, ${alphaValue})`,
+  backdropFilter: 'blur(10px)',
+  border: mode === 'light' 
+    ? '1px solid rgba(255, 255, 255, 0.2)' 
+    : '1px solid rgba(255, 255, 255, 0.1)',
+  boxShadow: mode === 'light' 
+    ? modernTokens.shadows.glass 
+    : '0 8px 32px 0 rgba(0, 0, 0, 0.37)',
+});
+
 const createAppTheme = (mode: PaletteMode): Theme => {
   return createTheme({
     palette: {
       mode,
       primary: {
-        main: '#667eea',
-        light: '#9bb5ff',
-        dark: '#304ffe',
+        main: modernTokens.colors.primary[500],
+        light: modernTokens.colors.primary[300],
+        dark: modernTokens.colors.primary[700],
+        50: modernTokens.colors.primary[50],
+        100: modernTokens.colors.primary[100],
+        200: modernTokens.colors.primary[200],
+        300: modernTokens.colors.primary[300],
+        400: modernTokens.colors.primary[400],
+        500: modernTokens.colors.primary[500],
+        600: modernTokens.colors.primary[600],
+        700: modernTokens.colors.primary[700],
+        800: modernTokens.colors.primary[800],
+        900: modernTokens.colors.primary[900],
       },
       secondary: {
-        main: '#764ba2',
-        light: '#a777d9',
-        dark: '#4c1e74',
+        main: modernTokens.colors.secondary[500],
+        light: modernTokens.colors.secondary[300],
+        dark: modernTokens.colors.secondary[700],
+        50: modernTokens.colors.secondary[50],
+        100: modernTokens.colors.secondary[100],
+        200: modernTokens.colors.secondary[200],
+        300: modernTokens.colors.secondary[300],
+        400: modernTokens.colors.secondary[400],
+        500: modernTokens.colors.secondary[500],
+        600: modernTokens.colors.secondary[600],
+        700: modernTokens.colors.secondary[700],
+        800: modernTokens.colors.secondary[800],
+        900: modernTokens.colors.secondary[900],
       },
       background: {
         default: mode === 'light' ? '#fafafa' : '#121212',
@@ -43,6 +80,66 @@ const createAppTheme = (mode: PaletteMode): Theme => {
         primary: mode === 'light' ? '#333333' : '#f8fafc',
         secondary: mode === 'light' ? '#666666' : '#cbd5e1',
       },
+      success: {
+        main: modernTokens.colors.success[500],
+        light: modernTokens.colors.success[50],
+        dark: modernTokens.colors.success[600],
+        50: modernTokens.colors.success[50],
+        100: mode === 'light' ? '#dcfce7' : '#14532d',
+        200: mode === 'light' ? '#bbf7d0' : '#166534',
+        300: mode === 'light' ? '#86efac' : '#15803d',
+        400: mode === 'light' ? '#4ade80' : '#16a34a',
+        500: modernTokens.colors.success[500],
+        600: modernTokens.colors.success[600],
+        700: mode === 'light' ? '#15803d' : '#4ade80',
+        800: mode === 'light' ? '#166534' : '#86efac',
+        900: mode === 'light' ? '#14532d' : '#dcfce7',
+      },
+      warning: {
+        main: modernTokens.colors.warning[500],
+        light: modernTokens.colors.warning[50],
+        dark: modernTokens.colors.warning[600],
+        50: modernTokens.colors.warning[50],
+        100: mode === 'light' ? '#fef3c7' : '#78350f',
+        200: mode === 'light' ? '#fde68a' : '#92400e',
+        300: mode === 'light' ? '#fcd34d' : '#b45309',
+        400: mode === 'light' ? '#fbbf24' : '#d97706',
+        500: modernTokens.colors.warning[500],
+        600: modernTokens.colors.warning[600],
+        700: mode === 'light' ? '#b45309' : '#fbbf24',
+        800: mode === 'light' ? '#92400e' : '#fcd34d',
+        900: mode === 'light' ? '#78350f' : '#fef3c7',
+      },
+      error: {
+        main: modernTokens.colors.error[500],
+        light: modernTokens.colors.error[50],
+        dark: modernTokens.colors.error[600],
+        50: modernTokens.colors.error[50],
+        100: mode === 'light' ? '#fee2e2' : '#7f1d1d',
+        200: mode === 'light' ? '#fecaca' : '#991b1b',
+        300: mode === 'light' ? '#fca5a5' : '#b91c1c',
+        400: mode === 'light' ? '#f87171' : '#dc2626',
+        500: modernTokens.colors.error[500],
+        600: modernTokens.colors.error[600],
+        700: mode === 'light' ? '#b91c1c' : '#f87171',
+        800: mode === 'light' ? '#991b1b' : '#fca5a5',
+        900: mode === 'light' ? '#7f1d1d' : '#fee2e2',
+      },
+      info: {
+        main: modernTokens.colors.info[500],
+        light: modernTokens.colors.info[50],
+        dark: modernTokens.colors.info[600],
+        50: modernTokens.colors.info[50],
+        100: mode === 'light' ? '#dbeafe' : '#1e3a8a',
+        200: mode === 'light' ? '#bfdbfe' : '#1e40af',
+        300: mode === 'light' ? '#93c5fd' : '#1d4ed8',
+        400: mode === 'light' ? '#60a5fa' : '#2563eb',
+        500: modernTokens.colors.info[500],
+        600: modernTokens.colors.info[600],
+        700: mode === 'light' ? '#1d4ed8' : '#60a5fa',
+        800: mode === 'light' ? '#1e40af' : '#93c5fd',
+        900: mode === 'light' ? '#1e3a8a' : '#dbeafe',
+      },
       divider: mode === 'light' ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)',
     },
     typography: {
@@ -148,6 +245,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
   };
 
   const theme = createAppTheme(mode);
+  const glassEffect = createGlassEffect(mode);
 
   // Listen for system theme changes
   useEffect(() => {
@@ -164,7 +262,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
   }, []);
 
   return (
-    <ThemeContext.Provider value={{ mode, toggleTheme }}>
+    <ThemeContext.Provider value={{ mode, toggleTheme, modernTokens, glassEffect }}>
       <MuiThemeProvider theme={theme}>
         {children}
       </MuiThemeProvider>
diff --git a/frontend/src/pages/DocumentDetailsPage.tsx b/frontend/src/pages/DocumentDetailsPage.tsx
index 3ab625b..ffd5c29 100644
--- a/frontend/src/pages/DocumentDetailsPage.tsx
+++ b/frontend/src/pages/DocumentDetailsPage.tsx
@@ -56,12 +56,15 @@ import MetadataParser from '../components/MetadataParser';
 import FileIntegrityDisplay from '../components/FileIntegrityDisplay';
 import ProcessingTimeline from '../components/ProcessingTimeline';
 import { RetryHistoryModal } from '../components/RetryHistoryModal';
-import { modernTokens, glassEffect } from '../theme';
+import { useTheme } from '../contexts/ThemeContext';
+import { useTheme as useMuiTheme } from '@mui/material/styles';
 import api from '../services/api';
 
 const DocumentDetailsPage: React.FC = () => {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
+  const { mode, modernTokens, glassEffect } = useTheme();
+  const theme = useMuiTheme();
   const [document, setDocument] = useState<Document | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
@@ -335,7 +338,7 @@ const DocumentDetailsPage: React.FC = () => {
     <Box 
       sx={{ 
         minHeight: '100vh',
-        background: `linear-gradient(135deg, ${modernTokens.colors.primary[50]} 0%, ${modernTokens.colors.secondary[50]} 100%)`,
+        backgroundColor: theme.palette.background.default,
       }}
     >
       <Container maxWidth="xl" sx={{ py: 4 }}>
@@ -347,9 +350,9 @@ const DocumentDetailsPage: React.FC = () => {
               onClick={() => navigate('/documents')}
               sx={{ 
                 mb: 3,
-                color: modernTokens.colors.neutral[600],
+                color: theme.palette.text.secondary,
                 '&:hover': {
-                  backgroundColor: modernTokens.colors.neutral[100],
+                  backgroundColor: theme.palette.action.hover,
                 },
               }}
             >
@@ -358,10 +361,10 @@ const DocumentDetailsPage: React.FC = () => {
             
             <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
               <Typography 
-                variant="h2" 
+                variant="h4" 
                 sx={{ 
-                  fontWeight: 800,
-                  background: `linear-gradient(135deg, ${modernTokens.colors.primary[600]} 0%, ${modernTokens.colors.secondary[600]} 100%)`,
+                  fontWeight: 700,
+                  background: `linear-gradient(135deg, ${theme.palette.primary.main} 0%, ${theme.palette.secondary.main} 100%)`,
                   backgroundClip: 'text',
                   WebkitBackgroundClip: 'text',
                   color: 'transparent',
@@ -377,11 +380,12 @@ const DocumentDetailsPage: React.FC = () => {
                   <IconButton
                     onClick={handleDownload}
                     sx={{
-                      ...glassEffect(0.2),
-                      color: modernTokens.colors.primary[600],
+                      backgroundColor: theme.palette.action.hover,
+                      backdropFilter: 'blur(10px)',
+                      color: theme.palette.primary.main,
                       '&:hover': {
                         transform: 'scale(1.05)',
-                        backgroundColor: modernTokens.colors.primary[100],
+                        backgroundColor: theme.palette.primary.light,
                       },
                     }}
                   >
@@ -393,11 +397,12 @@ const DocumentDetailsPage: React.FC = () => {
                   <IconButton
                     onClick={handleViewDocument}
                     sx={{
-                      ...glassEffect(0.2),
-                      color: modernTokens.colors.primary[600],
+                      backgroundColor: theme.palette.action.hover,
+                      backdropFilter: 'blur(10px)',
+                      color: theme.palette.primary.main,
                       '&:hover': {
                         transform: 'scale(1.05)',
-                        backgroundColor: modernTokens.colors.primary[100],
+                        backgroundColor: theme.palette.primary.light,
                       },
                     }}
                   >
@@ -410,11 +415,12 @@ const DocumentDetailsPage: React.FC = () => {
                     <IconButton
                       onClick={handleViewOcr}
                       sx={{
-                        ...glassEffect(0.2),
-                        color: modernTokens.colors.secondary[600],
+                        backgroundColor: theme.palette.action.hover,
+                        backdropFilter: 'blur(10px)',
+                        color: theme.palette.secondary.main,
                         '&:hover': {
                           transform: 'scale(1.05)',
-                          backgroundColor: modernTokens.colors.secondary[100],
+                          backgroundColor: theme.palette.secondary.light,
                         },
                       }}
                     >
@@ -438,9 +444,9 @@ const DocumentDetailsPage: React.FC = () => {
             <Grid item xs={12} lg={5}>
               <Card 
                 sx={{ 
-                  ...glassEffect(0.3),
+                  backgroundColor: theme.palette.background.paper,
+                  backdropFilter: 'blur(10px)',
                   height: 'fit-content',
-                  background: `linear-gradient(135deg, ${modernTokens.colors.neutral[0]} 0%, ${modernTokens.colors.primary[50]} 100%)`,
                 }}
               >
                 <CardContent sx={{ p: 4 }}>
@@ -452,7 +458,7 @@ const DocumentDetailsPage: React.FC = () => {
                       justifyContent: 'center',
                       mb: 4,
                       p: 4,
-                      background: `linear-gradient(135deg, ${modernTokens.colors.primary[100]} 0%, ${modernTokens.colors.secondary[100]} 100%)`,
+                      background: `linear-gradient(135deg, ${theme.palette.primary.light} 0%, ${theme.palette.secondary.light} 100%)`,
                       borderRadius: 3,
                       minHeight: 280,
                       position: 'relative',
@@ -481,15 +487,15 @@ const DocumentDetailsPage: React.FC = () => {
                           objectFit: 'contain',
                           cursor: 'pointer',
                           transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-                          boxShadow: modernTokens.shadows.lg,
+                          boxShadow: theme.shadows[8],
                         }}
                         onMouseEnter={(e) => {
                           e.currentTarget.style.transform = 'scale(1.05) rotateY(5deg)';
-                          e.currentTarget.style.boxShadow = modernTokens.shadows.xl;
+                          e.currentTarget.style.boxShadow = theme.shadows[12];
                         }}
                         onMouseLeave={(e) => {
                           e.currentTarget.style.transform = 'scale(1) rotateY(0deg)';
-                          e.currentTarget.style.boxShadow = modernTokens.shadows.lg;
+                          e.currentTarget.style.boxShadow = theme.shadows[8];
                         }}
                       />
                     ) : (
@@ -503,7 +509,7 @@ const DocumentDetailsPage: React.FC = () => {
                           }
                         }}
                       >
-                        <Box sx={{ fontSize: 120, color: modernTokens.colors.primary[400], display: 'flex' }}>
+                        <Box sx={{ fontSize: 120, color: theme.palette.primary.main, display: 'flex' }}>
                           {getFileIcon(document.mime_type)}
                         </Box>
                       </Box>
@@ -515,10 +521,10 @@ const DocumentDetailsPage: React.FC = () => {
                     <Chip 
                       label={document.mime_type}
                       sx={{
-                        backgroundColor: modernTokens.colors.primary[100],
-                        color: modernTokens.colors.primary[700],
+                        backgroundColor: theme.palette.primary.light,
+                        color: theme.palette.primary.dark,
                         fontWeight: 600,
-                        border: `1px solid ${modernTokens.colors.primary[300]}`,
+                        border: `1px solid ${theme.palette.primary.main}`,
                       }}
                     />
                   </Box>
@@ -566,10 +572,10 @@ const DocumentDetailsPage: React.FC = () => {
                           onClick={handleViewProcessedImage}
                           disabled={processedImageLoading}
                           sx={{
-                            backgroundColor: modernTokens.colors.secondary[100],
-                            color: modernTokens.colors.secondary[600],
+                            backgroundColor: theme.palette.secondary.light,
+                            color: theme.palette.secondary.dark,
                             '&:hover': {
-                              backgroundColor: modernTokens.colors.secondary[200],
+                              backgroundColor: theme.palette.secondary[200],
                               transform: 'scale(1.1)',
                             },
                           }}
@@ -588,10 +594,10 @@ const DocumentDetailsPage: React.FC = () => {
                         onClick={handleRetryOcr}
                         disabled={retryingOcr}
                         sx={{
-                          backgroundColor: modernTokens.colors.warning[100],
-                          color: modernTokens.colors.warning[600],
+                          backgroundColor: theme.palette.warning.light,
+                          color: theme.palette.warning.dark,
                           '&:hover': {
-                            backgroundColor: modernTokens.colors.warning[200],
+                            backgroundColor: theme.palette.warning[200],
                             transform: 'scale(1.1)',
                           },
                         }}
@@ -608,10 +614,10 @@ const DocumentDetailsPage: React.FC = () => {
                       <IconButton
                         onClick={handleShowRetryHistory}
                         sx={{
-                          backgroundColor: modernTokens.colors.info[100],
-                          color: modernTokens.colors.info[600],
+                          backgroundColor: theme.palette.info.light,
+                          color: theme.palette.info.dark,
                           '&:hover': {
-                            backgroundColor: modernTokens.colors.info[200],
+                            backgroundColor: theme.palette.info[200],
                             transform: 'scale(1.1)',
                           },
                         }}
@@ -622,21 +628,194 @@ const DocumentDetailsPage: React.FC = () => {
                   </Stack>
                 </CardContent>
               </Card>
+              
+              {/* File Integrity Display - Moved here */}
+              <Box sx={{ mt: 3 }}>
+                <FileIntegrityDisplay
+                fileHash={document.file_hash}
+                fileName={document.original_filename}
+                fileSize={document.file_size}
+                mimeType={document.mime_type}
+                createdAt={document.created_at}
+                updatedAt={document.updated_at}
+                userId={document.user_id}
+                />
+              </Box>
             </Grid>
 
             {/* Main Content Area */}
             <Grid item xs={12} lg={7}>
-              <Stack spacing={4}>
-                {/* File Integrity Display */}
-                <FileIntegrityDisplay
-                  fileHash={document.file_hash}
-                  fileName={document.original_filename}
-                  fileSize={document.file_size}
-                  mimeType={document.mime_type}
-                  createdAt={document.created_at}
-                  updatedAt={document.updated_at}
-                  userId={document.user_id}
-                />
+              <Stack spacing={4}>                
+                {/* OCR Text Section - Moved higher */}
+                {document.has_ocr_text && (
+                  <Card 
+                    sx={{ 
+                      backgroundColor: theme.palette.background.paper,
+                      backdropFilter: 'blur(10px)',
+                    }}
+                  >
+                    <CardContent sx={{ p: 4 }}>
+                      <Typography variant="h5" sx={{ mb: 3, fontWeight: 700 }}>
+                        🔍 Extracted Text (OCR)
+                      </Typography>
+                      
+                      {ocrLoading ? (
+                        <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', py: 6 }}>
+                          <CircularProgress size={32} sx={{ mr: 2 }} />
+                          <Typography variant="h6" color="text.secondary">
+                            Loading OCR analysis...
+                          </Typography>
+                        </Box>
+                      ) : ocrData ? (
+                        <>
+                          {/* Enhanced OCR Stats */}
+                          <Box sx={{ mb: 4, display: 'flex', gap: 2, flexWrap: 'wrap' }}>
+                            {ocrData.ocr_confidence && (
+                              <Box 
+                                sx={{ 
+                                  p: 2, 
+                                  borderRadius: 2,
+                                  backgroundColor: mode === 'light' ? modernTokens.colors.primary[100] : modernTokens.colors.primary[800],
+                                  border: `1px solid ${mode === 'light' ? modernTokens.colors.primary[300] : modernTokens.colors.primary[600]}`,
+                                  textAlign: 'center',
+                                  minWidth: 120,
+                                }}
+                              >
+                                <Typography variant="h5" sx={{ fontWeight: 700, color: mode === 'light' ? modernTokens.colors.primary[700] : modernTokens.colors.primary[300] }}>
+                                  {Math.round(ocrData.ocr_confidence)}%
+                                </Typography>
+                                <Typography variant="caption" color="text.secondary">
+                                  Confidence
+                                </Typography>
+                              </Box>
+                            )}
+                            {ocrData.ocr_word_count && (
+                              <Box 
+                                sx={{ 
+                                  p: 2, 
+                                  borderRadius: 2,
+                                  backgroundColor: mode === 'light' ? modernTokens.colors.secondary[100] : modernTokens.colors.secondary[800],
+                                  border: `1px solid ${mode === 'light' ? modernTokens.colors.secondary[300] : modernTokens.colors.secondary[600]}`,
+                                  textAlign: 'center',
+                                  minWidth: 120,
+                                }}
+                              >
+                                <Typography variant="h5" sx={{ fontWeight: 700, color: mode === 'light' ? modernTokens.colors.secondary[700] : modernTokens.colors.secondary[300] }}>
+                                  {ocrData.ocr_word_count.toLocaleString()}
+                                </Typography>
+                                <Typography variant="caption" color="text.secondary">
+                                  Words
+                                </Typography>
+                              </Box>
+                            )}
+                            {ocrData.ocr_processing_time_ms && (
+                              <Box 
+                                sx={{ 
+                                  p: 2, 
+                                  borderRadius: 2,
+                                  backgroundColor: mode === 'light' ? modernTokens.colors.info[100] : modernTokens.colors.info[800],
+                                  border: `1px solid ${mode === 'light' ? modernTokens.colors.info[300] : modernTokens.colors.info[600]}`,
+                                  textAlign: 'center',
+                                  minWidth: 120,
+                                }}
+                              >
+                                <Typography variant="h5" sx={{ fontWeight: 700, color: mode === 'light' ? modernTokens.colors.info[700] : modernTokens.colors.info[300] }}>
+                                  {ocrData.ocr_processing_time_ms}ms
+                                </Typography>
+                                <Typography variant="caption" color="text.secondary">
+                                  Processing Time
+                                </Typography>
+                              </Box>
+                            )}
+                          </Box>
+
+                          {/* OCR Error Display */}
+                          {ocrData.ocr_error && (
+                            <Alert 
+                              severity="error" 
+                              sx={{ 
+                                mb: 3,
+                                borderRadius: 2,
+                              }}
+                            >
+                              <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
+                                OCR Processing Error
+                              </Typography>
+                              <Typography variant="body2">{ocrData.ocr_error}</Typography>
+                            </Alert>
+                          )}
+
+                          {/* Full OCR Text Display */}
+                          <Paper
+                            sx={{
+                              p: 4,
+                              backgroundColor: theme.palette.background.default,
+                              borderRadius: 3,
+                              maxHeight: 400,
+                              overflow: 'auto',
+                              // Custom scrollbar styling
+                              '&::-webkit-scrollbar': {
+                                width: '8px',
+                              },
+                              '&::-webkit-scrollbar-track': {
+                                backgroundColor: mode === 'light' ? modernTokens.colors.neutral[100] : modernTokens.colors.neutral[800],
+                                borderRadius: '4px',
+                              },
+                              '&::-webkit-scrollbar-thumb': {
+                                backgroundColor: mode === 'light' ? modernTokens.colors.neutral[300] : modernTokens.colors.neutral[600],
+                                borderRadius: '4px',
+                                '&:hover': {
+                                  backgroundColor: mode === 'light' ? modernTokens.colors.neutral[400] : modernTokens.colors.neutral[500],
+                                },
+                              },
+                              // Firefox scrollbar styling
+                              scrollbarWidth: 'thin',
+                              scrollbarColor: mode === 'light' 
+                                ? `${modernTokens.colors.neutral[300]} ${modernTokens.colors.neutral[100]}`
+                                : `${modernTokens.colors.neutral[600]} ${modernTokens.colors.neutral[800]}`,
+                            }}
+                          >
+                            {ocrData.ocr_text ? (
+                              <Typography
+                                variant="body1"
+                                sx={{
+                                  fontFamily: '"Inter", monospace',
+                                  whiteSpace: 'pre-wrap',
+                                  lineHeight: 1.8,
+                                  fontSize: '0.95rem',
+                                }}
+                              >
+                                {ocrData.ocr_text}
+                              </Typography>
+                            ) : (
+                              <Typography variant="body1" color="text.secondary" sx={{ fontStyle: 'italic', textAlign: 'center', py: 4 }}>
+                                No OCR text available for this document.
+                              </Typography>
+                            )}
+                          </Paper>
+
+                          {/* Processing Info */}
+                          {ocrData.ocr_completed_at && (
+                            <Box sx={{ mt: 3, pt: 3, borderTop: `1px solid ${theme.palette.divider}` }}>
+                              <Typography variant="body2" color="text.secondary">
+                                ✅ Processing completed: {new Date(ocrData.ocr_completed_at).toLocaleString()}
+                              </Typography>
+                            </Box>
+                          )}
+                        </>
+                      ) : (
+                        <Alert 
+                          severity="info"
+                          sx={{
+                            borderRadius: 2,
+                          }}
+                        >
+                          OCR text is available but failed to load. Please try refreshing the page.
+                        </Alert>
+                      )}
+                    </CardContent>
+                  </Card>
+                )}
                 
                 {/* Processing Timeline */}
                 <ProcessingTimeline
@@ -654,8 +833,8 @@ const DocumentDetailsPage: React.FC = () => {
                 {document.source_metadata && Object.keys(document.source_metadata).length > 0 && (
                   <Card 
                     sx={{ 
-                      ...glassEffect(0.2),
-                      background: `linear-gradient(135deg, ${modernTokens.colors.neutral[0]} 0%, ${modernTokens.colors.info[50]} 100%)`,
+                      backgroundColor: theme.palette.background.paper,
+                      backdropFilter: 'blur(10px)',
                     }}
                   >
                     <CardContent sx={{ p: 4 }}>
@@ -673,8 +852,8 @@ const DocumentDetailsPage: React.FC = () => {
                 {/* Tags and Labels */}
                 <Card 
                   sx={{ 
-                    ...glassEffect(0.2),
-                    background: `linear-gradient(135deg, ${modernTokens.colors.neutral[0]} 0%, ${modernTokens.colors.secondary[50]} 100%)`,
+                    backgroundColor: theme.palette.background.paper,
+                    backdropFilter: 'blur(10px)',
                   }}
                 >
                   <CardContent sx={{ p: 4 }}>
@@ -686,10 +865,10 @@ const DocumentDetailsPage: React.FC = () => {
                         startIcon={<EditIcon />}
                         onClick={() => setShowLabelDialog(true)}
                         sx={{
-                          backgroundColor: modernTokens.colors.secondary[100],
-                          color: modernTokens.colors.secondary[700],
+                          backgroundColor: theme.palette.secondary.light,
+                          color: theme.palette.secondary.dark,
                           '&:hover': {
-                            backgroundColor: modernTokens.colors.secondary[200],
+                            backgroundColor: theme.palette.secondary[200],
                           },
                         }}
                       >
@@ -709,9 +888,9 @@ const DocumentDetailsPage: React.FC = () => {
                               key={index}
                               label={tag} 
                               sx={{
-                                backgroundColor: modernTokens.colors.primary[100],
-                                color: modernTokens.colors.primary[700],
-                                border: `1px solid ${modernTokens.colors.primary[300]}`,
+                                backgroundColor: theme.palette.primary.light,
+                                color: theme.palette.primary.dark,
+                                border: `1px solid ${theme.palette.primary.main}`,
                                 fontWeight: 500,
                               }}
                             />
@@ -753,212 +932,6 @@ const DocumentDetailsPage: React.FC = () => {
           </Grid>
         </Fade>
 
-        {/* OCR Text Section */}
-        {document.has_ocr_text && (
-          <Fade in timeout={1000}>
-            <Card 
-              sx={{ 
-                mt: 4,
-                ...glassEffect(0.2),
-                background: `linear-gradient(135deg, ${modernTokens.colors.neutral[0]} 0%, ${modernTokens.colors.success[50]} 100%)`,
-              }}
-            >
-              <CardContent sx={{ p: 4 }}>
-                <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 3 }}>
-                  <Typography variant="h4" sx={{ fontWeight: 700 }}>
-                    🔍 Extracted Text (OCR)
-                  </Typography>
-                  <Button
-                    startIcon={<SpeedIcon />}
-                    onClick={handleViewOcr}
-                    sx={{
-                      backgroundColor: modernTokens.colors.success[100],
-                      color: modernTokens.colors.success[700],
-                      '&:hover': {
-                        backgroundColor: modernTokens.colors.success[200],
-                      },
-                    }}
-                  >
-                    View Full Text
-                  </Button>
-                </Box>
-                
-                {ocrLoading ? (
-                  <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', py: 6 }}>
-                    <CircularProgress size={32} sx={{ mr: 2 }} />
-                    <Typography variant="h6" color="text.secondary">
-                      Loading OCR analysis...
-                    </Typography>
-                  </Box>
-                ) : ocrData ? (
-                  <>
-                    {/* Enhanced OCR Stats */}
-                    <Box sx={{ mb: 4, display: 'flex', gap: 2, flexWrap: 'wrap' }}>
-                      {ocrData.ocr_confidence && (
-                        <Box 
-                          sx={{ 
-                            p: 2, 
-                            borderRadius: 2,
-                            backgroundColor: modernTokens.colors.primary[100],
-                            border: `1px solid ${modernTokens.colors.primary[300]}`,
-                            textAlign: 'center',
-                            minWidth: 120,
-                          }}
-                        >
-                          <Typography variant="h5" sx={{ fontWeight: 700, color: modernTokens.colors.primary[700] }}>
-                            {Math.round(ocrData.ocr_confidence)}%
-                          </Typography>
-                          <Typography variant="caption" color="text.secondary">
-                            Confidence
-                          </Typography>
-                        </Box>
-                      )}
-                      {ocrData.ocr_word_count && (
-                        <Box 
-                          sx={{ 
-                            p: 2, 
-                            borderRadius: 2,
-                            backgroundColor: modernTokens.colors.secondary[100],
-                            border: `1px solid ${modernTokens.colors.secondary[300]}`,
-                            textAlign: 'center',
-                            minWidth: 120,
-                          }}
-                        >
-                          <Typography variant="h5" sx={{ fontWeight: 700, color: modernTokens.colors.secondary[700] }}>
-                            {ocrData.ocr_word_count.toLocaleString()}
-                          </Typography>
-                          <Typography variant="caption" color="text.secondary">
-                            Words
-                          </Typography>
-                        </Box>
-                      )}
-                      {ocrData.ocr_processing_time_ms && (
-                        <Box 
-                          sx={{ 
-                            p: 2, 
-                            borderRadius: 2,
-                            backgroundColor: modernTokens.colors.info[100],
-                            border: `1px solid ${modernTokens.colors.info[300]}`,
-                            textAlign: 'center',
-                            minWidth: 120,
-                          }}
-                        >
-                          <Typography variant="h5" sx={{ fontWeight: 700, color: modernTokens.colors.info[700] }}>
-                            {ocrData.ocr_processing_time_ms}ms
-                          </Typography>
-                          <Typography variant="caption" color="text.secondary">
-                            Processing Time
-                          </Typography>
-                        </Box>
-                      )}
-                    </Box>
-
-                    {/* OCR Error Display */}
-                    {ocrData.ocr_error && (
-                      <Alert 
-                        severity="error" 
-                        sx={{ 
-                          mb: 3,
-                          borderRadius: 2,
-                          backgroundColor: modernTokens.colors.error[50],
-                          border: `1px solid ${modernTokens.colors.error[200]}`,
-                        }}
-                      >
-                        <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
-                          OCR Processing Error
-                        </Typography>
-                        <Typography variant="body2">{ocrData.ocr_error}</Typography>
-                      </Alert>
-                    )}
-
-                    {/* OCR Text Preview */}
-                    <Paper
-                      sx={{
-                        p: 4,
-                        background: `linear-gradient(135deg, ${modernTokens.colors.neutral[50]} 0%, ${modernTokens.colors.neutral[100]} 100%)`,
-                        border: `1px solid ${modernTokens.colors.neutral[300]}`,
-                        borderRadius: 3,
-                        maxHeight: 300,
-                        overflow: 'auto',
-                        position: 'relative',
-                      }}
-                    >
-                      {ocrData.ocr_text ? (
-                        <Typography
-                          variant="body1"
-                          sx={{
-                            fontFamily: '"Inter", monospace',
-                            whiteSpace: 'pre-wrap',
-                            lineHeight: 1.8,
-                            color: modernTokens.colors.neutral[800],
-                            fontSize: '0.95rem',
-                          }}
-                        >
-                          {ocrData.ocr_text.length > 500 
-                            ? `${ocrData.ocr_text.substring(0, 500)}...` 
-                            : ocrData.ocr_text
-                          }
-                        </Typography>
-                      ) : (
-                        <Typography variant="body1" color="text.secondary" sx={{ fontStyle: 'italic', textAlign: 'center', py: 4 }}>
-                          No OCR text available for this document.
-                        </Typography>
-                      )}
-                      
-                      {ocrData.ocr_text && ocrData.ocr_text.length > 500 && (
-                        <Box 
-                          sx={{ 
-                            position: 'absolute',
-                            bottom: 0,
-                            left: 0,
-                            right: 0,
-                            height: 60,
-                            background: `linear-gradient(transparent, ${modernTokens.colors.neutral[100]})`,
-                            display: 'flex',
-                            alignItems: 'end',
-                            justifyContent: 'center',
-                            pb: 2,
-                          }}
-                        >
-                          <Button 
-                            onClick={handleViewOcr}
-                            size="small"
-                            sx={{ 
-                              backgroundColor: modernTokens.colors.neutral[0],
-                              boxShadow: modernTokens.shadows.sm,
-                            }}
-                          >
-                            View Full Text
-                          </Button>
-                        </Box>
-                      )}
-                    </Paper>
-
-                    {/* Processing Info */}
-                    {ocrData.ocr_completed_at && (
-                      <Box sx={{ mt: 3, pt: 3, borderTop: `1px solid ${modernTokens.colors.neutral[200]}` }}>
-                        <Typography variant="body2" color="text.secondary">
-                          ✅ Processing completed: {new Date(ocrData.ocr_completed_at).toLocaleString()}
-                        </Typography>
-                      </Box>
-                    )}
-                  </>
-                ) : (
-                  <Alert 
-                    severity="info"
-                    sx={{
-                      borderRadius: 2,
-                      backgroundColor: modernTokens.colors.info[50],
-                      border: `1px solid ${modernTokens.colors.info[200]}`,
-                    }}
-                  >
-                    OCR text is available but failed to load. Try clicking the "View Full Text" button above.
-                  </Alert>
-                )}
-              </CardContent>
-            </Card>
-          </Fade>
-        )}
       </Container>
 
       {/* OCR Text Dialog */}
diff --git a/frontend/src/theme.ts b/frontend/src/theme.ts
index bb72620..f3d0853 100644
--- a/frontend/src/theme.ts
+++ b/frontend/src/theme.ts
@@ -43,23 +43,51 @@ export const modernTokens = {
     },
     success: {
       50: '#f0fdf4',
+      100: '#dcfce7',
+      200: '#bbf7d0',
+      300: '#86efac',
+      400: '#4ade80',
       500: '#22c55e',
       600: '#16a34a',
+      700: '#15803d',
+      800: '#166534',
+      900: '#14532d',
     },
     warning: {
       50: '#fffbeb',
+      100: '#fef3c7',
+      200: '#fde68a',
+      300: '#fcd34d',
+      400: '#fbbf24',
       500: '#f59e0b',
       600: '#d97706',
+      700: '#b45309',
+      800: '#92400e',
+      900: '#78350f',
     },
     error: {
       50: '#fef2f2',
+      100: '#fee2e2',
+      200: '#fecaca',
+      300: '#fca5a5',
+      400: '#f87171',
       500: '#ef4444',
       600: '#dc2626',
+      700: '#b91c1c',
+      800: '#991b1b',
+      900: '#7f1d1d',
     },
     info: {
       50: '#eff6ff',
+      100: '#dbeafe',
+      200: '#bfdbfe',
+      300: '#93c5fd',
+      400: '#60a5fa',
       500: '#3b82f6',
       600: '#2563eb',
+      700: '#1d4ed8',
+      800: '#1e40af',
+      900: '#1e3a8a',
     },
   },
   shadows: {