From 667fb26c3d17d1243faad8729c77898ce2970d4c Mon Sep 17 00:00:00 2001
From: perf3ct <jonfuller2012@gmail.com>
Date: Fri, 13 Jun 2025 21:53:25 +0000
Subject: [PATCH] feat(client): fix dark mode

---
 .../src/components/Dashboard/Dashboard.tsx    | 38 ++++++++++++----
 frontend/src/components/Layout/AppLayout.tsx  | 44 ++++++++++++++-----
 .../components/ThemeToggle/ThemeToggle.tsx    |  2 +
 frontend/src/contexts/ThemeContext.tsx        | 19 +++++++-
 frontend/src/pages/SearchPage.tsx             |  2 +-
 frontend/src/pages/WatchFolderPage.tsx        | 32 ++++++++++++--
 6 files changed, 110 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/Dashboard/Dashboard.tsx b/frontend/src/components/Dashboard/Dashboard.tsx
index 4bd7717..1f9aa01 100644
--- a/frontend/src/components/Dashboard/Dashboard.tsx
+++ b/frontend/src/components/Dashboard/Dashboard.tsx
@@ -199,6 +199,7 @@ const StatsCard: React.FC<StatsCardProps> = ({ title, value, subtitle, icon: Ico
 // Recent Documents Component
 const RecentDocuments: React.FC<RecentDocumentsProps> = ({ documents = [] }) => {
   const navigate = useNavigate();
+  const theme = useTheme();
 
   const getFileIcon = (mimeType?: string): React.ComponentType<any> => {
     if (mimeType?.includes('pdf')) return PdfIcon;
@@ -227,9 +228,13 @@ const RecentDocuments: React.FC<RecentDocumentsProps> = ({ documents = [] }) =>
 
   return (
     <Card elevation={0} sx={{
-      background: 'linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(248,250,252,0.95) 100%)',
+      background: theme.palette.mode === 'light'
+        ? 'linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(248,250,252,0.95) 100%)'
+        : 'linear-gradient(180deg, rgba(40,40,40,0.95) 0%, rgba(25,25,25,0.95) 100%)',
       backdropFilter: 'blur(20px)',
-      border: '1px solid rgba(226,232,240,0.5)',
+      border: theme.palette.mode === 'light'
+        ? '1px solid rgba(226,232,240,0.5)'
+        : '1px solid rgba(255,255,255,0.1)',
       borderRadius: 3,
     }}>
       <CardContent sx={{ p: 3 }}>
@@ -237,7 +242,9 @@ const RecentDocuments: React.FC<RecentDocumentsProps> = ({ documents = [] }) =>
           <Typography variant="h6" sx={{ 
             fontWeight: 700,
             letterSpacing: '-0.025em',
-            background: 'linear-gradient(135deg, #1e293b 0%, #6366f1 100%)',
+            background: theme.palette.mode === 'light'
+              ? 'linear-gradient(135deg, #1e293b 0%, #6366f1 100%)'
+              : 'linear-gradient(135deg, #f8fafc 0%, #a855f7 100%)',
             backgroundClip: 'text',
             WebkitBackgroundClip: 'text',
             WebkitTextFillColor: 'transparent',
@@ -365,6 +372,7 @@ const RecentDocuments: React.FC<RecentDocumentsProps> = ({ documents = [] }) =>
 // Quick Actions Component
 const QuickActions: React.FC = () => {
   const navigate = useNavigate();
+  const theme = useTheme();
   
   const actions: QuickAction[] = [
     {
@@ -392,16 +400,22 @@ const QuickActions: React.FC = () => {
 
   return (
     <Card elevation={0} sx={{
-      background: 'linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(248,250,252,0.95) 100%)',
+      background: theme.palette.mode === 'light'
+        ? 'linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(248,250,252,0.95) 100%)'
+        : 'linear-gradient(180deg, rgba(40,40,40,0.95) 0%, rgba(25,25,25,0.95) 100%)',
       backdropFilter: 'blur(20px)',
-      border: '1px solid rgba(226,232,240,0.5)',
+      border: theme.palette.mode === 'light'
+        ? '1px solid rgba(226,232,240,0.5)'
+        : '1px solid rgba(255,255,255,0.1)',
       borderRadius: 3,
     }}>
       <CardContent sx={{ p: 3 }}>
         <Typography variant="h6" sx={{ 
           fontWeight: 700,
           letterSpacing: '-0.025em',
-          background: 'linear-gradient(135deg, #1e293b 0%, #6366f1 100%)',
+          background: theme.palette.mode === 'light'
+            ? 'linear-gradient(135deg, #1e293b 0%, #6366f1 100%)'
+            : 'linear-gradient(135deg, #f8fafc 0%, #a855f7 100%)',
           backgroundClip: 'text',
           WebkitBackgroundClip: 'text',
           WebkitTextFillColor: 'transparent',
@@ -417,9 +431,13 @@ const QuickActions: React.FC = () => {
                 sx={{
                   p: 2.5,
                   cursor: 'pointer',
-                  border: '1px solid rgba(226,232,240,0.5)',
+                  border: theme.palette.mode === 'light'
+                    ? '1px solid rgba(226,232,240,0.5)'
+                    : '1px solid rgba(255,255,255,0.1)',
                   borderRadius: 3,
-                  background: 'linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(248,250,252,0.6) 100%)',
+                  background: theme.palette.mode === 'light'
+                    ? 'linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(248,250,252,0.6) 100%)'
+                    : 'linear-gradient(135deg, rgba(50,50,50,0.8) 0%, rgba(30,30,30,0.6) 100%)',
                   backdropFilter: 'blur(10px)',
                   transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
                   '&:hover': {
@@ -527,7 +545,9 @@ const Dashboard: React.FC = () => {
           fontWeight: 800, 
           mb: 1,
           letterSpacing: '-0.025em',
-          background: 'linear-gradient(135deg, #1e293b 0%, #6366f1 100%)',
+          background: theme.palette.mode === 'light'
+            ? 'linear-gradient(135deg, #1e293b 0%, #6366f1 100%)'
+            : 'linear-gradient(135deg, #f8fafc 0%, #a855f7 100%)',
           backgroundClip: 'text',
           WebkitBackgroundClip: 'text',
           WebkitTextFillColor: 'transparent',
diff --git a/frontend/src/components/Layout/AppLayout.tsx b/frontend/src/components/Layout/AppLayout.tsx
index 0d02908..464f29a 100644
--- a/frontend/src/components/Layout/AppLayout.tsx
+++ b/frontend/src/components/Layout/AppLayout.tsx
@@ -146,7 +146,9 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
             <Typography variant="h6" sx={{ 
               fontWeight: 800, 
               color: 'text.primary',
-              background: 'linear-gradient(135deg, #1e293b 0%, #6366f1 100%)',
+              background: theme.palette.mode === 'light'
+                ? 'linear-gradient(135deg, #1e293b 0%, #6366f1 100%)'
+                : 'linear-gradient(135deg, #f8fafc 0%, #a855f7 100%)',
               backgroundClip: 'text',
               WebkitBackgroundClip: 'text',
               WebkitTextFillColor: 'transparent',
@@ -248,8 +250,12 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
       {/* User Info */}
       <Box sx={{ 
         p: 3, 
-        borderTop: '1px solid rgba(226,232,240,0.3)',
-        background: 'linear-gradient(135deg, rgba(99,102,241,0.03) 0%, rgba(139,92,246,0.03) 100%)',
+        borderTop: theme.palette.mode === 'light'
+          ? '1px solid rgba(226,232,240,0.3)'
+          : '1px solid rgba(255,255,255,0.1)',
+        background: theme.palette.mode === 'light'
+          ? 'linear-gradient(135deg, rgba(99,102,241,0.03) 0%, rgba(139,92,246,0.03) 100%)'
+          : 'linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(139,92,246,0.08) 100%)',
       }}>
         <Box sx={{ 
           display: 'flex', 
@@ -257,10 +263,16 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
           gap: 2.5,
           p: 2,
           borderRadius: 3,
-          background: 'linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(248,250,252,0.6) 100%)',
+          background: theme.palette.mode === 'light'
+            ? 'linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(248,250,252,0.6) 100%)'
+            : 'linear-gradient(135deg, rgba(50,50,50,0.8) 0%, rgba(30,30,30,0.6) 100%)',
           backdropFilter: 'blur(10px)',
-          border: '1px solid rgba(255,255,255,0.3)',
-          boxShadow: '0 4px 16px rgba(0,0,0,0.04)',
+          border: theme.palette.mode === 'light'
+            ? '1px solid rgba(255,255,255,0.3)'
+            : '1px solid rgba(255,255,255,0.1)',
+          boxShadow: theme.palette.mode === 'light'
+            ? '0 4px 16px rgba(0,0,0,0.04)'
+            : '0 4px 16px rgba(0,0,0,0.2)',
         }}>
           <Avatar
             sx={{
@@ -338,7 +350,9 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
           <Typography variant="h6" noWrap component="div" sx={{ 
             fontWeight: 700, 
             mr: 2,
-            background: 'linear-gradient(135deg, #1e293b 0%, #6366f1 100%)',
+            background: theme.palette.mode === 'light'
+              ? 'linear-gradient(135deg, #1e293b 0%, #6366f1 100%)'
+              : 'linear-gradient(135deg, #f8fafc 0%, #a855f7 100%)',
             backgroundClip: 'text',
             WebkitBackgroundClip: 'text',
             WebkitTextFillColor: 'transparent',
@@ -357,9 +371,13 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
             sx={{ 
               mr: 2,
               color: 'text.secondary',
-              background: 'linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(248,250,252,0.6) 100%)',
+              background: theme.palette.mode === 'light'
+                ? 'linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(248,250,252,0.6) 100%)'
+                : 'linear-gradient(135deg, rgba(50,50,50,0.8) 0%, rgba(30,30,30,0.6) 100%)',
               backdropFilter: 'blur(10px)',
-              border: '1px solid rgba(255,255,255,0.3)',
+              border: theme.palette.mode === 'light'
+                ? '1px solid rgba(255,255,255,0.3)'
+                : '1px solid rgba(255,255,255,0.1)',
               borderRadius: 2.5,
               width: 44,
               height: 44,
@@ -412,9 +430,13 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
             onClick={handleProfileMenuOpen}
             sx={{ 
               color: 'text.secondary',
-              background: 'linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(248,250,252,0.6) 100%)',
+              background: theme.palette.mode === 'light'
+                ? 'linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(248,250,252,0.6) 100%)'
+                : 'linear-gradient(135deg, rgba(50,50,50,0.8) 0%, rgba(30,30,30,0.6) 100%)',
               backdropFilter: 'blur(10px)',
-              border: '1px solid rgba(255,255,255,0.3)',
+              border: theme.palette.mode === 'light'
+                ? '1px solid rgba(255,255,255,0.3)'
+                : '1px solid rgba(255,255,255,0.1)',
               borderRadius: 2.5,
               width: 44,
               height: 44,
diff --git a/frontend/src/components/ThemeToggle/ThemeToggle.tsx b/frontend/src/components/ThemeToggle/ThemeToggle.tsx
index ab34431..1d29959 100644
--- a/frontend/src/components/ThemeToggle/ThemeToggle.tsx
+++ b/frontend/src/components/ThemeToggle/ThemeToggle.tsx
@@ -22,8 +22,10 @@ const ThemeToggle: React.FC<ThemeToggleProps> = ({
         size={size}
         sx={{
           transition: 'all 0.3s ease-in-out',
+          color: mode === 'light' ? '#6366f1' : '#fbbf24',
           '&:hover': {
             transform: 'rotate(180deg)',
+            color: mode === 'light' ? '#4f46e5' : '#f59e0b',
           },
         }}
       >
diff --git a/frontend/src/contexts/ThemeContext.tsx b/frontend/src/contexts/ThemeContext.tsx
index 4027be4..20c7631 100644
--- a/frontend/src/contexts/ThemeContext.tsx
+++ b/frontend/src/contexts/ThemeContext.tsx
@@ -40,9 +40,10 @@ const createAppTheme = (mode: PaletteMode): Theme => {
         paper: mode === 'light' ? '#ffffff' : '#1e1e1e',
       },
       text: {
-        primary: mode === 'light' ? '#333333' : '#ffffff',
-        secondary: mode === 'light' ? '#666666' : '#b0b0b0',
+        primary: mode === 'light' ? '#333333' : '#f8fafc',
+        secondary: mode === 'light' ? '#666666' : '#cbd5e1',
       },
+      divider: mode === 'light' ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)',
     },
     typography: {
       fontFamily: [
@@ -112,6 +113,20 @@ const createAppTheme = (mode: PaletteMode): Theme => {
           },
         },
       },
+      MuiTextField: {
+        styleOverrides: {
+          root: {
+            '& .MuiOutlinedInput-root': {
+              '& fieldset': {
+                borderColor: mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)',
+              },
+              '&:hover fieldset': {
+                borderColor: mode === 'light' ? 'rgba(0, 0, 0, 0.87)' : 'rgba(255, 255, 255, 0.87)',
+              },
+            },
+          },
+        },
+      },
     },
   });
 };
diff --git a/frontend/src/pages/SearchPage.tsx b/frontend/src/pages/SearchPage.tsx
index 1acf7e7..fd36e51 100644
--- a/frontend/src/pages/SearchPage.tsx
+++ b/frontend/src/pages/SearchPage.tsx
@@ -1186,7 +1186,7 @@ const SearchPage: React.FC = () => {
                                   sx={{
                                     p: 1.5,
                                     mb: 1,
-                                    backgroundColor: 'grey.50',
+                                    backgroundColor: (theme) => theme.palette.mode === 'light' ? 'grey.50' : 'grey.800',
                                     borderLeft: '3px solid',
                                     borderLeftColor: 'primary.main',
                                   }}
diff --git a/frontend/src/pages/WatchFolderPage.tsx b/frontend/src/pages/WatchFolderPage.tsx
index ede46fd..23dd721 100644
--- a/frontend/src/pages/WatchFolderPage.tsx
+++ b/frontend/src/pages/WatchFolderPage.tsx
@@ -116,7 +116,15 @@ const WatchFolderPage: React.FC = () => {
   return (
     <Container maxWidth="xl" sx={{ mt: 4, mb: 4 }}>
       <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 4 }}>
-        <Typography variant="h4" sx={{ fontWeight: 600 }}>
+        <Typography variant="h4" sx={{ 
+          fontWeight: 600,
+          background: theme.palette.mode === 'light'
+            ? 'linear-gradient(135deg, #1e293b 0%, #6366f1 100%)'
+            : 'linear-gradient(135deg, #f8fafc 0%, #a855f7 100%)',
+          backgroundClip: 'text',
+          WebkitBackgroundClip: 'text',
+          WebkitTextFillColor: 'transparent',
+        }}>
           Watch Folder
         </Typography>
         <Button
@@ -148,7 +156,13 @@ const WatchFolderPage: React.FC = () => {
                 <Typography variant="body2" color="text.secondary">
                   Watched Directory
                 </Typography>
-                <Typography variant="body1" sx={{ fontFamily: 'monospace', bgcolor: 'grey.100', p: 1, borderRadius: 1 }}>
+                <Typography variant="body1" sx={{ 
+                  fontFamily: 'monospace', 
+                  bgcolor: theme.palette.mode === 'light' ? 'grey.100' : 'grey.800', 
+                  p: 1, 
+                  borderRadius: 1,
+                  color: 'text.primary',
+                }}>
                   {watchConfig.watchFolder}
                 </Typography>
               </Box>
@@ -271,7 +285,12 @@ const WatchFolderPage: React.FC = () => {
 
             <Grid container spacing={2} sx={{ mt: 2 }}>
               <Grid item xs={12} md={6}>
-                <Box sx={{ p: 2, bgcolor: 'grey.50', borderRadius: 2 }}>
+                <Box sx={{ 
+                  p: 2, 
+                  bgcolor: theme.palette.mode === 'light' ? 'grey.50' : 'grey.800', 
+                  borderRadius: 2,
+                  border: theme.palette.mode === 'dark' ? '1px solid rgba(255,255,255,0.1)' : 'none',
+                }}>
                   <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
                     Average Wait Time
                   </Typography>
@@ -281,7 +300,12 @@ const WatchFolderPage: React.FC = () => {
                 </Box>
               </Grid>
               <Grid item xs={12} md={6}>
-                <Box sx={{ p: 2, bgcolor: 'grey.50', borderRadius: 2 }}>
+                <Box sx={{ 
+                  p: 2, 
+                  bgcolor: theme.palette.mode === 'light' ? 'grey.50' : 'grey.800', 
+                  borderRadius: 2,
+                  border: theme.palette.mode === 'dark' ? '1px solid rgba(255,255,255,0.1)' : 'none',
+                }}>
                   <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
                     Oldest Pending Item
                   </Typography>