CodeSource
/
Readur
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(client): fix dark mode

This commit is contained in:
perf3ct 2025-06-13 21:53:25 +00:00
parent 6c0e381de2
commit 667fb26c3d
6 changed files with 110 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/components/Dashboard/Dashboard.tsx
View File

@ -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',

44
frontend/src/components/Layout/AppLayout.tsx
View File

@ -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,

2
frontend/src/components/ThemeToggle/ThemeToggle.tsx
View File

@ -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',
},
}}
>

19
frontend/src/contexts/ThemeContext.tsx
View File

@ -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)',
},
},
},
},
},
},
});
};

2
frontend/src/pages/SearchPage.tsx
View File

@ -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',
}}

32
frontend/src/pages/WatchFolderPage.tsx
View File

@ -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>