From 11e3d3d31ff7489305e6f7dad0608eeb7d98fb76 Mon Sep 17 00:00:00 2001
From: Adam Moussa <166072409+amoussa1229@users.noreply.github.com>
Date: Thu, 16 Apr 2026 19:18:27 -0400
Subject: [PATCH] Redesign top header bar

- Remove search box from topbar (search is now on list pages)
- Clean notification bell icon
- User avatar with initials, name, and role displayed
- Divider between notifications and user section
- Logout as subtle icon button instead of red inline-styled button
- Remove inline styles, all styling via CSS classes
---
 src/components/Topbar.js | 37 ++++++++-----------
 src/index.css            | 79 +++++++++++++++++++++++++++++-----------
 2 files changed, 73 insertions(+), 43 deletions(-)

diff --git a/src/components/Topbar.js b/src/components/Topbar.js
index 7f34e742..de559b8f 100644
--- a/src/components/Topbar.js
+++ b/src/components/Topbar.js
@@ -31,32 +31,25 @@ export default function Topbar({ onToggleNav }) {
         >
           ☰
         </button>
-
-        <div className="searchBox">
-          <input placeholder="Search by name or number..." />
-        </div>
       </div>
 
       <div className="topRight">
-        <div className="notif">
-          🔔<span className="dot">1</span>
+        <button className="topbarIconBtn" title="Notifications">
+          <i className="fa fa-bell-o"></i>
+        </button>
+
+        <div className="topbarDivider" />
+
+        <div className="topbarUser">
+          <div className="avatar">{getInitials(currentUser?.fullname)}</div>
+          <div className="topbarUserInfo">
+            <span className="topbarUserName">{currentUser?.fullname || "User"}</span>
+            <span className="topbarUserRole">{currentUser?.userRoles || ""}</span>
+          </div>
         </div>
-        <div className="username">{currentUser?.fullname || "User"}</div>
-        <div className="avatar">{getInitials(currentUser?.fullname)}</div>
-        <button
-          onClick={handleLogout}
-          style={{
-            marginLeft: "15px",
-            padding: "6px 12px",
-            backgroundColor: "#dc3545",
-            color: "white",
-            border: "none",
-            borderRadius: "4px",
-            cursor: "pointer",
-            fontSize: "13px",
-          }}
-        >
-          Logout
+
+        <button className="topbarIconBtn topbarLogout" onClick={handleLogout} title="Logout">
+          <i className="fa fa-sign-out"></i>
         </button>
       </div>
     </header>
diff --git a/src/index.css b/src/index.css
index 541ff956..2ad15eb0 100644
--- a/src/index.css
+++ b/src/index.css
@@ -233,30 +233,47 @@ body {
   margin-right: 12px;
 }
 
-.searchBox {
-  background: #083a52;
-  padding: 4px;
-  border-radius: 4px;
-  min-width: 420px;
-  transition: min-width .25s ease;
-}
-
-.app.nav-collapsed .searchBox {
-  min-width: 300px;
-}
-
-.searchBox input {
-  width: 100%;
-  padding: 6px 8px;
-  border: none;
-  border-radius: 3px;
-}
-
-/* Top right */
 .topRight {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 8px;
+}
+
+.topbarIconBtn {
+  background: none;
+  border: none;
+  color: rgba(255,255,255,0.7);
+  font-size: 16px;
+  cursor: pointer;
+  padding: 6px 8px;
+  border-radius: 4px;
+}
+
+.topbarIconBtn:hover {
+  color: #fff;
+  background: rgba(255,255,255,0.1);
+}
+
+.topbarLogout {
+  color: rgba(255,255,255,0.5);
+}
+
+.topbarLogout:hover {
+  color: #ff6b6b;
+  background: rgba(255,100,100,0.1);
+}
+
+.topbarDivider {
+  width: 1px;
+  height: 24px;
+  background: rgba(255,255,255,0.15);
+  margin: 0 4px;
+}
+
+.topbarUser {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
 .avatar {
@@ -268,6 +285,26 @@ body {
   align-items: center;
   justify-content: center;
   font-weight: 600;
+  font-size: 12px;
+  color: #fff;
+  flex-shrink: 0;
+}
+
+.topbarUserInfo {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.2;
+}
+
+.topbarUserName {
+  font-size: 13px;
+  font-weight: 600;
+  color: #fff;
+}
+
+.topbarUserRole {
+  font-size: 11px;
+  color: rgba(255,255,255,0.5);
 }
 
 /* =========================================================