Format SettingsMenu.tsx

frontend/src/components/SettingsMenu.tsx

@@ -1,8 +1,10 @@
-// src/components/basics/SettingsMenu.tsx
 import {X} from "lucide-react";
 import {useNavigate} from "react-router-dom";
 import type {LoginResponse} from "../api/dtos/LoginResponse.ts";
 import {getUserUrl} from "../routes.ts";
+import Button from "./basics/Button.tsx";
+import {ButtonType} from "./basics/BasicButtonDefinitions.ts";
+import type {UserDto} from "../api/dtos/UserDto.ts";
 
 /**
  * Overlay settings menu that displays current user info
@@ -20,6 +22,13 @@ export function SettingsMenu({onClose}: SettingsMenuProps) {
         : null;
     const user = loginData?.userData;
 
+    const formatUserName = (user: UserDto) => {
+        const parts = [];
+        if (user.firstName) parts.push(user.firstName);
+        if (user.lastName) parts.push(user.lastName);
+        return parts.length > 0 ? parts.join(" ") : user.userName;
+    };
+
     return (
         <div className="fixed inset-0 bg-black/40 flex justify-end z-50">
             <div className="bg-white dark:bg-gray-800 w-80 p-6 shadow-xl flex flex-col">
@@ -36,21 +45,20 @@ export function SettingsMenu({onClose}: SettingsMenuProps) {
                 {user ? (
                     <>
                         <p className="text-gray-800 dark:text-gray-100 font-medium">
-                            {user.firstName} {user.lastName}
+                            {formatUserName(user)}
                         </p>
                         <p className="text-gray-600 dark:text-gray-400 text-sm mb-6">
                             {user.role === "admin" ? "Administrator" : "Benutzer"}
                         </p>
 
-                        <button
+                        <Button
                             onClick={() => {
                                 navigate(getUserUrl());
                                 onClose();
                             }}
-                            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition"
-                        >
-                            Benutzerverwaltung
-                        </button>
+                            buttonType={ButtonType.PrimaryButton}
+                            text={"Benutzerverwaltung"}
+                        />
                     </>
                 ) : (
                     <p className="text-gray-500">Nicht eingeloggt</p>

frontend/src/components/users/UserList.tsx

@@ -31,7 +31,6 @@ export default function UserList({users, selectedUser, onSelectUser}: UserListPr
                             selectedUser?.id === user.id && "bg-blue-100 hover:bg-blue-200"
                         )}
                         onClick={() => {
-                            console.log("selecting user", user.userName);
                             onSelectUser(user)
                         }}
                     >