189 lines
5.6 KiB
TypeScript
189 lines
5.6 KiB
TypeScript
"use client";
|
|
|
|
import { ReactNode, useMemo } from "react";
|
|
import { CssBaseline, ThemeProvider, createTheme, responsiveFontSizes } from "@mui/material";
|
|
|
|
export default function Providers({ children }: { children: ReactNode }) {
|
|
const theme = useMemo(
|
|
() =>
|
|
responsiveFontSizes(
|
|
createTheme({
|
|
palette: {
|
|
mode: "dark",
|
|
background: {
|
|
default: "#09090b", // Zinc-950
|
|
paper: "#18181b" // Zinc-900
|
|
},
|
|
primary: {
|
|
main: "#6366f1", // Indigo-500
|
|
light: "#818cf8",
|
|
dark: "#4f46e5",
|
|
contrastText: "#ffffff"
|
|
},
|
|
secondary: {
|
|
main: "#06b6d4", // Cyan-500
|
|
light: "#22d3ee",
|
|
dark: "#0891b2",
|
|
contrastText: "#ffffff"
|
|
},
|
|
error: {
|
|
main: "#ef4444", // Red-500
|
|
light: "#f87171",
|
|
dark: "#dc2626"
|
|
},
|
|
success: {
|
|
main: "#22c55e", // Green-500
|
|
light: "#4ade80",
|
|
dark: "#16a34a"
|
|
},
|
|
warning: {
|
|
main: "#f59e0b", // Amber-500
|
|
light: "#fbbf24",
|
|
dark: "#d97706"
|
|
},
|
|
info: {
|
|
main: "#3b82f6", // Blue-500
|
|
light: "#60a5fa",
|
|
dark: "#2563eb"
|
|
},
|
|
text: {
|
|
primary: "#f4f4f5", // Zinc-100
|
|
secondary: "#a1a1aa" // Zinc-400
|
|
}
|
|
},
|
|
typography: {
|
|
fontFamily: ['"Inter"', '"Segoe UI"', "Roboto", "sans-serif"].join(","),
|
|
h4: {
|
|
fontWeight: 700,
|
|
letterSpacing: "-0.02em"
|
|
},
|
|
h6: {
|
|
fontWeight: 600
|
|
},
|
|
button: {
|
|
fontWeight: 600,
|
|
textTransform: "none"
|
|
}
|
|
},
|
|
shape: {
|
|
borderRadius: 12
|
|
},
|
|
components: {
|
|
MuiCssBaseline: {
|
|
styleOverrides: {
|
|
body: {
|
|
backgroundColor: "#09090b",
|
|
backgroundImage:
|
|
"radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.15), transparent 40%), radial-gradient(circle at 100% 0%, rgba(6, 182, 212, 0.1), transparent 30%)",
|
|
backgroundAttachment: "fixed"
|
|
}
|
|
}
|
|
},
|
|
MuiButton: {
|
|
defaultProps: {
|
|
disableElevation: true
|
|
},
|
|
styleOverrides: {
|
|
root: {
|
|
borderRadius: 8,
|
|
padding: "8px 16px",
|
|
transition: "all 0.2s ease-in-out"
|
|
},
|
|
contained: {
|
|
"&:hover": {
|
|
transform: "translateY(-1px)",
|
|
boxShadow: "0 4px 12px rgba(99, 102, 241, 0.3)"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
MuiCard: {
|
|
styleOverrides: {
|
|
root: {
|
|
backgroundImage: "none",
|
|
backgroundColor: "rgba(24, 24, 27, 0.6)", // Zinc-900 / 60%
|
|
border: "1px solid rgba(255, 255, 255, 0.08)",
|
|
backdropFilter: "blur(12px)",
|
|
transition: "all 0.3s ease",
|
|
"&:hover": {
|
|
borderColor: "rgba(255, 255, 255, 0.15)",
|
|
boxShadow: "0 12px 32px rgba(0, 0, 0, 0.4)"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
MuiPaper: {
|
|
styleOverrides: {
|
|
root: {
|
|
backgroundImage: "none"
|
|
}
|
|
}
|
|
},
|
|
MuiTableCell: {
|
|
styleOverrides: {
|
|
root: {
|
|
borderBottom: "1px solid rgba(255, 255, 255, 0.06)",
|
|
padding: "16px 24px"
|
|
},
|
|
head: {
|
|
fontWeight: 600,
|
|
backgroundColor: "rgba(24, 24, 27, 0.4)",
|
|
color: "#a1a1aa",
|
|
fontSize: "0.75rem",
|
|
textTransform: "uppercase",
|
|
letterSpacing: "0.05em"
|
|
}
|
|
}
|
|
},
|
|
MuiTableRow: {
|
|
styleOverrides: {
|
|
root: {
|
|
"&:hover": {
|
|
backgroundColor: "rgba(255, 255, 255, 0.02)"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
MuiDialog: {
|
|
styleOverrides: {
|
|
paper: {
|
|
backgroundColor: "#18181b",
|
|
border: "1px solid rgba(255, 255, 255, 0.1)",
|
|
backgroundImage: "none",
|
|
boxShadow: "0 24px 48px rgba(0, 0, 0, 0.5)"
|
|
}
|
|
}
|
|
},
|
|
MuiTextField: {
|
|
styleOverrides: {
|
|
root: {
|
|
"& .MuiOutlinedInput-root": {
|
|
borderRadius: 10,
|
|
backgroundColor: "rgba(9, 9, 11, 0.5)",
|
|
"& fieldset": {
|
|
borderColor: "rgba(255, 255, 255, 0.08)"
|
|
},
|
|
"&:hover fieldset": {
|
|
borderColor: "rgba(255, 255, 255, 0.2)"
|
|
},
|
|
"&.Mui-focused fieldset": {
|
|
borderColor: "#6366f1"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
),
|
|
[]
|
|
);
|
|
|
|
return (
|
|
<ThemeProvider theme={theme}>
|
|
<CssBaseline />
|
|
{children}
|
|
</ThemeProvider>
|
|
);
|
|
}
|