From e158d5a7b3455d2a5028d79da031ace1cf5aa5f6 Mon Sep 17 00:00:00 2001
From: Nils Pukropp <nils@narl.io>
Date: Sat, 28 Mar 2026 14:12:46 +0100
Subject: [PATCH] fixed pixelated insert/delete button in asset manager

---
 frontend/src/components/react/admin/AssetManager.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/react/admin/AssetManager.tsx b/frontend/src/components/react/admin/AssetManager.tsx
index 03072b1..3d622e7 100644
--- a/frontend/src/components/react/admin/AssetManager.tsx
+++ b/frontend/src/components/react/admin/AssetManager.tsx
@@ -96,12 +96,15 @@ export default function AssetManager({ mode = 'manage', onSelect }: Props) {
                   </div>
                 )}
                 {/* Hover overlay */}
-                <div className="absolute inset-0 bg-crust/60 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
+                <div className="absolute inset-0 bg-crust/70 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-3">
                   {mode === 'select' && onSelect && (
-                    <button onClick={() => onSelect(asset)} className="bg-mauve text-crust px-3 py-1 rounded-md text-xs font-bold">Insert</button>
+                    <button onClick={() => onSelect(asset)} className="bg-mauve hover:bg-pink text-crust px-4 py-2 rounded-lg text-sm font-bold transition-colors shadow-lg inline-flex items-center gap-1.5">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+                      Insert
+                    </button>
                   )}
-                  <button onClick={() => handleDelete(asset.name)} className="bg-red/80 hover:bg-red text-white p-1.5 rounded-md transition-colors">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>
+                  <button onClick={() => handleDelete(asset.name)} className="bg-red/80 hover:bg-red text-white p-2.5 rounded-lg transition-colors shadow-lg">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>
                   </button>
                 </div>
               </div>