Button unification

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
 		}
 	}
 

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;

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,8 +12,7 @@
 	const error = $derived(data.error as string | undefined)
 </script>
 
-<div class="project-page-container">
+{#if error}
-	{#if error}
 	<Page>
 		{#snippet header()}
 			<div class="error-header">
@@ -24,11 +24,11 @@
 			<a href="/labs" class="back-link">← Back to labs</a>
 		</div>
 	</Page>
-	{:else if !project}
+{:else if !project}
 	<Page>
 		<div class="loading">Loading project...</div>
 	</Page>
-	{:else if project.status === 'list-only'}
+{:else if project.status === 'list-only'}
 	<Page>
 		{#snippet header()}
 			<div class="error-header">
@@ -40,24 +40,15 @@
 			<a href="/labs" class="back-link">← Back to labs</a>
 		</div>
 	</Page>
-	{:else if project.status === 'password-protected'}
+{:else if project.status === 'password-protected' || project.status === 'published'}
+	<div class="project-wrapper">
 		<Page>
 			{#snippet header()}
 				<div class="project-header">
-					{#if project.logoUrl}
+					<ProjectHeaderContent {project} />
-						<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}
+			{#if project.status === 'password-protected'}
 				<ProjectPasswordProtection
 					projectSlug={project.slug}
 					correctPassword={project.password || ''}
@@ -67,36 +58,14 @@
 						<ProjectContent {project} />
 					{/snippet}
 				</ProjectPasswordProtection>
-		</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>
+		</Page>
+	</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 Wrapper */
-	.project-header {
+	.project-wrapper {
-		text-align: center;
 		width: 100%;
-		padding: $unit-2x 0;
+		max-width: 700px;
-	}
+		margin: 0 auto;
-
-	.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;
 		box-sizing: border-box;
 
-		img {
-			max-width: 100%;
-			max-height: 100%;
-			object-fit: contain;
-		}
-	}
-
-	.project-title {
-		font-size: 2.5rem;
-		font-weight: 700;
-		margin: 0 0 $unit;
-		color: $grey-10;
-
 		@include breakpoint('phone') {
-			font-size: 2rem;
+			padding: 0 $unit-2x;
 		}
 	}
 
-	.project-subtitle {
+	/* Project Header */
-		font-size: 1.25rem;
+	.project-header {
-		color: $grey-40;
+		width: 100%;
-		margin: 0;
-
-		@include breakpoint('phone') {
-			font-size: 1rem;
-		}
 	}
 </style>