Public/kithara-studio
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Clean up SettingsModal layout

Browse Source 
- Both danger zone rows now use flex items-start gap-4 for consistent
  text+button alignment with proper breathing room
- Added shrink-0 to buttons so they don't compress
- Added whitespace-nowrap to Delete All button so text doesn't wrap
- Shortened confirm button text to just 'Confirm' (was 'Confirm Delete')
- Moved confirmation warning inline under the description text instead
  of as a separate block below, keeping the row compact
- Shortened description text: 'Remove N clips. Cannot be undone.'
This commit is contained in:
rin.kagamine committed 2026-05-29 20:23:33 -04:00
1 parent e74c89e1b0
commit 4fab947d6c
1 file changed
+25 -28
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/SettingsModal.tsx
+25 -28
View File
@@ -76,15 +76,15 @@ export default function SettingsModal({ isOpen, onClose, onClearWaveforms, onDel
<div className="p-4 space-y-4">
{/* Clear Waveforms */}
<div className="flex items-center justify-between">
<div>
<div className="flex items-start gap-4">
<div className="flex-1 min-w-0">
<p className="text-sm text-white font-medium">Clear Waveform Cache</p>
<p className="text-xs text-lyria-muted mt-0.5">Delete all cached SVGs. They regenerate on next view.</p>
</div>
<button
onClick={handleClearWaveforms}
disabled={loading}
className="px-3 py-1.5 text-sm rounded bg-white/5 text-white hover:bg-white/10 disabled:opacity-50 transition-colors border border-white/10"
className="shrink-0 px-3 py-1.5 text-sm rounded bg-white/5 text-white hover:bg-white/10 disabled:opacity-50 transition-colors border border-white/10"
>
Clear
</button>
@@ -93,32 +93,29 @@ export default function SettingsModal({ isOpen, onClose, onClearWaveforms, onDel
<hr className="border-white/5" />
{/* Delete All */}
<div>
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-white font-medium">Delete All Tracks</p>
<p className="text-xs text-lyria-muted mt-0.5">
Remove {clipCount} clip{clipCount !== 1 ? 's' : ''}, MP3s, artwork, and waveforms. Cannot be undone.
</p>
</div>
<button
onClick={handleDeleteAll}
disabled={loading || clipCount === 0}
className={`px-3 py-1.5 text-sm rounded transition-colors border ${
confirmDelete
? 'bg-red-500 text-white hover:bg-red-600 border-red-500'
: 'bg-white/5 text-red-400 hover:bg-red-500/10 border-red-500/30'
} disabled:opacity-30`}
>
{confirmDelete ? 'Confirm Delete' : 'Delete All'}
</button>
</div>
{confirmDelete && (
<p className="text-xs text-red-400 mt-2">
Click again to confirm. This permanently deletes everything.
<div className="flex items-start gap-4">
<div className="flex-1 min-w-0">
<p className="text-sm text-white font-medium">Delete All Tracks</p>
<p className="text-xs text-lyria-muted mt-0.5">
Remove {clipCount} clip{clipCount !== 1 ? 's' : ''}. Cannot be undone.
</p>
)}
{confirmDelete && (
<p className="text-xs text-red-400 mt-1.5">
Click again to confirm permanent deletion.
</p>
)}
</div>
<button
onClick={handleDeleteAll}
disabled={loading || clipCount === 0}
className={`shrink-0 px-3 py-1.5 text-sm rounded transition-colors border whitespace-nowrap ${
confirmDelete
? 'bg-red-500 text-white hover:bg-red-600 border-red-500'
: 'bg-white/5 text-red-400 hover:bg-red-500/10 border-red-500/30'
} disabled:opacity-30`}
>
{confirmDelete ? 'Confirm' : 'Delete All'}
</button>
</div>
</div>
</div>