ALwrity Version 0.5.0 (Fastapi + React )

frontend/src/index.tsx

@@ -0,0 +1,96 @@
+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>
+);