UI polish Phase 2: deeper restyle (guides toggle, pages/layers panels, topbar, modal, context menu) #7
@@ -58,18 +58,23 @@ export const PagesPanel: React.FC = () => {
|
||||
.replace(/-+/g, '-');
|
||||
};
|
||||
|
||||
/* ---------- Zone button style ---------- */
|
||||
const zoneButtonStyle = (isActive: boolean): React.CSSProperties => ({
|
||||
/* ---------- Zone row style ----------
|
||||
* Same neutral surface language as the page-list rows below (Item 11) --
|
||||
* header/footer are just two more items in the tree, not a louder,
|
||||
* differently-colored category. The active/editing state reuses the same
|
||||
* accent-outline treatment the page list already uses for the active page,
|
||||
* so there's one consistent "this is what's currently open" affordance. */
|
||||
const zoneRowStyle = (isActive: boolean): React.CSSProperties => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
width: '100%',
|
||||
padding: '10px 12px',
|
||||
padding: '7px 10px',
|
||||
fontSize: 12,
|
||||
fontWeight: 600,
|
||||
color: isActive ? '#f59e0b' : '#fbbf24',
|
||||
background: isActive ? 'rgba(245, 158, 11, 0.15)' : 'rgba(245, 158, 11, 0.06)',
|
||||
border: `1px solid ${isActive ? 'rgba(245, 158, 11, 0.5)' : 'rgba(245, 158, 11, 0.2)'}`,
|
||||
fontWeight: isActive ? 600 : 500,
|
||||
color: isActive ? 'var(--color-accent)' : 'var(--color-text-muted)',
|
||||
background: isActive ? 'var(--color-accent-subtle)' : 'var(--color-bg-elevated)',
|
||||
border: `1px solid ${isActive ? 'var(--color-accent)' : 'var(--color-border)'}`,
|
||||
borderRadius: 'var(--radius-md)',
|
||||
cursor: 'pointer',
|
||||
transition: 'all var(--transition-fast)',
|
||||
@@ -78,57 +83,35 @@ export const PagesPanel: React.FC = () => {
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
{/* Header/Footer zone buttons */}
|
||||
{/* Header/Footer zone rows */}
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 8 }}>
|
||||
<button
|
||||
onClick={editHeader}
|
||||
style={zoneButtonStyle(isEditingHeader)}
|
||||
className="zone-row"
|
||||
style={zoneRowStyle(isEditingHeader)}
|
||||
title="Appears on all pages"
|
||||
>
|
||||
<i className="fa fa-window-maximize" style={{ fontSize: 13 }} />
|
||||
<div style={{ flex: 1 }}>
|
||||
<div>Edit Header</div>
|
||||
<div style={{ fontSize: 10, opacity: 0.7, fontWeight: 400, marginTop: 1 }}>
|
||||
Appears on all pages
|
||||
</div>
|
||||
</div>
|
||||
{isEditingHeader && (
|
||||
<span style={{
|
||||
fontSize: 9,
|
||||
fontWeight: 700,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.5px',
|
||||
background: 'rgba(245, 158, 11, 0.25)',
|
||||
padding: '2px 6px',
|
||||
borderRadius: 'var(--radius-sm)',
|
||||
}}>
|
||||
Editing
|
||||
</span>
|
||||
<i className="fa fa-window-maximize" style={{ fontSize: 12, width: 14, textAlign: 'center', flexShrink: 0 }} />
|
||||
<span style={{ flex: 1 }}>Header</span>
|
||||
{isEditingHeader ? (
|
||||
<i className="fa fa-check-circle" style={{ fontSize: 11 }} aria-hidden />
|
||||
) : (
|
||||
<i className="fa fa-pencil zone-row-pencil" style={{ fontSize: 11 }} aria-hidden />
|
||||
)}
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={editFooter}
|
||||
style={zoneButtonStyle(isEditingFooter)}
|
||||
className="zone-row"
|
||||
style={zoneRowStyle(isEditingFooter)}
|
||||
title="Appears on all pages"
|
||||
>
|
||||
<i className="fa fa-window-minimize" style={{ fontSize: 13 }} />
|
||||
<div style={{ flex: 1 }}>
|
||||
<div>Edit Footer</div>
|
||||
<div style={{ fontSize: 10, opacity: 0.7, fontWeight: 400, marginTop: 1 }}>
|
||||
Appears on all pages
|
||||
</div>
|
||||
</div>
|
||||
{isEditingFooter && (
|
||||
<span style={{
|
||||
fontSize: 9,
|
||||
fontWeight: 700,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.5px',
|
||||
background: 'rgba(245, 158, 11, 0.25)',
|
||||
padding: '2px 6px',
|
||||
borderRadius: 'var(--radius-sm)',
|
||||
}}>
|
||||
Editing
|
||||
</span>
|
||||
<i className="fa fa-window-minimize" style={{ fontSize: 12, width: 14, textAlign: 'center', flexShrink: 0 }} />
|
||||
<span style={{ flex: 1 }}>Footer</span>
|
||||
{isEditingFooter ? (
|
||||
<i className="fa fa-check-circle" style={{ fontSize: 11 }} aria-hidden />
|
||||
) : (
|
||||
<i className="fa fa-pencil zone-row-pencil" style={{ fontSize: 11 }} aria-hidden />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
@@ -328,18 +311,17 @@ export const PagesPanel: React.FC = () => {
|
||||
title="This is the landing page — published as the root URL (index.html)"
|
||||
style={{
|
||||
fontSize: 9,
|
||||
fontWeight: 700,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.5px',
|
||||
color: '#fbbf24',
|
||||
background: 'rgba(245, 158, 11, 0.15)',
|
||||
border: '1px solid rgba(245, 158, 11, 0.35)',
|
||||
fontWeight: 600,
|
||||
letterSpacing: '0.3px',
|
||||
color: 'var(--color-text-muted)',
|
||||
background: 'transparent',
|
||||
border: '1px solid var(--color-border-light)',
|
||||
padding: '1px 5px',
|
||||
borderRadius: 'var(--radius-sm)',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<i className="fa fa-home" style={{ marginRight: 3 }} />Landing
|
||||
Landing
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
@@ -359,7 +341,8 @@ export const PagesPanel: React.FC = () => {
|
||||
>
|
||||
<button
|
||||
onClick={() => startEditing(page)}
|
||||
title="Rename"
|
||||
data-tooltip="Rename"
|
||||
aria-label={`Rename ${page.name}`}
|
||||
style={{
|
||||
width: 24,
|
||||
height: 24,
|
||||
@@ -374,12 +357,13 @@ export const PagesPanel: React.FC = () => {
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
✎
|
||||
<i className="fa fa-pencil" aria-hidden="true" />
|
||||
</button>
|
||||
{pages.length > 1 && !isLanding && (
|
||||
<button
|
||||
onClick={() => setDeleteConfirmId(page.id)}
|
||||
title="Delete"
|
||||
data-tooltip="Delete"
|
||||
aria-label={`Delete ${page.name}`}
|
||||
style={{
|
||||
width: 24,
|
||||
height: 24,
|
||||
|
||||
Reference in New Issue
Block a user