From bbced979295d0211e1c6a5513d041fb039ee5d22 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 10 Jun 2025 19:09:23 -0700
Subject: [PATCH] Button unification

---
 src/lib/components/LabCard.svelte             |   4 +-
 .../components/ProjectHeaderContent.svelte    |   4 +-
 src/routes/labs/[slug]/+page.svelte           | 168 ++++++------------
 3 files changed, 59 insertions(+), 117 deletions(-)

diff --git a/src/lib/components/LabCard.svelte b/src/lib/components/LabCard.svelte
index a29863c..f92c189 100644
--- a/src/lib/components/LabCard.svelte
+++ b/src/lib/components/LabCard.svelte
@@ -67,7 +67,7 @@
 					iconPosition="right"
 					on:click={(e) => e.stopPropagation()}
 				>
-					Visit site
+					Visit
 					<svg
 						slot="icon"
 						width="16"
@@ -234,6 +234,8 @@
 		:global(.btn) {
 			flex-shrink: 0;
 			margin-top: 2px; // Align with title baseline
+			font-size: 1rem !important; // Match detail page Visit button
+			min-height: auto !important; // Remove min-height to match detail page
 		}
 	}
 
diff --git a/src/lib/components/ProjectHeaderContent.svelte b/src/lib/components/ProjectHeaderContent.svelte
index 8834082..787588c 100644
--- a/src/lib/components/ProjectHeaderContent.svelte
+++ b/src/lib/components/ProjectHeaderContent.svelte
@@ -19,7 +19,7 @@
 			target="_blank"
 			rel="noopener noreferrer"
 			class="visit-button"
-			style="--button-bg: {project.highlightColor || '#4d4d4d'}; --button-color: white"
+			style="--button-bg: {project.highlightColor || '#e33d3d'}; --button-color: white"
 		>
 			Visit <ArrowRight />
 		</a>
@@ -75,7 +75,7 @@
 		align-items: center;
 		gap: $unit;
 		padding: ($unit * 1.5) $unit-2x;
-		background: var(--button-bg, $grey-10);
+		background: var(--button-bg, $red-60);
 		color: var(--button-color, white);
 		text-decoration: none;
 		border-radius: 50px;
diff --git a/src/routes/labs/[slug]/+page.svelte b/src/routes/labs/[slug]/+page.svelte
index 490050d..a499a7a 100644
--- a/src/routes/labs/[slug]/+page.svelte
+++ b/src/routes/labs/[slug]/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import Page from '$components/Page.svelte'
 	import ProjectPasswordProtection from '$lib/components/ProjectPasswordProtection.svelte'
+	import ProjectHeaderContent from '$lib/components/ProjectHeaderContent.svelte'
 	import ProjectContent from '$lib/components/ProjectContent.svelte'
 	import type { PageData } from './$types'
 	import type { Project } from '$lib/types/project'
@@ -11,92 +12,60 @@
 	const error = $derived(data.error as string | undefined)
 </script>
 
