96 lines
2.0 KiB
TypeScript
96 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import ReactDOM from 'react-dom/client';
|
|
import { ThemeProvider, createTheme } from '@mui/material/styles';
|
|
import CssBaseline from '@mui/material/CssBaseline';
|
|
import App from './App';
|
|
import './styles/global.css';
|
|
|
|
// Create a custom theme for better professional appearance
|
|
const theme = createTheme({
|
|
palette: {
|
|
primary: {
|
|
main: '#6366f1', // Indigo-500
|
|
light: '#818cf8', // Indigo-400
|
|
dark: '#4f46e5', // Indigo-600
|
|
},
|
|
secondary: {
|
|
main: '#8b5cf6', // Violet-500
|
|
light: '#a78bfa', // Violet-400
|
|
dark: '#7c3aed', // Violet-600
|
|
},
|
|
background: {
|
|
default: '#f8fafc', // Slate-50
|
|
paper: '#ffffff',
|
|
},
|
|
text: {
|
|
primary: '#1e293b', // Slate-800
|
|
secondary: '#64748b', // Slate-500
|
|
},
|
|
},
|
|
typography: {
|
|
fontFamily: '"Inter", "Roboto", "Helvetica", "Arial", sans-serif',
|
|
h4: {
|
|
fontWeight: 700,
|
|
letterSpacing: '-0.025em',
|
|
},
|
|
h5: {
|
|
fontWeight: 600,
|
|
letterSpacing: '-0.025em',
|
|
},
|
|
h6: {
|
|
fontWeight: 600,
|
|
letterSpacing: '-0.025em',
|
|
},
|
|
body1: {
|
|
lineHeight: 1.6,
|
|
},
|
|
body2: {
|
|
lineHeight: 1.6,
|
|
},
|
|
},
|
|
shape: {
|
|
borderRadius: 12,
|
|
},
|
|
components: {
|
|
MuiButton: {
|
|
styleOverrides: {
|
|
root: {
|
|
textTransform: 'none',
|
|
fontWeight: 600,
|
|
borderRadius: 8,
|
|
padding: '10px 24px',
|
|
},
|
|
},
|
|
},
|
|
MuiCard: {
|
|
styleOverrides: {
|
|
root: {
|
|
borderRadius: 12,
|
|
boxShadow: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
|
|
},
|
|
},
|
|
},
|
|
MuiTextField: {
|
|
styleOverrides: {
|
|
root: {
|
|
'& .MuiOutlinedInput-root': {
|
|
borderRadius: 8,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
const root = ReactDOM.createRoot(
|
|
document.getElementById('root') as HTMLElement
|
|
);
|
|
|
|
root.render(
|
|
<React.StrictMode>
|
|
<ThemeProvider theme={theme}>
|
|
<CssBaseline />
|
|
<App />
|
|
</ThemeProvider>
|
|
</React.StrictMode>
|
|
);
|