From a3216950c8d46b084705896a2d9143d45d5a0d57 Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Wed, 4 Feb 2026 09:06:17 +0100
Subject: [PATCH] Update TopBar UI for improved structure and clarity

Refactored the TopBar component to enhance readability and organization. Added labeled sections for user account, role display, and the "Neues Spiel" button. Adjusted styles and improved spacing for better UI consistency.
---
 frontend/src/components/TopBar.jsx | 51 ++++++++++++++++++++++++++----
 1 file changed, 45 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/TopBar.jsx b/frontend/src/components/TopBar.jsx
index 8cb0c6e..2b43917 100644
--- a/frontend/src/components/TopBar.jsx
+++ b/frontend/src/components/TopBar.jsx
@@ -12,25 +12,60 @@ export default function TopBar({
 }) {
   return (
     <div style={styles.topBar}>
+      {/* LINKS: nur Rolle */}
       <div>
-        <div style={{ fontWeight: 900, color: stylesTokens.textGold }}>{me.email}</div>
-        <div style={{ fontSize: 12, opacity: 0.8, color: stylesTokens.textDim }}>{me.role}</div>
+        <div style={{ fontWeight: 900, color: stylesTokens.textGold }}>
+          Zauber-Notizbogen
+        </div>
+        <div
+          style={{
+            fontSize: 12,
+            opacity: 0.8,
+            color: stylesTokens.textDim,
+          }}
+        >
+          Eingeloggt als {me.role}
+        </div>
       </div>
 
-      <div style={{ display: "flex", gap: 8, alignItems: "center" }} data-user-menu>
+      {/* RECHTS: Account + Neues Spiel */}
+      <div
+        style={{
+          display: "flex",
+          gap: 8,
+          alignItems: "center",
+          flexWrap: "nowrap",
+        }}
+        data-user-menu
+      >
+        {/* Account Dropdown */}
         <div style={{ position: "relative" }}>
           <button
             onClick={() => setUserMenuOpen((v) => !v)}
             style={styles.userBtn}
             title="User Menü"
           >
-            <span style={{ fontSize: 16, lineHeight: 1 }}>👤</span>
+            <span style={{ fontSize: 16 }}>👤</span>
             <span>Account</span>
-            <span style={{ opacity: 0.8 }}>▾</span>
+            <span style={{ opacity: 0.7 }}>▾</span>
           </button>
 
           {userMenuOpen && (
             <div style={styles.userDropdown}>
+              {/* Email Info */}
+              <div
+                style={{
+                  padding: "10px 12px",
+                  fontSize: 13,
+                  opacity: 0.85,
+                  color: stylesTokens.textDim,
+                  borderBottom: "1px solid rgba(233,216,166,0.12)",
+                }}
+              >
+                {me.email}
+              </div>
+
+              {/* Actions */}
               <button onClick={openPwModal} style={styles.userDropdownItem}>
                 Passwort setzen
               </button>
@@ -42,7 +77,10 @@ export default function TopBar({
                   setUserMenuOpen(false);
                   doLogout();
                 }}
-                style={{ ...styles.userDropdownItem, color: "#ffb3b3" }}
+                style={{
+                  ...styles.userDropdownItem,
+                  color: "#ffb3b3",
+                }}
               >
                 Logout
               </button>
@@ -50,6 +88,7 @@ export default function TopBar({
           )}
         </div>
 
+        {/* Neues Spiel Button */}
         <button onClick={newGame} style={styles.primaryBtn}>
           ✦ Neues Spiel
         </button>