added translations

01-frontend/public/locales/de/translation.json

@@ -23,6 +23,7 @@
   "contact": "Kontakt",
   "country": "Land",
   "currentAccount": "Konto des aktuellen Benutzers",
+  "darkMode": "Zu dunklem Modus wechseln",
   "deleteAccount": "Konto löschen",
   "edit": "Bearbeiten",
   "email": "E-Mail",
@@ -34,6 +35,7 @@
   "item": "Artikel",
   "items": "Artikel",
   "lastName": "Nachname",
+  "lightMode": "Zu hellem Modus wechseln",
   "logout": "Ausloggen",
   "myAccount": "Mein Konto",
   "myOrders": "Meine Bestellungen",
@@ -41,6 +43,7 @@
   "next": "Weiter",
   "noActiveOrders": "Keine laufenden Bestellungen.",
   "noPreviousOrders": "Keine vergangenen Bestellungen.",
+  "openSettings": "Einstellungen öffnen",
   "order": "Bestellung",
   "orderCancelled": "Folgende Bestellung wurde storniert:",
   "orderDate": "Bestelldatum",

01-frontend/public/locales/en/translation.json

@@ -24,6 +24,7 @@
   "country": "Country",
   "currentAccount": "Account of current user",
   "deleteAccount": "Delete Account",
+  "darkMode": "Zu dunklem Modus wechseln",
   "edit": "Edit",
   "email": "Email",
   "finish": "Finish",
@@ -34,6 +35,7 @@
   "item": "Item",
   "items": "items",
   "lastName": "Last name",
+  "lightMode": "Zu hellem Modus wechseln",
   "logout": "Logout",
   "myAccount": "My Account",
   "myOrders": "My Orders",
@@ -41,6 +43,7 @@
   "next": "Next",
   "noActiveOrders": "No active orders.",
   "noPreviousOrders": "No previous orders.",
+  "openSettings": "Open settings",
   "order": "Order",
   "orderCancelled": "The following order has been cancelled:",
   "orderDate": "Order date",

01-frontend/src/helper/navbar/NavBar.tsx

@@ -164,15 +164,14 @@ export default function NavBar() {
                         </Menu>
                     </Box>
 
-                    {/* Theme Toggle & Avatar (immer sichtbar) */}
                     <ThemeToggle />
-                    <Tooltip title="Open settings">
+                    <Tooltip title={t('openSettings')}>
                         <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
                             <Avatar alt="Florian Speicher" src="/static/images/avatar/2.jpg" />
                         </IconButton>
                     </Tooltip>
                     <Menu
-                        sx={{ mt: "45px" }}
+                        sx={{ mt: "15px" }}
                         id="menu-appbar-user"
                         anchorEl={anchorElUser}
                         open={Boolean(anchorElUser)}

01-frontend/src/theme/ThemeToggle.tsx

@@ -3,12 +3,15 @@ import React from 'react';
 import { IconButton, Tooltip } from '@mui/material';
 import { Brightness4, Brightness7 } from '@mui/icons-material';
 import { useThemeMode } from './ThemeContext';
+import { useTranslation } from "react-i18next";
 
 const ThemeToggle: React.FC = () => {
     const { mode, toggleMode } = useThemeMode();
+    const { t } = useTranslation();
 
     return (
-        <Tooltip title={mode === 'dark' ? 'Zu hellem Modus wechseln' : 'Zu dunklem Modus wechseln'}>
+        <Tooltip title={mode === 'dark' ? t('lightMode') : t('darkMode')}>
+
         <IconButton
                 onClick={toggleMode}
                 color="inherit"