chore: update theme with new theme from design

src/App.tsx

@@ -1,4 +1,11 @@
-import { Box, CssBaseline, TextField, useColorScheme } from '@mui/material';
+import {
+  Alert,
+  Box,
+  CssBaseline,
+  TextField,
+  Typography,
+  useColorScheme,
+} from '@mui/material';
 import './App.css';
 import { useTranslation } from 'react-i18next';
 import { LanguageManager } from './components/LanguageManager';
@@ -11,11 +18,27 @@ function App() {
       <CssBaseline />
       <LanguageManager />
       <div style={{ padding: '16px' }}>
-        <h1>{t('helloWorld')}</h1>
-        <p>The main content and router will go here.</p>
-        <Box sx={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+        <Typography variant="h3">{t('helloWorld')}</Typography>
+        <Box
+          sx={{ display: 'flex', flexDirection: 'column', gap: '10px', mt: 5 }}
+        >
           <ThemeToggleButton />
+          <Button color="secondary" variant="contained">
+            secondary button
+          </Button>
           <TextField label={t('helloWorld')} />
+          <Alert severity="success" variant="filled">
+            success
+          </Alert>
+          <Alert severity="warning" variant="filled">
+            warning
+          </Alert>
+          <Alert severity="info" variant="filled">
+            info
+          </Alert>
+          <Alert severity="error" variant="filled">
+            error
+          </Alert>
         </Box>
       </div>
     </>