style: reorganize action buttons in StatusPage for improved layout and accessibility
This commit is contained in:
parent
fa3f84e42e
commit
a8b1aadb1c
|
|
@ -68,20 +68,7 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
|
|||
<h2 className="text-sm text-neutral-500">System Status</h2>
|
||||
|
||||
<div className="bg-white border border-neutral-200 rounded-lg p-4">
|
||||
<div className="flex gap-2 mb-4">
|
||||
<button
|
||||
className="flex items-center gap-2 px-3 py-2 rounded bg-blue-600 text-white hover:bg-blue-700 transition text-sm font-medium"
|
||||
onClick={() => { setShowResetModal('meatloaf'); setResetStatus('idle'); }}
|
||||
>
|
||||
<RefreshCw className="w-4 h-4" /> Reset Meatloaf
|
||||
</button>
|
||||
<button
|
||||
className="flex items-center gap-2 px-3 py-2 rounded bg-blue-600 text-white hover:bg-blue-700 transition text-sm font-medium"
|
||||
onClick={() => { setShowResetModal('host'); setResetStatus('idle'); }}
|
||||
>
|
||||
<RefreshCw className="w-4 h-4" /> Reset Host
|
||||
</button>
|
||||
</div>
|
||||
{/* System Status Action Buttons at bottom */}
|
||||
<div className="mb-4">
|
||||
<div className="text-xs text-neutral-500 mb-1">Memory Utilization</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
|
|
@ -135,6 +122,20 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2 mt-6">
|
||||
<button
|
||||
className="flex items-center justify-center gap-2 px-3 py-3 rounded bg-blue-600 text-white hover:bg-blue-700 transition text-base font-medium w-full"
|
||||
onClick={() => { setShowResetModal('meatloaf'); setResetStatus('idle'); }}
|
||||
>
|
||||
<RefreshCw className="w-5 h-5" /> Reset Meatloaf
|
||||
</button>
|
||||
<button
|
||||
className="flex items-center justify-center gap-2 px-3 py-3 rounded bg-blue-600 text-white hover:bg-blue-700 transition text-base font-medium w-full"
|
||||
onClick={() => { setShowResetModal('host'); setResetStatus('idle'); }}
|
||||
>
|
||||
<RefreshCw className="w-5 h-5" /> Reset Host
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{activeDevice && (
|
||||
|
|
@ -157,21 +158,7 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
|
|||
<div className="w-2 h-2 rounded-full bg-green-500" />
|
||||
</div>
|
||||
|
||||
{/* Directory and Disk Map buttons */}
|
||||
<div className="flex gap-2 mb-4">
|
||||
<button
|
||||
className="flex items-center gap-2 px-3 py-2 rounded bg-neutral-200 text-neutral-700 hover:bg-blue-600 hover:text-white transition text-sm font-medium"
|
||||
onClick={() => setShowDirectory(true)}
|
||||
>
|
||||
<FolderOpen className="w-4 h-4" /> Show Directory
|
||||
</button>
|
||||
<button
|
||||
className="flex items-center gap-2 px-3 py-2 rounded bg-neutral-200 text-neutral-700 hover:bg-blue-600 hover:text-white transition text-sm font-medium"
|
||||
onClick={() => setShowDiskMap(true)}
|
||||
>
|
||||
<Map className="w-4 h-4" /> Show Disk Map
|
||||
</button>
|
||||
</div>
|
||||
{/* Directory and Disk Map buttons at bottom */}
|
||||
|
||||
{/* New device info cards */}
|
||||
<div className="mb-4">
|
||||
|
|
@ -249,6 +236,20 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
|
|||
</div>
|
||||
);
|
||||
})()}
|
||||
<div className="flex flex-col gap-2 mt-6">
|
||||
<button
|
||||
className="flex items-center justify-center gap-2 px-3 py-3 rounded bg-neutral-200 text-neutral-700 hover:bg-blue-600 hover:text-white transition text-base font-medium w-full"
|
||||
onClick={() => setShowDirectory(true)}
|
||||
>
|
||||
<FolderOpen className="w-5 h-5" /> Show Directory
|
||||
</button>
|
||||
<button
|
||||
className="flex items-center justify-center gap-2 px-3 py-3 rounded bg-neutral-200 text-neutral-700 hover:bg-blue-600 hover:text-white transition text-base font-medium w-full"
|
||||
onClick={() => setShowDiskMap(true)}
|
||||
>
|
||||
<Map className="w-5 h-5" /> Show Disk Map
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showDeviceOverlay && (
|
||||
|
|
@ -275,12 +276,12 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
|
|||
{showDirectory && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
||||
<div className="absolute inset-0 bg-black/40 backdrop-blur-md" onClick={() => setShowDirectory(false)} />
|
||||
<div className="relative w-full h-full max-w-2xl sm:rounded-xl bg-white/90 shadow-2xl overflow-auto flex flex-col justify-center mx-0 sm:mx-auto my-0 sm:my-20 p-0 sm:p-0" style={{ maxHeight: '100dvh' }}>
|
||||
<div className="relative w-full h-full max-w-2xl sm:rounded-xl bg-white/90 shadow-2xl overflow-auto flex flex-col mx-0 sm:mx-auto my-0 sm:my-20 p-0 sm:p-0" style={{ maxHeight: '100dvh' }}>
|
||||
<div className="flex items-center justify-between p-4 border-b">
|
||||
<h2 className="text-xl font-medium">Directory</h2>
|
||||
<button onClick={() => setShowDirectory(false)} className="p-2 -m-2 hover:bg-neutral-100 rounded-lg"><X className="w-6 h-6" /></button>
|
||||
<button onClick={() => setShowDirectory(false)} className="p-2 -m-2 hover:bg-neutral-100 rounded-lg"><svg xmlns='http://www.w3.org/2000/svg' className='w-6 h-6' fill='none' viewBox='0 0 24 24' stroke='currentColor'><path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' /></svg></button>
|
||||
</div>
|
||||
<div className="flex-1 overflow-auto">
|
||||
<div className="flex-1 overflow-auto p-4">
|
||||
<FileBrowser currentPath={activeDevice.url ? activeDevice.url.replace(/\/[^/]+$/, '') : '/'} onSelect={() => {}} onClose={() => setShowDirectory(false)} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -291,12 +292,12 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
|
|||
{showDiskMap && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
||||
<div className="absolute inset-0 bg-black/40 backdrop-blur-md" onClick={() => setShowDiskMap(false)} />
|
||||
<div className="relative w-full h-full max-w-2xl sm:rounded-xl bg-white/90 shadow-2xl overflow-auto flex flex-col justify-center mx-0 sm:mx-auto my-0 sm:my-20 p-0 sm:p-0" style={{ maxHeight: '100dvh' }}>
|
||||
<div className="relative w-full h-full max-w-2xl sm:rounded-xl bg-white/90 shadow-2xl overflow-auto flex flex-col mx-0 sm:mx-auto my-0 sm:my-20 p-0 sm:p-0" style={{ maxHeight: '100dvh' }}>
|
||||
<div className="flex items-center justify-between p-4 border-b">
|
||||
<h2 className="text-xl font-medium">Disk Map</h2>
|
||||
<button onClick={() => setShowDiskMap(false)} className="p-2 -m-2 hover:bg-neutral-100 rounded-lg"><X className="w-6 h-6" /></button>
|
||||
<button onClick={() => setShowDiskMap(false)} className="p-2 -m-2 hover:bg-neutral-100 rounded-lg"><svg xmlns='http://www.w3.org/2000/svg' className='w-6 h-6' fill='none' viewBox='0 0 24 24' stroke='currentColor'><path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' /></svg></button>
|
||||
</div>
|
||||
<div className="flex-1 overflow-auto flex items-center justify-center text-neutral-500">
|
||||
<div className="flex-1 overflow-auto flex items-center justify-center text-neutral-500 p-4">
|
||||
<span>Disk map visualization goes here.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user