fix: button alignment in settings page

frontend/package.json

@@ -30,7 +30,6 @@
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-i18next": "^17.0.8",
-    "react-toastify": "^11.1.0",
     "tailwindcss": "^4.3.0",
     "validator": "^13.15.35",
     "zod": "^4.4.3"

frontend/src/App.tsx

@@ -1,9 +1,9 @@
 import { createRouter, RouterProvider } from "@tanstack/react-router";
 import "./App.css";
-import { ToastContainer } from "react-toastify";
 import { routeTree } from "./routeTree.gen";
+import { NotFound } from "./components/NotFound.tsx";
 
-const router = createRouter({ routeTree });
+const router = createRouter({ routeTree, defaultNotFoundComponent: NotFound });
 
 declare module "@tanstack/react-router" {
   interface Register {
@@ -12,23 +12,7 @@ declare module "@tanstack/react-router" {
 }
 
 function App() {
-  return (
+  return <RouterProvider router={router} />;
-    <>
-      <ToastContainer
-        position="top-right"
-        autoClose={5000}
-        hideProgressBar={false}
-        newestOnTop={false}
-        closeOnClick={false}
-        rtl={false}
-        pauseOnFocusLoss
-        draggable
-        pauseOnHover
-        theme="colored"
-      />
-      <RouterProvider router={router} />
-    </>
-  );
 }
 
 export default App;

frontend/src/components/NotFound.tsx

@@ -0,0 +1,17 @@
+import { Typography } from "@mui/joy";
+import { useTranslation } from "react-i18next";
+
+export const NotFound = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={"flex flex-col items-center gap-2"}>
+      <Typography color={"primary"} level={"h1"}>
+        {t("not-found-header")}
+      </Typography>
+      <Typography className={"text-slate-900"} level={"body-lg"}>
+        {t("not-found-body")}
+      </Typography>
+    </div>
+  );
+};

frontend/src/pages/Settings.tsx

@@ -178,7 +178,7 @@ export const Settings = () => {
                 </div>
               </div>
             </div>
-            <div className="flex flex-wrap items-center justify-between gap-3">
+            <div className="flex flex-wrap items-center justify-end gap-3">
               <Button
                 type="submit"
                 size="lg"

frontend/src/utils/i18n/locales/de/de.json

@@ -58,6 +58,8 @@
   "success": "Erfolg",
   "submit": "Absenden",
   "logout-success-text": "Logout erfolgreich!",
+  "not-found-header": "404 - Nicht gefunden",
+  "not-found-body": "Die Seite nach der du gesucht hast, gibt es nicht.",
   "SU005": "Das Passwort wurde erfolgreich geändert!",
   "SE001": "Die Einstellungen wurden erfolgreich geändert!",
   "EG001": "Ein unerwarteter Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.",

frontend/src/utils/i18n/locales/en/en.json

@@ -58,6 +58,8 @@
   "success": "Success",
   "submit": "Submit",
   "logout-success-text": "Logout successful!",
+  "not-found-header": "404 - Not found",
+  "not-found-body": "The page you were looking for, does not exist.",
   "SU005": "Your password is updated successfully!",
   "SE001": "The settings are updated successfully!",
   "EG001": "An unexpected error occurred. Please try again later.",

package-lock.json

@@ -59,7 +59,6 @@
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react-i18next": "^17.0.8",
-        "react-toastify": "^11.1.0",
         "tailwindcss": "^4.3.0",
         "validator": "^13.15.35",
         "zod": "^4.4.3"