valknar/audio-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve info box readability in EditControls and HistoryControls

Browse Source 
Enhanced info boxes with better contrast and visibility:
- Increased background opacity from /10 to /90 for blue info boxes
- Changed to thicker border (border-2) for better definition
- Changed text color to white for better contrast on blue background
- Applied consistent styling across:
  * Selection Active info box (EditControls)
  * History Available info box (HistoryControls)

Info boxes are now clearly readable in both light and dark modes.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2025-11-17 17:16:24 +01:00
parent cbd9ad03fc
commit d1ff709400
2 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/editor/EditControls.tsx
View File

@@ -37,17 +37,17 @@ export function EditControls({
<div className={cn('space-y-4', className)}>
{/* Selection Info */}
{hasSelection && (
<div className="rounded-lg border border-info bg-info/10 p-3">
<div className="rounded-lg border-2 border-info bg-info/90 p-3">
<div className="flex items-start gap-2">
<Info className="h-4 w-4 text-info-foreground mt-0.5 flex-shrink-0" />
<div className="flex-1 min-w-0 text-sm">
<p className="font-medium text-info-foreground">Selection Active</p>
<p className="text-info-foreground/90 mt-1">
<Info className="h-4 w-4 text-white dark:text-white mt-0.5 flex-shrink-0" />
<div className="flex-1 min-w-0 text-sm text-white dark:text-white">
<p className="font-medium">Selection Active</p>
<p className="opacity-95 mt-1">
Duration: {formatDuration(selectionDuration)} |
Start: {formatDuration(selection.start)} |
End: {formatDuration(selection.end)}
</p>
<p className="text-xs text-info-foreground/75 mt-1">
<p className="text-xs opacity-90 mt-1">
Tip: Hold Shift and drag on the waveform to select a region
</p>
</div>

14
components/editor/HistoryControls.tsx
View File

@@ -25,21 +25,21 @@ export function HistoryControls({
<div className={cn('space-y-4', className)}>
{/* History Info */}
{historyState.historySize > 0 && (
<div className="rounded-lg border border-info bg-info/10 p-3">
<div className="rounded-lg border-2 border-info bg-info/90 p-3">
<div className="flex items-start gap-2">
<Info className="h-4 w-4 text-info-foreground mt-0.5 flex-shrink-0" />
<div className="flex-1 min-w-0 text-sm">
<p className="font-medium text-info-foreground">History Available</p>
<p className="text-info-foreground/90 mt-1">
<Info className="h-4 w-4 text-white dark:text-white mt-0.5 flex-shrink-0" />
<div className="flex-1 min-w-0 text-sm text-white dark:text-white">
<p className="font-medium">History Available</p>
<p className="opacity-95 mt-1">
{historyState.historySize} action{historyState.historySize !== 1 ? 's' : ''} in history
</p>
{historyState.undoDescription && (
<p className="text-xs text-info-foreground/75 mt-1">
<p className="text-xs opacity-90 mt-1">
Next undo: {historyState.undoDescription}
</p>
)}
{historyState.redoDescription && (
<p className="text-xs text-info-foreground/75 mt-1">
<p className="text-xs opacity-90 mt-1">
Next redo: {historyState.redoDescription}
</p>
)}