modification du style de la page d'erreur 💄

cryptide_project/src/App.tsx

@@ -63,16 +63,7 @@ function App() {
 
   //const location = useLocation();
   const hasNavbarVisible = ["/", "/login", "/signup", "/play", "/lobby", "/endgame"]//.includes(window.location.pathname);
-
-
   return (
-  // <div className="App">
-  //   <header className="App-header">
-  //     <Home />
-  //     <img src={logo} className="App-logo" alt="logo" />
-  //   </header>
-  // </div>
-    
     <ErrorBoundary fallback={(error, errorInfo) => <ErrorPage />}>
       <AuthProvider>
         <GameProvider>
@@ -94,7 +85,7 @@ function App() {
                   <Route path="/join" element={<Lobbies/>}/>
                   {/* <Route path="/solo" element={<SoloGame locale={locale} changeLocale={changeLocale} />}/>   */}
 
-                  <Route path="*" element={<ErrorPage msg='404 not found' />} /> {/* page 404 */}
+                  <Route path="*" element={<ErrorPage code="404" msg='not found' />} /> {/* page 404 */}
                 </Routes>
               </BrowserRouter>
             </ThemeProvider>

cryptide_project/src/Error/ErrorPage.tsx

@@ -4,22 +4,31 @@ import { useTheme } from '../Style/ThemeContext';
 import { Link } from 'react-router-dom';
 import './ErrorStyle.css';
 import { FormattedMessage } from 'react-intl';
+import { Button } from 'react-bootstrap';
 
 
 
 //@ts-ignore
-function ErrorPage({ msg = "Something is really wrong"}) {
+function ErrorPage({ code = "", msg = "Something is wrong"}) {
     
     const theme = useTheme();
 
-    // const mystyle = {
-    //     backgroundColor: "#0064E0",
-    // };
 
     return (
         <div className='mainErrorDiv'>
             <div className='titleError'>
-                <h1>{msg}</h1>
+                <div>
+                    <h1>ERROR</h1>
+                    <hr style={{width:"100%"}}/>
+                </div>
+                { code != "" &&
+                    <h1 style={{color:'darkred', margin:'10px'}}>{code}</h1>
+                } 
+                <h2>{msg}</h2>
+            </div>
+
+            <div className='centerDivH' style={{margin: "20px"}}>
+                <Button href='/' variant='danger'>Retour à l'accueil</Button>
             </div>
         </div>
     );

cryptide_project/src/Error/ErrorStyle.css

@@ -1,6 +1,7 @@
 
 .mainErrorDiv{
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
 }
@@ -12,4 +13,17 @@
     margin: 15px;
     padding: 10px;  
     box-shadow: 5px 5px 5px #900C3F;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    width: 400px;
+    height: 250px;
+}
+
+.titleError h1 {
+    color: #900C3F;
+    margin: 10px !important;
 }