From 1c85ab93eb60b20e7d4a785afc5d40bf727e48d4 Mon Sep 17 00:00:00 2001
From: Josh Knapp <jknapp85@gmail.com>
Date: Sun, 12 Jul 2026 20:56:05 -0700
Subject: [PATCH] =?UTF-8?q?feat(builder):=20item=2014=20=E2=80=94=20Templa?=
 =?UTF-8?q?tes=20modal=20close=20button=20+=20category=20pill=20hover=20st?=
 =?UTF-8?q?ates?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Close button (already an FA fa-times icon-button) gains a hover
background/color; category pills gain the same hover-background
treatment when not active (they were already at the brief's target 12px
font-size). Template card hover-lift (translateY(-2px) + shadow) was
already implemented — no change needed there.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 craft/src/panels/topbar/TemplateModal.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/craft/src/panels/topbar/TemplateModal.tsx b/craft/src/panels/topbar/TemplateModal.tsx
index 75f3330..cf7ee49 100644
--- a/craft/src/panels/topbar/TemplateModal.tsx
+++ b/craft/src/panels/topbar/TemplateModal.tsx
@@ -247,7 +247,13 @@ export const TemplateModal: React.FC<TemplateModalProps> = ({ open, onClose }) =
               Choose a template to get started quickly
             </p>
           </div>
-          <button onClick={onClose} style={closeButtonStyle} title="Close">
+          <button
+            onClick={onClose}
+            style={closeButtonStyle}
+            title="Close"
+            onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.background = 'var(--color-bg-hover)'; (e.currentTarget as HTMLElement).style.color = 'var(--color-text)'; }}
+            onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.background = 'transparent'; (e.currentTarget as HTMLElement).style.color = '#71717a'; }}
+          >
             <i className="fa fa-times" aria-hidden />
           </button>
         </div>
@@ -262,6 +268,12 @@ export const TemplateModal: React.FC<TemplateModalProps> = ({ open, onClose }) =
                 ...tabStyle,
                 ...(activeTab === tab.value ? tabActiveStyle : {}),
               }}
+              onMouseEnter={(e) => {
+                if (activeTab !== tab.value) (e.currentTarget as HTMLElement).style.background = 'var(--color-bg-hover)';
+              }}
+              onMouseLeave={(e) => {
+                if (activeTab !== tab.value) (e.currentTarget as HTMLElement).style.background = 'transparent';
+              }}
             >
               {tab.label}
             </button>