From 6cff4420c965123cbbf07f33b87e80a58be7f259 Mon Sep 17 00:00:00 2001
From: AndyMik90 <andre@mikalsenutvikling.no>
Date: Wed, 17 Dec 2025 23:19:27 +0100
Subject: [PATCH] auto-claude: subtask-2-3 - Refine visual drop zone feedback
 to be more subtle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Simplified main content area feedback to subtle background tint only
- Added dashed border hint when dragging but not over drop zone
- Made drop zone indicator more compact with smaller text/icons
- Added smooth transitions (150ms ease-out) for polish
- Reduced overlay opacity for less intrusive visual feedback
- Removed heavy ring effects that interfered with modal interactions

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../components/TaskCreationWizard.tsx         | 40 ++++++++++---------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/auto-claude-ui/src/renderer/components/TaskCreationWizard.tsx b/auto-claude-ui/src/renderer/components/TaskCreationWizard.tsx
index 21d7551f..22d50339 100644
--- a/auto-claude-ui/src/renderer/components/TaskCreationWizard.tsx
+++ b/auto-claude-ui/src/renderer/components/TaskCreationWizard.tsx
@@ -456,12 +456,9 @@ export function TaskCreationWizard({
             <div
               ref={setDropRef}
               className={cn(
-                "flex-1 flex flex-col p-6 min-w-0 min-h-0 overflow-y-auto transition-all duration-200",
-                // Visual feedback when dragging files over the drop zone
-                activeDragData && isOverDropZone && !isAtMaxFiles && "ring-2 ring-inset ring-info bg-info/5",
-                activeDragData && isOverDropZone && isAtMaxFiles && "ring-2 ring-inset ring-warning bg-warning/5",
-                // Subtle indication when dragging but not over this zone
-                activeDragData && !isOverDropZone && "ring-1 ring-inset ring-muted-foreground/20"
+                "flex-1 flex flex-col p-6 min-w-0 min-h-0 overflow-y-auto transition-colors duration-150 ease-out",
+                // Subtle background tint when dragging files - keeps modal usable
+                activeDragData && "bg-muted/20"
               )}
             >
         <DialogHeader>
@@ -753,25 +750,32 @@ export function TaskCreationWizard({
           {/* Referenced Files Section - Always visible */}
           <div
             className={cn(
-              "space-y-3 p-4 rounded-lg border bg-muted/30 relative transition-all",
-              activeDragData && isOverDropZone && !isAtMaxFiles && "ring-2 ring-info border-info",
-              activeDragData && isOverDropZone && isAtMaxFiles && "ring-2 ring-warning border-warning",
-              !activeDragData || !isOverDropZone ? "border-border" : ""
+              "space-y-3 p-4 rounded-lg border bg-muted/30 relative transition-all duration-150 ease-out",
+              // Default state
+              !activeDragData && "border-border",
+              // Subtle dashed border when dragging but not over drop zone
+              activeDragData && !isOverDropZone && "border-dashed border-muted-foreground/40",
+              // Highlighted when dragging over - can accept files
+              activeDragData && isOverDropZone && !isAtMaxFiles && "border-info border-solid bg-info/5 shadow-sm",
+              // Warning when at max capacity
+              activeDragData && isOverDropZone && isAtMaxFiles && "border-warning border-solid bg-warning/5"
             )}
           >
-            {/* Drop zone overlay indicator - shows when dragging over the modal */}
+            {/* Drop zone indicator - only shows when dragging over the section */}
             {activeDragData && isOverDropZone && (
               <div className={cn(
-                "absolute inset-0 z-10 flex items-center justify-center pointer-events-none rounded-lg",
-                isAtMaxFiles ? "bg-warning/10" : "bg-info/10"
+                "absolute inset-0 z-10 flex items-center justify-center pointer-events-none rounded-lg transition-opacity duration-100",
+                isAtMaxFiles ? "bg-warning/5" : "bg-info/5"
               )}>
                 <div className={cn(
-                  "flex items-center gap-2 px-3 py-2 rounded-md",
-                  isAtMaxFiles ? "bg-warning/90 text-warning-foreground" : "bg-info/90 text-info-foreground"
+                  "flex items-center gap-2 px-3 py-1.5 rounded-md text-xs",
+                  isAtMaxFiles
+                    ? "bg-warning/80 text-warning-foreground"
+                    : "bg-info/80 text-info-foreground"
                 )}>
-                  <FileDown className="h-4 w-4" />
-                  <span className="text-sm font-medium">
-                    {isAtMaxFiles ? `Max ${MAX_REFERENCED_FILES} files reached` : 'Drop to add reference'}
+                  <FileDown className="h-3.5 w-3.5" />
+                  <span className="font-medium">
+                    {isAtMaxFiles ? `Max ${MAX_REFERENCED_FILES} files` : 'Drop to add'}
                   </span>
                 </div>
               </div>