From e1cb24923a884df3774669432aec1a8ac4d50057 Mon Sep 17 00:00:00 2001
From: Alex Netsch <alex@bloop.ai>
Date: Thu, 4 Dec 2025 12:35:30 +0000
Subject: [PATCH] All done! I've updated the copy, edit, and delete buttons in
 `frontend/src/components/ui/wysiwyg.tsx` to use semantic colors: (#1412)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Changes made:**
- Button backgrounds: `bg-foreground` → `bg-muted`
- Icon colors: `text-background` → `text-muted-foreground`
- Check icon (copied state): `text-green-600` → `text-success`

These semantic colors will now adapt correctly to both light and dark modes, following the established patterns in the codebase.
---
 frontend/src/components/ui/wysiwyg.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/ui/wysiwyg.tsx b/frontend/src/components/ui/wysiwyg.tsx
index e6697b3d..0d7466e5 100644
--- a/frontend/src/components/ui/wysiwyg.tsx
+++ b/frontend/src/components/ui/wysiwyg.tsx
@@ -259,12 +259,12 @@ function WYSIWYGEditor({
               variant="icon"
               size="icon"
               onClick={handleCopy}
-              className="pointer-events-auto p-2 bg-foreground h-8 w-8"
+              className="pointer-events-auto p-2 bg-muted h-8 w-8"
             >
               {copied ? (
-                <Check className="w-4 h-4 text-green-600" />
+                <Check className="w-4 h-4 text-success" />
               ) : (
-                <Clipboard className="w-4 h-4 text-background" />
+                <Clipboard className="w-4 h-4 text-muted-foreground" />
               )}
             </Button>
             {/* Edit button - only if onEdit provided */}
@@ -276,9 +276,9 @@ function WYSIWYGEditor({
                 variant="icon"
                 size="icon"
                 onClick={onEdit}
-                className="pointer-events-auto p-2 bg-foreground h-8 w-8"
+                className="pointer-events-auto p-2 bg-muted h-8 w-8"
               >
-                <Pencil className="w-4 h-4 text-background" />
+                <Pencil className="w-4 h-4 text-muted-foreground" />
               </Button>
             )}
             {/* Delete button - only if onDelete provided */}
@@ -290,9 +290,9 @@ function WYSIWYGEditor({
                 variant="icon"
                 size="icon"
                 onClick={onDelete}
-                className="pointer-events-auto p-2 bg-foreground h-8 w-8"
+                className="pointer-events-auto p-2 bg-muted h-8 w-8"
               >
-                <Trash2 className="w-4 h-4 text-background" />
+                <Trash2 className="w-4 h-4 text-muted-foreground" />
               </Button>
             )}
           </div>