From 1716a1bbdab0c1dd9faf499bae11b97bf0d6e74b Mon Sep 17 00:00:00 2001
From: Matt Bruce <mbrucedogs@gmail.com>
Date: Fri, 18 Jul 2025 14:41:23 -0500
Subject: [PATCH] Signed-off-by: Matt Bruce <mbrucedogs@gmail.com>

---
 src/components/Layout/Layout.tsx         | 8 +++-----
 src/components/Navigation/Navigation.tsx | 7 +++++--
 src/components/common/PlayerControls.tsx | 4 +---
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
index 4481723..803509f 100644
--- a/src/components/Layout/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@@ -1,9 +1,8 @@
 import React, { useState, useEffect } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { IonApp, IonHeader, IonToolbar, IonTitle, IonContent, IonMenuButton, IonIcon } from '@ionic/react';
 import { logOut } from 'ionicons/icons';
-import { selectControllerName } from '../../redux/authSlice';
 import { logout } from '../../redux/authSlice';
 import { ActionButton } from '../common';
 import Navigation from '../Navigation/Navigation';
@@ -11,7 +10,6 @@ import { getPageTitle } from '../../utils/routeUtils';
 import type { LayoutProps } from '../../types';
 
 const Layout: React.FC<LayoutProps> = ({ children }) => {
-  const controllerName = useSelector(selectControllerName);
   const dispatch = useDispatch();
   const location = useLocation();
   const [isLargeScreen, setIsLargeScreen] = useState(false);
@@ -55,8 +53,8 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
             {/* Only show hamburger button on mobile */}
             {!isLargeScreen && <IonMenuButton slot="start" />}
             
-            <IonTitle>
-              <div className="flex items-center">
+            <IonTitle style={{ textAlign: 'center', width: '100%' }}>
+              <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '100%' }}>
                 <span>{currentPageTitle}</span>
               </div>
             </IonTitle>
diff --git a/src/components/Navigation/Navigation.tsx b/src/components/Navigation/Navigation.tsx
index ac4e5e6..bbbb43c 100644
--- a/src/components/Navigation/Navigation.tsx
+++ b/src/components/Navigation/Navigation.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { IonMenu, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonLabel, IonIcon } from '@ionic/react';
+import { IonMenu, IonHeader, IonToolbar, IonContent, IonList, IonItem, IonLabel, IonIcon } from '@ionic/react';
 import { timeOutline, settingsOutline, listOutline, musicalNotesOutline, peopleOutline, peopleCircleOutline, heartOutline, searchOutline, starOutline } from 'ionicons/icons';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { PlayerControls } from '../common';
@@ -134,7 +134,10 @@ const Navigation: React.FC = () => {
     >
       <IonHeader>
         <IonToolbar>
-          <IonTitle>Menu</IonTitle>
+          <div style={{ padding: '16px', borderBottom: '1px solid #e5e7eb', backgroundColor: '#f9fafb' }}>
+            <h2 style={{ fontSize: '18px', fontWeight: '600', color: '#1f2937', margin: 0 }}>Karaoke</h2>
+            <p style={{ fontSize: '14px', color: '#6b7280', margin: '4px 0 0 0' }}>Singer: Matt</p>
+          </div>
         </IonToolbar>
       </IonHeader>
       <IonContent>
diff --git a/src/components/common/PlayerControls.tsx b/src/components/common/PlayerControls.tsx
index 4601604..a70a421 100644
--- a/src/components/common/PlayerControls.tsx
+++ b/src/components/common/PlayerControls.tsx
@@ -100,9 +100,7 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({ className = '', variant
     return (
       <div className={`bg-black text-white ${className}`}>
         {/* Status Text */}
-        <div style={{ padding: '0px 0px' }}>
-          <h3 className="text-lg font-bold">{getStatusText()}</h3>
-        </div>
+        <h3 className="text-lg font-bold">{getStatusText()}</h3>
         
         {/* Control Buttons */}
         <div>