5 files changed, 13 insertions, 8 deletions
diff --git a/FrontEnd/package.json b/FrontEnd/package.json
index 7ff4c5f6..93c632be 100644
--- a/FrontEnd/package.json
+++ b/FrontEnd/package.json
@@ -21,9 +21,9 @@
     "marked": "^4.0.14",
     "moment": "^2.29.2",
     "pepjs": "^0.5.3",
-    "react": "^17.0.0",
+    "react": "^18.0.0",
     "react-color": "^2.19.3",
-    "react-dom": "^17.0.0",
+    "react-dom": "^18.0.0",
     "react-i18next": "^11.16.6",
     "react-popper": "^2.3.0",
     "react-responsive": "^8.2.0",
@@ -52,9 +52,9 @@
     "@types/lodash": "^4.14.181",
     "@types/marked": "^4.0.3",
     "@types/node": "^17.0.30",
-    "@types/react": "^17.0.0",
+    "@types/react": "^18.0.0",
     "@types/react-color": "^3.0.6",
-    "@types/react-dom": "^17.0.0",
+    "@types/react-dom": "^18.0.0",
     "@types/react-responsive": "^8.0.5",
     "@types/react-transition-group": "^4.4.4",
     "@typescript-eslint/eslint-plugin": "^5.21.0",
@@ -70,4 +70,4 @@
     "vite": "^2.9.6",
     "vite-plugin-pwa": "^0.12.0"
   }
-}
+}
+\ No newline at end of file
diff --git a/FrontEnd/src/views/admin/UserAdmin.tsx b/FrontEnd/src/views/admin/UserAdmin.tsx
index 6c411be8..fd4ff881 100644
--- a/FrontEnd/src/views/admin/UserAdmin.tsx
+++ b/FrontEnd/src/views/admin/UserAdmin.tsx
@@ -40,7 +40,7 @@ const CreateUserDialog: React.FC<{
   );
 };
 
-const UsernameLabel: React.FC = (props) => {
+const UsernameLabel: React.FC<{ children: React.ReactNode }> = (props) => {
   return <span style={{ color: "blue" }}>{props.children}</span>;
 };
 
diff --git a/FrontEnd/src/views/common/dailog/FullPageDialog.tsx b/FrontEnd/src/views/common/dailog/FullPageDialog.tsx
index 45454b7d..3c7f9d0b 100644
--- a/FrontEnd/src/views/common/dailog/FullPageDialog.tsx
+++ b/FrontEnd/src/views/common/dailog/FullPageDialog.tsx
@@ -9,6 +9,7 @@ export interface FullPageDialogProps {
   show: boolean;
   onBack: () => void;
   contentContainerClassName?: string;
+  children: React.ReactNode;
 }
 
 const FullPageDialog: React.FC<FullPageDialogProps> = ({
diff --git a/FrontEnd/src/views/settings/index.tsx b/FrontEnd/src/views/settings/index.tsx
index 51053d6f..8110002b 100644
--- a/FrontEnd/src/views/settings/index.tsx
+++ b/FrontEnd/src/views/settings/index.tsx
@@ -19,6 +19,7 @@ import "./index.css";
 
 interface SettingSectionProps {
   title: I18nText;
+  children: React.ReactNode;
 }
 
 const SettingSection: React.FC<SettingSectionProps> = ({ title, children }) => {
diff --git a/FrontEnd/src/views/timeline/TimelineDeleteDialog.tsx b/FrontEnd/src/views/timeline/TimelineDeleteDialog.tsx
index 1b7a2cc1..5b57b0c4 100644
--- a/FrontEnd/src/views/timeline/TimelineDeleteDialog.tsx
+++ b/FrontEnd/src/views/timeline/TimelineDeleteDialog.tsx
@@ -25,8 +25,11 @@ const TimelineDeleteDialog: React.FC<TimelineDeleteDialog> = (props) => {
       themeColor="danger"
       inputPrompt={() => {
         return (
-          <Trans i18nKey="timeline.deleteDialog.inputPrompt">
-            0<code className="mx-2">{{ name: timeline.nameV2 }}</code>2
+          <Trans
+            i18nKey="timeline.deleteDialog.inputPrompt"
+            values={[{ name: timeline.nameV2 }]}
+          >
+            0<code className="mx-2">1</code>2
           </Trans>
         );
       }}