fix(builder): phase-2 design tweaks (landing home icon, decouple layer-hover from guides, neutral zone separator)

- PagesPanel: add fa-home glyph (8px, inherits badge text color) before
  "Landing" text in the landing-page badge, restoring the icon dropped
  in an earlier polish pass.
- editor.css: split [data-craft-hovered] and [data-layer-hovered] into
  distinct rules. Layer-hover now uses a solid 2px accent outline (vs
  the dashed structural guides) and is excluded from the .guides-off
  suppression list, so the Layers-panel hover->canvas locator still
  works when "Show guides" is off. Structural guides/hover
  ([data-craft-node], [data-craft-hovered]) remain correctly gated.
- Canvas.tsx: move the header/footer ZonePreview separator border to a
  .zone-preview-sep class, recolor it from amber
  (rgba(245,158,11,0.3)) to neutral (rgba(148,163,184,0.25)) to match
  the empty-state variant, and gate it on .guides-off via CSS
  descendant selector so it disappears with the rest of the guides.
This commit is contained in:
2026-07-12 21:12:09 -07:00
parent 473fe8d421
commit 2066059c35
3 changed files with 36 additions and 14 deletions
+3 -2
View File
@@ -83,13 +83,14 @@ const ZonePreview: React.FC<{ craftState: string | null; zone: 'header' | 'foote
<div
ref={containerRef}
data-zone-preview={zone}
className="zone-preview-sep"
style={{
width: '100%',
position: 'relative',
pointerEvents: 'none',
userSelect: 'none',
borderBottom: zone === 'header' ? '1px dashed rgba(245,158,11,0.3)' : 'none',
borderTop: zone === 'footer' ? '1px dashed rgba(245,158,11,0.3)' : 'none',
borderBottom: zone === 'header' ? '1px dashed rgba(148,163,184,0.25)' : 'none',
borderTop: zone === 'footer' ? '1px dashed rgba(148,163,184,0.25)' : 'none',
}}
/>
);