refactor App.tsx: better convention

frontend/src/App.tsx

@@ -1,5 +1,5 @@
 import { Routes, Route } from 'react-router-dom';
-import { ReactElement, useEffect } from 'react';
+import { useEffect } from 'react';
 import Navigation from './Navigation';
 import Conversation from './conversation/Conversation';
 import About from './About';
@@ -9,11 +9,12 @@ import { useMediaQuery } from './hooks';
 import { useState } from 'react';
 import Setting from './settings';
 import './locale/i18n';
+import { Outlet } from 'react-router-dom';
 import SharedConversation from './conversation/SharedConversation';
 import { useDarkTheme } from './hooks';
 inject();
 
-function MainLayout({ children }: { children: ReactElement }) {
+function MainLayout() {
   const { isMobile } = useMediaQuery();
   const [navOpen, setNavOpen] = useState(!isMobile);
   return (
@@ -26,15 +27,12 @@ function MainLayout({ children }: { children: ReactElement }) {
             : 'ml-0 md:ml-16'
         }`}
       >
-        {children}
+        <Outlet />
       </div>
     </div>
   );
 }
 
-function Layout({ children }: { children: ReactElement }) {
-  return <div className="h-full dark:bg-raisin-black">{children}</div>;
-}
 export default function App() {
   const [isDarkTheme] = useDarkTheme();
   useEffect(() => {
@@ -50,47 +48,13 @@ export default function App() {
   return (
     <>
       <Routes>
-        <Route
-          path="/"
-          element={
-            <MainLayout>
-              <Conversation />
-            </MainLayout>
-          }
-        />
-        <Route
-          path="/about"
-          element={
-            <MainLayout>
-              <About />
-            </MainLayout>
-          }
-        />
-        <Route
-          path="/settings"
-          element={
-            <MainLayout>
-              <Setting />
-            </MainLayout>
-          }
-        />
-        <Route
-          path="/share/:identifier"
-          element={
-            <Layout>
-              <SharedConversation />
-            </Layout>
-          }
-        />
-        {/* default page */}
-        <Route
-          path="/*"
-          element={
-            <Layout>
-              <PageNotFound />
-            </Layout>
-          }
-        />
+        <Route element={<MainLayout />}>
+          <Route index element={<Conversation />} />
+          <Route path="/about" element={<About />} />
+          <Route path="/settings" element={<Setting />} />
+        </Route>
+        <Route path="/share/:identifier" element={<SharedConversation />} />
+        <Route path="/*" element={<PageNotFound />} />
       </Routes>
     </>
   );

frontend/src/PageNotFound.tsx

@@ -2,11 +2,11 @@ import { Link } from 'react-router-dom';
 
 export default function PageNotFound() {
   return (
-    <div className="mx-5 grid min-h-screen md:mx-36">
-      <p className="mx-auto my-auto mt-20 flex w-full max-w-6xl flex-col place-items-center gap-6 rounded-3xl bg-gray-100 p-6 text-jet lg:p-10 xl:p-16">
+    <div className="grid min-h-screen dark:bg-raisin-black">
+      <p className="mx-auto my-auto mt-20 flex w-full max-w-6xl flex-col place-items-center gap-6 rounded-3xl bg-gray-100 p-6 text-jet dark:bg-outer-space dark:text-gray-100 lg:p-10 xl:p-16">
         <h1>404</h1>
         <p>The page you are looking for does not exist.</p>
-        <button className="pointer-cursor mr-4 flex cursor-pointer items-center justify-center rounded-full bg-blue-1000 py-2 px-4 text-white hover:bg-blue-3000">
+        <button className="pointer-cursor mr-4 flex cursor-pointer items-center justify-center rounded-full bg-blue-1000 py-2 px-4 text-white transition-colors duration-100 hover:bg-blue-3000">
           <Link to="/">Go Back Home</Link>
         </button>
       </p>

frontend/src/conversation/SharedConversation.tsx

@@ -89,7 +89,7 @@ const SharedConversation = () => {
   }, []);
 
   return (
-    <div className="flex h-full flex-col items-center justify-between gap-2  overflow-y-hidden">
+    <div className="flex h-full flex-col items-center justify-between gap-2 overflow-y-hidden dark:bg-raisin-black">
       <div className="flex w-full justify-center overflow-auto">
         <div className="mt-0 w-11/12 md:w-10/12 lg:w-6/12">
           <div className="mb-2 w-full border-b pb-2">