From d1ff709400758abf37c26a98b62997f09d133bc1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Mon, 17 Nov 2025 17:16:24 +0100
Subject: [PATCH] fix: improve info box readability in EditControls and
 HistoryControls
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 components/editor/EditControls.tsx    | 12 ++++++------
 components/editor/HistoryControls.tsx | 14 +++++++-------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/components/editor/EditControls.tsx b/components/editor/EditControls.tsx
index 0807342..e690c6f 100644
--- a/components/editor/EditControls.tsx
+++ b/components/editor/EditControls.tsx
@@ -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>
diff --git a/components/editor/HistoryControls.tsx b/components/editor/HistoryControls.tsx
index 5251756..bbda2f9 100644
--- a/components/editor/HistoryControls.tsx
+++ b/components/editor/HistoryControls.tsx
@@ -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>
               )}