mbrucedogs/singsalot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Signed-off-by: Matt Bruce <mbrucedogs@gmail.com>

Browse Source
This commit is contained in:
Matt Bruce 2025-07-18 14:41:23 -05:00
parent e9a8682b31
commit 1716a1bbda
3 changed files with 9 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Layout/Layout.tsx
View File

@ -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>

7
src/components/Navigation/Navigation.tsx
View File

@ -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>

4
src/components/common/PlayerControls.tsx
View File

@ -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>