feat(builder): item 14 — Templates modal close button + category pill hover states
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>
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user