From 78ae1d075608ad03f75dadd3353a37282a241424 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 10 Jun 2025 09:15:09 -0700
Subject: [PATCH] Update empty states

---
 src/lib/components/UniverseFeed.svelte | 29 ++++++++++++++++++-----
 src/routes/labs/+page.svelte           | 32 ++++++++++++++++++--------
 src/routes/photos/+page.svelte         |  2 +-
 3 files changed, 47 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/UniverseFeed.svelte b/src/lib/components/UniverseFeed.svelte
index 12873e7..ffcc5f5 100644
--- a/src/lib/components/UniverseFeed.svelte
+++ b/src/lib/components/UniverseFeed.svelte
@@ -16,8 +16,11 @@
 			{/if}
 		{/each}
 	{:else}
-		<div class="empty-state">
-			<p>No content found in the universe yet.</p>
+		<div class="empty-container">
+			<div class="empty-message">
+				<h2>No posts yet</h2>
+				<p>Posts will be added to Universe soon</p>
+			</div>
 		</div>
 	{/if}
 </div>
@@ -29,14 +32,28 @@
 		gap: $unit-3x;
 	}
 
-	.empty-state {
+	.empty-container {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		min-height: 60vh;
+	}
+
+	.empty-message {
 		text-align: center;
-		padding: $unit-6x $unit-3x;
-		color: $grey-40;
+		max-width: 500px;
+
+		h2 {
+			font-size: 1.5rem;
+			font-weight: 600;
+			margin: 0 0 $unit-2x;
+			color: $grey-10;
+		}
 
 		p {
 			margin: 0;
-			font-size: 1.125rem;
+			color: $grey-40;
+			line-height: 1.5;
 		}
 	}
 </style>
diff --git a/src/routes/labs/+page.svelte b/src/routes/labs/+page.svelte
index 15b3406..ad79b89 100644
--- a/src/routes/labs/+page.svelte
+++ b/src/routes/labs/+page.svelte
@@ -10,14 +10,18 @@
 
 <div class="labs-container">
 	{#if error}
-		<div class="error-message">
-			<h2>Unable to load projects</h2>
-			<p>{error}</p>
+		<div class="error-container">
+			<div class="error-message">
+				<h2>Unable to load projects</h2>
+				<p>{error}</p>
+			</div>
 		</div>
 	{:else if projects.length === 0}
-		<div class="empty-message">
-			<h2>No projects yet</h2>
-			<p>Labs projects will appear here once published.</p>
+		<div class="empty-container">
+			<div class="empty-message">
+				<h2>No projects yet</h2>
+				<p>Projects will be added to Labs soon</p>
+			</div>
 		</div>
 	{:else}
 		<div class="projects-grid">
@@ -49,10 +53,18 @@
 		}
 	}
 
+	.error-container,
+	.empty-container {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		min-height: 60vh;
+	}
+
 	.error-message,
 	.empty-message {
 		text-align: center;
-		padding: $unit-6x $unit-3x;
+		max-width: 500px;
 
 		h2 {
 			font-size: 1.5rem;
@@ -68,7 +80,9 @@
 		}
 	}
 
-	.error-message h2 {
-		color: $red-60;
+	.error-message {
+		h2 {
+			color: $red-60;
+		}
 	}
 </style>
diff --git a/src/routes/photos/+page.svelte b/src/routes/photos/+page.svelte
index deeb722..0e2916f 100644
--- a/src/routes/photos/+page.svelte
+++ b/src/routes/photos/+page.svelte
@@ -20,7 +20,7 @@
 		<div class="empty-container">
 			<div class="empty-message">
 				<h2>No photos yet</h2>
-				<p>Photography albums will appear here once published.</p>
+				<p>Photos and albums will be added soon</p>
 			</div>
 		</div>
 	{:else}