From 6b493265b290311ac4bd078285afb35de328b027 Mon Sep 17 00:00:00 2001
From: Rodolfo Ruiz <rodolfo.ruiz@heathus.com>
Date: Thu, 21 Aug 2025 20:14:19 -0600
Subject: [PATCH] chore: align the user name and icons to the right

---
 src/components/AppHeader.jsx | 31 +++++++++++++++----------------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/components/AppHeader.jsx b/src/components/AppHeader.jsx
index 71dea3c..3ce541a 100644
--- a/src/components/AppHeader.jsx
+++ b/src/components/AppHeader.jsx
@@ -14,7 +14,7 @@ export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
   };
 
   const [drawerExpanded, setDrawerExpanded] = useState(true);
-  const [currentPage, setCurrentPage] = useState('Dashboard'); 
+  const [currentPage, setCurrentPage] = useState('Dashboard');
   const { user } = useAuth();
 
   const isPrivate = zone === 'private';
@@ -25,7 +25,7 @@ export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
 
   const handleMenuSelect = (page) => {
     setCurrentPage(page);
-    onSelectMenuItem?.(page); 
+    onSelectMenuItem?.(page);
   };
 
   return (
@@ -51,31 +51,30 @@ export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
           <Typography
             variant="h6"
             noWrap
-            sx={{ color: '#40120EFF', fontWeight:'light', fontSize: '30px'}}
+            sx={{ color: '#40120EFF', fontWeight: 'light', fontSize: '30px' }}
           >
             {currentPage}
           </Typography>
         </Box>
 
-        {/* MIDDLE: Icon Buttons */}
-        <Box sx={{ display: 'flex', alignItems: 'center' }}>
-          <IconButton sx={{ mx: 1 }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: '10px', ml: 'auto' }}>
+          <IconButton>
             <img src="/refresh.png" alt="Reload" width={24} height={24} />
           </IconButton>
-          <IconButton sx={{ mx: 1 }}>
+          <IconButton>
             <img src="/alert.png" alt="Notifications" width={24} height={24} />
           </IconButton>
+
+          {user && (
+            <Box display="flex" alignItems="center" gap={1}>
+              <Avatar alt={user.name} src={user.picture} />
+              <Typography variant="body1" color="#40120EFF">
+                {user.name}
+              </Typography>
+            </Box>
+          )}
         </Box>
 
-        {/* RIGHT SIDE: User Info */}
-        {user && (
-          <Box display="flex" alignItems="center" gap={1}>
-            <Avatar alt={user.name} src={user.picture} />
-            <Typography variant="body1" color='#40120EFF'>{user.name}</Typography>
-          </Box>
-        )}
-
-        {/* Drawer (kept here for logic; reports expanded/collapsed to header) */}
         <MenuDrawer
           zone="private"
           onSelect={handleMenuSelect}