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 React, { useState, useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux'; import { useDispatch } from 'react-redux';
import { useLocation } from 'react-router-dom'; import { useLocation } from 'react-router-dom';
import { IonApp, IonHeader, IonToolbar, IonTitle, IonContent, IonMenuButton, IonIcon } from '@ionic/react'; import { IonApp, IonHeader, IonToolbar, IonTitle, IonContent, IonMenuButton, IonIcon } from '@ionic/react';
import { logOut } from 'ionicons/icons'; import { logOut } from 'ionicons/icons';
import { selectControllerName } from '../../redux/authSlice';
import { logout } from '../../redux/authSlice'; import { logout } from '../../redux/authSlice';
import { ActionButton } from '../common'; import { ActionButton } from '../common';
import Navigation from '../Navigation/Navigation'; import Navigation from '../Navigation/Navigation';
@ -11,7 +10,6 @@ import { getPageTitle } from '../../utils/routeUtils';
import type { LayoutProps } from '../../types'; import type { LayoutProps } from '../../types';
const Layout: React.FC<LayoutProps> = ({ children }) => { const Layout: React.FC<LayoutProps> = ({ children }) => {
const controllerName = useSelector(selectControllerName);
const dispatch = useDispatch(); const dispatch = useDispatch();
const location = useLocation(); const location = useLocation();
const [isLargeScreen, setIsLargeScreen] = useState(false); const [isLargeScreen, setIsLargeScreen] = useState(false);
@ -55,8 +53,8 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
{/* Only show hamburger button on mobile */} {/* Only show hamburger button on mobile */}
{!isLargeScreen && <IonMenuButton slot="start" />} {!isLargeScreen && <IonMenuButton slot="start" />}
<IonTitle> <IonTitle style={{ textAlign: 'center', width: '100%' }}>
<div className="flex items-center"> <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '100%' }}>
<span>{currentPageTitle}</span> <span>{currentPageTitle}</span>
</div> </div>
</IonTitle> </IonTitle>

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

@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react'; 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 { timeOutline, settingsOutline, listOutline, musicalNotesOutline, peopleOutline, peopleCircleOutline, heartOutline, searchOutline, starOutline } from 'ionicons/icons';
import { useLocation, useNavigate } from 'react-router-dom'; import { useLocation, useNavigate } from 'react-router-dom';
import { PlayerControls } from '../common'; import { PlayerControls } from '../common';
@ -134,7 +134,10 @@ const Navigation: React.FC = () => {
> >
<IonHeader> <IonHeader>
<IonToolbar> <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> </IonToolbar>
</IonHeader> </IonHeader>
<IonContent> <IonContent>

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

@ -100,9 +100,7 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({ className = '', variant
return ( return (
<div className={`bg-black text-white ${className}`}> <div className={`bg-black text-white ${className}`}>
{/* Status Text */} {/* Status Text */}
<div style={{ padding: '0px 0px' }}> <h3 className="text-lg font-bold">{getStatusText()}</h3>
<h3 className="text-lg font-bold">{getStatusText()}</h3>
</div>
{/* Control Buttons */} {/* Control Buttons */}
<div> <div>