From bb133d544886da2f102e795fb8120bc9db02aff4 Mon Sep 17 00:00:00 2001
From: Nicolas Cantu <nicolas.cantu@pm.me>
Date: Wed, 10 Sep 2025 17:55:39 +0200
Subject: [PATCH] feat: apply white background theme and improve UI styling

- Add Material-UI theme with white background configuration
- Update CSS with white background and light color scheme
- Integrate ThemeProvider and CssBaseline for consistent styling
- Remove dark theme elements and apply clean white design
- Improve typography and color contrast for better readability
---
 src/components/Layout.tsx |  4 +--
 src/index.css             | 56 ++++++++++++++++-----------------
 src/main.tsx              |  8 ++++-
 src/theme/index.ts        | 65 +++++++++++++++++++++++++++++++++++++++
 src/views/ConseilView.tsx |  6 ++--
 src/views/UploadView.tsx  |  2 +-
 6 files changed, 104 insertions(+), 37 deletions(-)
 create mode 100644 src/theme/index.ts

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index ed3ca1c..6d3f2fe 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -25,9 +25,9 @@ export const Layout: React.FC<LayoutProps> = ({ children }) => {
           </Typography>
         </Toolbar>
       </AppBar>
-      
+
       <NavigationTabs currentPath={location.pathname} />
-      
+
       <Container maxWidth="xl" sx={{ mt: 3, mb: 3 }}>
         {children}
       </Container>
diff --git a/src/index.css b/src/index.css
index 08a3ac9..160831e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,11 +1,11 @@
 :root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  color-scheme: light;
+  color: #213547;
+  background-color: #ffffff;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -13,21 +13,29 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  background-color: #ffffff;
+}
+
+#root {
+  min-height: 100vh;
+  background-color: #ffffff;
+}
+
 a {
   font-weight: 500;
-  color: #646cff;
+  color: #1976d2;
   text-decoration: inherit;
 }
 a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+  color: #1565c0;
 }
 
 h1 {
@@ -42,27 +50,15 @@ button {
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
-  background-color: #1a1a1a;
+  background-color: #f9f9f9;
+  color: #213547;
   cursor: pointer;
   transition: border-color 0.25s;
 }
 button:hover {
-  border-color: #646cff;
+  border-color: #1976d2;
 }
 button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
+}
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
index 71ed8e9..590cc69 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,14 +1,20 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { Provider } from 'react-redux'
+import { ThemeProvider } from '@mui/material/styles'
+import { CssBaseline } from '@mui/material'
 import './index.css'
 import App from './App.tsx'
 import { store } from './store'
+import { theme } from './theme'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <Provider store={store}>
-      <App />
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        <App />
+      </ThemeProvider>
     </Provider>
   </StrictMode>,
 )
diff --git a/src/theme/index.ts b/src/theme/index.ts
new file mode 100644
index 0000000..00834fd
--- /dev/null
+++ b/src/theme/index.ts
@@ -0,0 +1,65 @@
+import { createTheme } from '@mui/material/styles'
+
+export const theme = createTheme({
+  palette: {
+    mode: 'light',
+    background: {
+      default: '#ffffff',
+      paper: '#ffffff',
+    },
+    primary: {
+      main: '#1976d2',
+      light: '#42a5f5',
+      dark: '#1565c0',
+    },
+    secondary: {
+      main: '#dc004e',
+      light: '#ff5983',
+      dark: '#9a0036',
+    },
+    error: {
+      main: '#f44336',
+    },
+    warning: {
+      main: '#ff9800',
+    },
+    info: {
+      main: '#2196f3',
+    },
+    success: {
+      main: '#4caf50',
+    },
+  },
+  typography: {
+    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+    h4: {
+      fontWeight: 600,
+    },
+    h6: {
+      fontWeight: 500,
+    },
+  },
+  components: {
+    MuiCssBaseline: {
+      styleOverrides: {
+        body: {
+          backgroundColor: '#ffffff',
+        },
+      },
+    },
+    MuiAppBar: {
+      styleOverrides: {
+        root: {
+          backgroundColor: '#1976d2',
+        },
+      },
+    },
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          backgroundColor: '#ffffff',
+        },
+      },
+    },
+  },
+})
diff --git a/src/views/ConseilView.tsx b/src/views/ConseilView.tsx
index 5368850..5e3dcfe 100644
--- a/src/views/ConseilView.tsx
+++ b/src/views/ConseilView.tsx
@@ -149,10 +149,10 @@ export default function ConseilView() {
                       <ListItemIcon>
                         <Warning color={getRiskColor(risk) as any} />
                       </ListItemIcon>
-                      <ListItemText 
+                      <ListItemText
                         primary={risk}
                         primaryTypographyProps={{
-                          color: getRiskColor(risk) === 'error' ? 'error.main' : 
+                          color: getRiskColor(risk) === 'error' ? 'error.main' :
                                  getRiskColor(risk) === 'warning' ? 'warning.main' : 'info.main'
                         }}
                       />
@@ -177,7 +177,7 @@ export default function ConseilView() {
                   <ListItemIcon>
                     <Schedule color="primary" />
                   </ListItemIcon>
-                  <ListItemText 
+                  <ListItemText
                     primary={`Étape ${index + 1}`}
                     secondary={step}
                   />
diff --git a/src/views/UploadView.tsx b/src/views/UploadView.tsx
index cd8d342..65a4b91 100644
--- a/src/views/UploadView.tsx
+++ b/src/views/UploadView.tsx
@@ -76,7 +76,7 @@ export default function UploadView() {
       <Typography variant="h4" gutterBottom>
         Téléversement de documents
       </Typography>
-      
+
       <Paper
         {...getRootProps()}
         sx={{