-<div class="project-page-container">
-	{#if error}
-		<Page>
-			{#snippet header()}
-				<div class="error-header">
-					<h1>Error</h1>
-				</div>
-			{/snippet}
-			<div class="error-content">
-				<p>{error}</p>
-				<a href="/labs" class="back-link">← Back to labs</a>
+{#if error}
+	<Page>
+		{#snippet header()}
+			<div class="error-header">
+				<h1>Error</h1>
 			</div>
-		</Page>
-	{:else if !project}
-		<Page>
-			<div class="loading">Loading project...</div>
-		</Page>
-	{:else if project.status === 'list-only'}
-		<Page>
-			{#snippet header()}
-				<div class="error-header">
-					<h1>Project Not Available</h1>
-				</div>
-			{/snippet}
-			<div class="error-content">
-				<p>This project is not yet available for viewing. Please check back later.</p>
-				<a href="/labs" class="back-link">← Back to labs</a>
+		{/snippet}
+		<div class="error-content">
+			<p>{error}</p>
+			<a href="/labs" class="back-link">← Back to labs</a>
+		</div>
+	</Page>
+{:else if !project}
+	<Page>
+		<div class="loading">Loading project...</div>
+	</Page>
+{:else if project.status === 'list-only'}
+	<Page>
+		{#snippet header()}
+			<div class="error-header">
+				<h1>Project Not Available</h1>
 			</div>
-		</Page>
-	{:else if project.status === 'password-protected'}
+		{/snippet}
+		<div class="error-content">
+			<p>This project is not yet available for viewing. Please check back later.</p>
+			<a href="/labs" class="back-link">← Back to labs</a>
+		</div>
+	</Page>
+{:else if project.status === 'password-protected' || project.status === 'published'}
+	<div class="project-wrapper">
 		<Page>
 			{#snippet header()}
 				<div class="project-header">
-					{#if project.logoUrl}
-						<div
-							class="project-logo"
-							style="background-color: {project.backgroundColor || '#f5f5f5'}"
-						>
-							<img src={project.logoUrl} alt="{project.title} logo" />
-						</div>
-					{/if}
-					<h1 class="project-title">{project.title}</h1>
-					{#if project.subtitle}
-						<p class="project-subtitle">{project.subtitle}</p>
-					{/if}
+					<ProjectHeaderContent {project} />
 				</div>
 			{/snippet}
-			<ProjectPasswordProtection
-				projectSlug={project.slug}
-				correctPassword={project.password || ''}
-				projectType="labs"
-			>
-				{#snippet children()}
-					<ProjectContent {project} />
-				{/snippet}
-			</ProjectPasswordProtection>
+			{#if project.status === 'password-protected'}
+				<ProjectPasswordProtection
+					projectSlug={project.slug}
+					correctPassword={project.password || ''}
+					projectType="labs"
+				>
+					{#snippet children()}
+						<ProjectContent {project} />
+					{/snippet}
+				</ProjectPasswordProtection>
+			{:else}
+				<ProjectContent {project} />
+			{/if}
 		</Page>
-	{:else}
-		<Page class="project-page">
-			{#snippet header()}
-				<div class="project-header">
-					{#if project.logoUrl}
-						<div
-							class="project-logo"
-							style="background-color: {project.backgroundColor || '#f5f5f5'}"
-						>
-							<img src={project.logoUrl} alt="{project.title} logo" />
-						</div>
-					{/if}
-					<h1 class="project-title">{project.title}</h1>
-					{#if project.subtitle}
-						<p class="project-subtitle">{project.subtitle}</p>
-					{/if}
-				</div>
-			{/snippet}
-			<ProjectContent {project} />
-		</Page>
-	{/if}
-</div>
+	</div>
+{/if}
 
 <style lang="scss">
-	.project-page-container {
-		padding: 0 $unit-2x;
-		box-sizing: border-box;
-	}
-
 	/* Error and Loading States */
 	.error-header h1 {
 		color: $red-60;
@@ -130,49 +99,20 @@
 		}
 	}
 
-	/* Project Header */
-	.project-header {
-		text-align: center;
+	/* Project Wrapper */
+	.project-wrapper {
 		width: 100%;
-		padding: $unit-2x 0;
-	}
-
-	.project-logo {
-		width: 100px;
-		height: 100px;
-		margin: 0 auto $unit-2x;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border-radius: $unit-2x;
-		padding: $unit-2x;
+		max-width: 700px;
+		margin: 0 auto;
 		box-sizing: border-box;
 
-		img {
-			max-width: 100%;
-			max-height: 100%;
-			object-fit: contain;
+		@include breakpoint('phone') {
+			padding: 0 $unit-2x;
 		}
 	}
 
-	.project-title {
-		font-size: 2.5rem;
-		font-weight: 700;
-		margin: 0 0 $unit;
-		color: $grey-10;
-
-		@include breakpoint('phone') {
-			font-size: 2rem;
-		}
-	}
-
-	.project-subtitle {
-		font-size: 1.25rem;
-		color: $grey-40;
-		margin: 0;
-
-		@include breakpoint('phone') {
-			font-size: 1rem;
-		}
+	/* Project Header */
+	.project-header {
+		width: 100%;
 	}
 </style>