Transfer all code to TS
This commit is contained in:
lumijiez
23
ui/src/app/components/theme/MuiThemeProvider.tsx
Normal file
23
ui/src/app/components/theme/MuiThemeProvider.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
'use client';
|
||||
|
||||
import { ThemeProvider } from '@mui/material/styles';
|
||||
import CssBaseline from '@mui/material/CssBaseline';
|
||||
import { darkTheme } from './darkTheme';
|
||||
import { lightTheme } from './lightTheme';
|
||||
import { useTheme } from './ThemeContext';
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
interface MuiThemeProviderProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export default function MuiThemeProvider({ children }: MuiThemeProviderProps) {
|
||||
const { isDarkMode } = useTheme();
|
||||
|
||||
return (
|
||||
<ThemeProvider theme={isDarkMode ? darkTheme : lightTheme}>
|
||||
<CssBaseline />
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
74
ui/src/app/components/theme/ThemeContext.tsx
Normal file
74
ui/src/app/components/theme/ThemeContext.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
'use client';
|
||||
|
||||
import React, {
|
||||
createContext,
|
||||
useContext,
|
||||
useState,
|
||||
useEffect,
|
||||
ReactNode,
|
||||
} from 'react';
|
||||
|
||||
interface ThemeContextType {
|
||||
isDarkMode: boolean;
|
||||
toggleTheme: () => void;
|
||||
}
|
||||
|
||||
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
|
||||
|
||||
interface ThemeContextProviderProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export function ThemeContextProvider({ children }: ThemeContextProviderProps) {
|
||||
const [isDarkMode, setIsDarkMode] = useState(true);
|
||||
const [isInitialized, setIsInitialized] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const savedTheme = localStorage.getItem('theme-preference');
|
||||
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
|
||||
const shouldBeDark = savedTheme ? savedTheme === 'dark' : systemPrefersDark;
|
||||
|
||||
setIsDarkMode(shouldBeDark);
|
||||
setIsInitialized(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isInitialized) return;
|
||||
|
||||
const savedTheme = localStorage.getItem('theme-preference');
|
||||
if (savedTheme) return;
|
||||
|
||||
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
const handleChange = (e: MediaQueryListEvent) => {
|
||||
setIsDarkMode(e.matches);
|
||||
};
|
||||
|
||||
mediaQuery.addEventListener('change', handleChange);
|
||||
return () => mediaQuery.removeEventListener('change', handleChange);
|
||||
}, [isInitialized]);
|
||||
|
||||
const toggleTheme = () => {
|
||||
const newTheme = !isDarkMode;
|
||||
setIsDarkMode(newTheme);
|
||||
localStorage.setItem('theme-preference', newTheme ? 'dark' : 'light');
|
||||
};
|
||||
|
||||
if (!isInitialized) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<ThemeContext.Provider value={{ isDarkMode, toggleTheme }}>
|
||||
{children}
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useTheme(): ThemeContextType {
|
||||
const context = useContext(ThemeContext);
|
||||
if (!context) {
|
||||
throw new Error('useTheme must be used within a ThemeContextProvider');
|
||||
}
|
||||
return context;
|
||||
}
|
||||
26
ui/src/app/components/theme/ThemeToggleButton.tsx
Normal file
26
ui/src/app/components/theme/ThemeToggleButton.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
'use client';
|
||||
|
||||
import { IconButton } from '@mui/material';
|
||||
import { useTheme } from './ThemeContext';
|
||||
import {JSX} from "react";
|
||||
|
||||
export default function ThemeToggleButton(): JSX.Element {
|
||||
const { isDarkMode, toggleTheme } = useTheme();
|
||||
|
||||
return (
|
||||
<IconButton
|
||||
onClick={toggleTheme}
|
||||
color="inherit"
|
||||
sx={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: '8px',
|
||||
'&:hover': {
|
||||
backgroundColor: 'rgba(99, 102, 241, 0.1)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{isDarkMode ? '🌙' : '☀️'}
|
||||
</IconButton>
|
||||
);
|
||||
}
|
||||
276
ui/src/app/components/theme/darkTheme.ts
Normal file
276
ui/src/app/components/theme/darkTheme.ts
Normal file
@@ -0,0 +1,276 @@
|
||||
'use client'
|
||||
|
||||
import { createTheme, ThemeOptions } from '@mui/material/styles';
|
||||
|
||||
export const darkTheme: ThemeOptions = createTheme({
|
||||
palette: {
|
||||
mode: 'dark',
|
||||
primary: {
|
||||
main: '#6366f1',
|
||||
light: '#818cf8',
|
||||
dark: '#4f46e5',
|
||||
contrastText: '#ffffff',
|
||||
},
|
||||
secondary: {
|
||||
main: '#f59e0b',
|
||||
light: '#fbbf24',
|
||||
dark: '#d97706',
|
||||
contrastText: '#000000',
|
||||
},
|
||||
background: {
|
||||
default: '#0f0f23',
|
||||
paper: '#1a1a2e',
|
||||
},
|
||||
text: {
|
||||
primary: '#f8fafc',
|
||||
secondary: '#cbd5e1',
|
||||
},
|
||||
error: {
|
||||
main: '#ef4444',
|
||||
light: '#f87171',
|
||||
dark: '#dc2626',
|
||||
},
|
||||
warning: {
|
||||
main: '#f59e0b',
|
||||
light: '#fbbf24',
|
||||
dark: '#d97706',
|
||||
},
|
||||
info: {
|
||||
main: '#06b6d4',
|
||||
light: '#22d3ee',
|
||||
dark: '#0891b2',
|
||||
},
|
||||
success: {
|
||||
main: '#10b981',
|
||||
light: '#34d399',
|
||||
dark: '#059669',
|
||||
},
|
||||
divider: '#334155',
|
||||
},
|
||||
typography: {
|
||||
fontFamily: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
||||
h1: {
|
||||
fontSize: '2.5rem',
|
||||
fontWeight: 700,
|
||||
lineHeight: 1.2,
|
||||
letterSpacing: '-0.025em',
|
||||
},
|
||||
h2: {
|
||||
fontSize: '2rem',
|
||||
fontWeight: 600,
|
||||
lineHeight: 1.3,
|
||||
letterSpacing: '-0.025em',
|
||||
},
|
||||
h3: {
|
||||
fontSize: '1.5rem',
|
||||
fontWeight: 600,
|
||||
lineHeight: 1.4,
|
||||
letterSpacing: '-0.015em',
|
||||
},
|
||||
h4: {
|
||||
fontSize: '1.25rem',
|
||||
fontWeight: 600,
|
||||
lineHeight: 1.4,
|
||||
},
|
||||
h5: {
|
||||
fontSize: '1.125rem',
|
||||
fontWeight: 600,
|
||||
lineHeight: 1.5,
|
||||
},
|
||||
h6: {
|
||||
fontSize: '1rem',
|
||||
fontWeight: 600,
|
||||
lineHeight: 1.5,
|
||||
},
|
||||
body1: {
|
||||
fontSize: '1rem',
|
||||
lineHeight: 1.6,
|
||||
fontWeight: 400,
|
||||
},
|
||||
body2: {
|
||||
fontSize: '0.875rem',
|
||||
lineHeight: 1.6,
|
||||
fontWeight: 400,
|
||||
},
|
||||
button: {
|
||||
fontSize: '0.875rem',
|
||||
fontWeight: 500,
|
||||
textTransform: 'none',
|
||||
letterSpacing: '0.025em',
|
||||
},
|
||||
},
|
||||
shape: {
|
||||
borderRadius: 12,
|
||||
},
|
||||
shadows: [
|
||||
'none',
|
||||
'0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
|
||||
'0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
|
||||
'0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
|
||||
'0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.25)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.25)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.25)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.25)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.25)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.25)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.25)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.25)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.25)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.25)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.25)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.25)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.25)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.25)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.25)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.25)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.25)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.25)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.25)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.25)',
|
||||
],
|
||||
components: {
|
||||
MuiCssBaseline: {
|
||||
styleOverrides: {
|
||||
body: {
|
||||
scrollbarWidth: 'thin',
|
||||
scrollbarColor: '#6366f1 #1a1a2e',
|
||||
'&::-webkit-scrollbar': {
|
||||
width: '8px',
|
||||
},
|
||||
'&::-webkit-scrollbar-track': {
|
||||
background: '#1a1a2e',
|
||||
},
|
||||
'&::-webkit-scrollbar-thumb': {
|
||||
background: '#6366f1',
|
||||
borderRadius: '4px',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiButton: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
borderRadius: '8px',
|
||||
padding: '10px 24px',
|
||||
fontSize: '0.875rem',
|
||||
fontWeight: 500,
|
||||
boxShadow: 'none',
|
||||
'&:hover': {
|
||||
boxShadow: '0 4px 12px rgba(99, 102, 241, 0.3)',
|
||||
transform: 'translateY(-1px)',
|
||||
},
|
||||
'&:active': {
|
||||
transform: 'translateY(0)',
|
||||
},
|
||||
},
|
||||
contained: {
|
||||
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
|
||||
'&:hover': {
|
||||
background: 'linear-gradient(135deg, #5b21b6 0%, #7c3aed 100%)',
|
||||
},
|
||||
},
|
||||
outlined: {
|
||||
borderWidth: '1.5px',
|
||||
'&:hover': {
|
||||
borderWidth: '1.5px',
|
||||
backgroundColor: 'rgba(99, 102, 241, 0.08)',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiTextField: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: '8px',
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.02)',
|
||||
'&:hover .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: '#6366f1',
|
||||
},
|
||||
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: '#6366f1',
|
||||
borderWidth: '2px',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiCard: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
background: 'linear-gradient(145deg, #1a1a2e 0%, #16213e 100%)',
|
||||
border: '1px solid rgba(99, 102, 241, 0.1)',
|
||||
backdropFilter: 'blur(20px)',
|
||||
'&:hover': {
|
||||
border: '1px solid rgba(99, 102, 241, 0.2)',
|
||||
transform: 'translateY(-2px)',
|
||||
boxShadow: '0 20px 40px rgba(0, 0, 0, 0.3)',
|
||||
},
|
||||
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiPaper: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
backgroundImage: 'none',
|
||||
backgroundColor: '#1a1a2e',
|
||||
border: '1px solid rgba(99, 102, 241, 0.1)',
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiAppBar: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
background: 'rgba(26, 26, 46, 0.8)',
|
||||
backdropFilter: 'blur(20px)',
|
||||
borderBottom: '1px solid rgba(99, 102, 241, 0.1)',
|
||||
boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiDrawer: {
|
||||
styleOverrides: {
|
||||
paper: {
|
||||
background: 'linear-gradient(180deg, #1a1a2e 0%, #16213e 100%)',
|
||||
border: 'none',
|
||||
borderRight: '1px solid rgba(99, 102, 241, 0.1)',
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiChip: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
background: 'rgba(99, 102, 241, 0.1)',
|
||||
color: '#818cf8',
|
||||
border: '1px solid rgba(99, 102, 241, 0.2)',
|
||||
'&:hover': {
|
||||
background: 'rgba(99, 102, 241, 0.2)',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiTab: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
textTransform: 'none',
|
||||
fontWeight: 500,
|
||||
fontSize: '0.875rem',
|
||||
'&.Mui-selected': {
|
||||
color: '#6366f1',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiTabs: {
|
||||
styleOverrides: {
|
||||
indicator: {
|
||||
background: 'linear-gradient(90deg, #6366f1, #8b5cf6)',
|
||||
height: '3px',
|
||||
borderRadius: '3px',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
276
ui/src/app/components/theme/lightTheme.ts
Normal file
276
ui/src/app/components/theme/lightTheme.ts
Normal file
@@ -0,0 +1,276 @@
|
||||
'use client'
|
||||
|
||||
import { createTheme, ThemeOptions } from '@mui/material/styles';
|
||||
|
||||
export const lightTheme : ThemeOptions = createTheme({
|
||||
palette: {
|
||||
mode: 'light',
|
||||
primary: {
|
||||
main: '#6366f1',
|
||||
light: '#818cf8',
|
||||
dark: '#4f46e5',
|
||||
contrastText: '#ffffff',
|
||||
},
|
||||
secondary: {
|
||||
main: '#f59e0b',
|
||||
light: '#fbbf24',
|
||||
dark: '#d97706',
|
||||
contrastText: '#000000',
|
||||
},
|
||||
background: {
|
||||
default: '#f8fafc',
|
||||
paper: '#ffffff',
|
||||
},
|
||||
text: {
|
||||
primary: '#0f172a',
|
||||
secondary: '#475569',
|
||||
},
|
||||
error: {
|
||||
main: '#ef4444',
|
||||
light: '#f87171',
|
||||
dark: '#dc2626',
|
||||
},
|
||||
warning: {
|
||||
main: '#f59e0b',
|
||||
light: '#fbbf24',
|
||||
dark: '#d97706',
|
||||
},
|
||||
info: {
|
||||
main: '#06b6d4',
|
||||
light: '#22d3ee',
|
||||
dark: '#0891b2',
|
||||
},
|
||||
success: {
|
||||
main: '#10b981',
|
||||
light: '#34d399',
|
||||
dark: '#059669',
|
||||
},
|
||||
divider: '#e2e8f0',
|
||||
},
|
||||
typography: {
|
||||
fontFamily: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
||||
h1: {
|
||||
fontSize: '2.5rem',
|
||||
fontWeight: 700,
|
||||
lineHeight: 1.2,
|
||||
letterSpacing: '-0.025em',
|
||||
},
|
||||
h2: {
|
||||
fontSize: '2rem',
|
||||
fontWeight: 600,
|
||||
lineHeight: 1.3,
|
||||
letterSpacing: '-0.025em',
|
||||
},
|
||||
h3: {
|
||||
fontSize: '1.5rem',
|
||||
fontWeight: 600,
|
||||
lineHeight: 1.4,
|
||||
letterSpacing: '-0.015em',
|
||||
},
|
||||
h4: {
|
||||
fontSize: '1.25rem',
|
||||
fontWeight: 600,
|
||||
lineHeight: 1.4,
|
||||
},
|
||||
h5: {
|
||||
fontSize: '1.125rem',
|
||||
fontWeight: 600,
|
||||
lineHeight: 1.5,
|
||||
},
|
||||
h6: {
|
||||
fontSize: '1rem',
|
||||
fontWeight: 600,
|
||||
lineHeight: 1.5,
|
||||
},
|
||||
body1: {
|
||||
fontSize: '1rem',
|
||||
lineHeight: 1.6,
|
||||
fontWeight: 400,
|
||||
},
|
||||
body2: {
|
||||
fontSize: '0.875rem',
|
||||
lineHeight: 1.6,
|
||||
fontWeight: 400,
|
||||
},
|
||||
button: {
|
||||
fontSize: '0.875rem',
|
||||
fontWeight: 500,
|
||||
textTransform: 'none',
|
||||
letterSpacing: '0.025em',
|
||||
},
|
||||
},
|
||||
shape: {
|
||||
borderRadius: 12,
|
||||
},
|
||||
shadows: [
|
||||
'none',
|
||||
'0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
|
||||
'0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
|
||||
'0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
|
||||
'0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.15)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.15)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.15)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.15)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.15)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.15)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.15)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.15)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.15)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.15)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.15)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.15)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.15)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.15)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.15)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.15)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.15)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.15)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.15)',
|
||||
'0 25px 50px -12px rgba(0, 0, 0, 0.15)',
|
||||
],
|
||||
components: {
|
||||
MuiCssBaseline: {
|
||||
styleOverrides: {
|
||||
body: {
|
||||
scrollbarWidth: 'thin',
|
||||
scrollbarColor: '#6366f1 #f1f5f9',
|
||||
'&::-webkit-scrollbar': {
|
||||
width: '8px',
|
||||
},
|
||||
'&::-webkit-scrollbar-track': {
|
||||
background: '#f1f5f9',
|
||||
},
|
||||
'&::-webkit-scrollbar-thumb': {
|
||||
background: '#6366f1',
|
||||
borderRadius: '4px',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiButton: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
borderRadius: '8px',
|
||||
padding: '10px 24px',
|
||||
fontSize: '0.875rem',
|
||||
fontWeight: 500,
|
||||
boxShadow: 'none',
|
||||
'&:hover': {
|
||||
boxShadow: '0 4px 12px rgba(99, 102, 241, 0.3)',
|
||||
transform: 'translateY(-1px)',
|
||||
},
|
||||
'&:active': {
|
||||
transform: 'translateY(0)',
|
||||
},
|
||||
},
|
||||
contained: {
|
||||
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
|
||||
'&:hover': {
|
||||
background: 'linear-gradient(135deg, #5b21b6 0%, #7c3aed 100%)',
|
||||
},
|
||||
},
|
||||
outlined: {
|
||||
borderWidth: '1.5px',
|
||||
'&:hover': {
|
||||
borderWidth: '1.5px',
|
||||
backgroundColor: 'rgba(99, 102, 241, 0.08)',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiTextField: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: '8px',
|
||||
backgroundColor: 'rgba(241, 245, 249, 0.5)',
|
||||
'&:hover .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: '#6366f1',
|
||||
},
|
||||
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: '#6366f1',
|
||||
borderWidth: '2px',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiCard: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
background: 'linear-gradient(145deg, #ffffff 0%, #f8fafc 100%)',
|
||||
border: '1px solid rgba(99, 102, 241, 0.1)',
|
||||
backdropFilter: 'blur(20px)',
|
||||
'&:hover': {
|
||||
border: '1px solid rgba(99, 102, 241, 0.2)',
|
||||
transform: 'translateY(-2px)',
|
||||
boxShadow: '0 20px 40px rgba(99, 102, 241, 0.15)',
|
||||
},
|
||||
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiPaper: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
backgroundImage: 'none',
|
||||
backgroundColor: '#ffffff',
|
||||
border: '1px solid rgba(99, 102, 241, 0.1)',
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiAppBar: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
background: 'rgba(255, 255, 255, 0.8)',
|
||||
backdropFilter: 'blur(20px)',
|
||||
borderBottom: '1px solid rgba(99, 102, 241, 0.1)',
|
||||
boxShadow: '0 8px 32px rgba(99, 102, 241, 0.1)',
|
||||
color: '#0f172a',
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiDrawer: {
|
||||
styleOverrides: {
|
||||
paper: {
|
||||
background: 'linear-gradient(180deg, #ffffff 0%, #f8fafc 100%)',
|
||||
border: 'none',
|
||||
borderRight: '1px solid rgba(99, 102, 241, 0.1)',
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiChip: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
background: 'rgba(99, 102, 241, 0.7)',
|
||||
border: '1px solid rgba(99, 102, 241, 0.2)',
|
||||
'&:hover': {
|
||||
background: 'rgba(99, 102, 241, 0.9)',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiTab: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
textTransform: 'none',
|
||||
fontWeight: 500,
|
||||
fontSize: '0.875rem',
|
||||
'&.Mui-selected': {
|
||||
color: '#6366f1',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiTabs: {
|
||||
styleOverrides: {
|
||||
indicator: {
|
||||
background: 'linear-gradient(90deg, #6366f1, #8b5cf6)',
|
||||
height: '3px',
|
||||
borderRadius: '3px',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user