design(preview): align Preview and Dashboard buttons next to Publish button on the right
This commit is contained in:
@@ -21,7 +21,7 @@ export function ProjectIconRail({ workspace, projectId, actions }: Props) {
|
||||
|
||||
return (
|
||||
<nav style={bar} aria-label="Project sections">
|
||||
{/* Dynamic Left Content Area (e.g. Preview Device Toggles) */}
|
||||
{/* Dynamic Left Content Area (e.g. Preview Device Toggles & URL bar) */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
@@ -34,50 +34,54 @@ export function ProjectIconRail({ workspace, projectId, actions }: Props) {
|
||||
{isPreviewActive && <PreviewDeviceToggles />}
|
||||
</div>
|
||||
|
||||
<div style={primaryGroup}>
|
||||
<Link
|
||||
href={`${projectBase}/preview`}
|
||||
style={{
|
||||
padding: "6px 14px",
|
||||
fontSize: "0.8rem",
|
||||
fontWeight: 500,
|
||||
borderRadius: 6,
|
||||
textDecoration: "none",
|
||||
background: isPreviewActive ? "#fff" : "transparent",
|
||||
color: isPreviewActive ? "#18181b" : "#71717a",
|
||||
boxShadow: isPreviewActive ? "0 1px 2px rgba(0,0,0,0.05)" : "none",
|
||||
transition: "all 0.15s ease",
|
||||
}}
|
||||
>
|
||||
Preview
|
||||
</Link>
|
||||
<Link
|
||||
href={`${projectBase}/plan`}
|
||||
style={{
|
||||
padding: "6px 14px",
|
||||
fontSize: "0.8rem",
|
||||
fontWeight: 500,
|
||||
borderRadius: 6,
|
||||
textDecoration: "none",
|
||||
background: !isPreviewActive ? "#fff" : "transparent",
|
||||
color: !isPreviewActive ? "#18181b" : "#71717a",
|
||||
boxShadow: !isPreviewActive ? "0 1px 2px rgba(0,0,0,0.05)" : "none",
|
||||
transition: "all 0.15s ease",
|
||||
}}
|
||||
>
|
||||
Dashboard
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Right Content Area (Segmented Control & Publish Button) */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flex: 1,
|
||||
justifyContent: "flex-end",
|
||||
alignItems: "center",
|
||||
minWidth: 0,
|
||||
gap: 12,
|
||||
}}
|
||||
>
|
||||
<div style={primaryGroup}>
|
||||
<Link
|
||||
href={`${projectBase}/preview`}
|
||||
style={{
|
||||
padding: "6px 14px",
|
||||
fontSize: "0.8rem",
|
||||
fontWeight: 500,
|
||||
borderRadius: 6,
|
||||
textDecoration: "none",
|
||||
background: isPreviewActive ? "#fff" : "transparent",
|
||||
color: isPreviewActive ? "#18181b" : "#71717a",
|
||||
boxShadow: isPreviewActive
|
||||
? "0 1px 2px rgba(0,0,0,0.05)"
|
||||
: "none",
|
||||
transition: "all 0.15s ease",
|
||||
}}
|
||||
>
|
||||
Preview
|
||||
</Link>
|
||||
<Link
|
||||
href={`${projectBase}/plan`}
|
||||
style={{
|
||||
padding: "6px 14px",
|
||||
fontSize: "0.8rem",
|
||||
fontWeight: 500,
|
||||
borderRadius: 6,
|
||||
textDecoration: "none",
|
||||
background: !isPreviewActive ? "#fff" : "transparent",
|
||||
color: !isPreviewActive ? "#18181b" : "#71717a",
|
||||
boxShadow: !isPreviewActive
|
||||
? "0 1px 2px rgba(0,0,0,0.05)"
|
||||
: "none",
|
||||
transition: "all 0.15s ease",
|
||||
}}
|
||||
>
|
||||
Dashboard
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{actions}
|
||||
</div>
|
||||
</nav>
|
||||
@@ -98,7 +102,9 @@ function PreviewDeviceToggles() {
|
||||
const displayUrl = running?.url ?? "";
|
||||
|
||||
return (
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 8, width: "100%" }}>
|
||||
<div
|
||||
style={{ display: "flex", alignItems: "center", gap: 8, width: "100%" }}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
|
||||
Reference in New Issue
Block a user