Add MUI theming and an axios interceptor
This commit is contained in:
lumijiez
279
webui/src/app/components/theme/lightTheme.js
Normal file
279
webui/src/app/components/theme/lightTheme.js
Normal file
@@ -0,0 +1,279 @@
|
||||
'use client'
|
||||
|
||||
import { createTheme } from '@mui/material/styles';
|
||||
|
||||
export const lightTheme = 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',
|
||||
},
|
||||
surface: {
|
||||
main: '#f1f5f9',
|
||||
},
|
||||
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.1)',
|
||||
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',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user