UI redesign vol1

src/routes/[orgSlug]/events/+page.svelte

@@ -176,43 +176,39 @@
 	<title>{m.events_title()} | {data.org.name}</title>
 </svelte:head>
 
-<div class="flex flex-col h-full">
-	<!-- Toolbar: Status Tabs + Create Button -->
-	<div
-		class="flex items-center justify-between px-6 py-3 border-b border-light/5 shrink-0"
-	>
-		<div class="flex items-center gap-1">
-			{#each statusTabs as tab}
-				<button
-					type="button"
-					class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-body-sm font-body transition-colors {data.statusFilter ===
-					tab.value
-						? 'bg-primary text-background'
-						: 'text-light/50 hover:text-white hover:bg-dark/50'}"
-					onclick={() => switchStatus(tab.value)}
-				>
-					<span
-						class="material-symbols-rounded"
-						style="font-size: 16px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 16;"
-						>{tab.icon}</span
-					>
-					{tab.label}
-				</button>
-			{/each}
+<div class="flex flex-col gap-8 h-full p-8 overflow-hidden">
+	<!-- Header -->
+	<div class="flex items-center justify-between w-full shrink-0">
+		<div class="flex flex-1 flex-col gap-2 items-start min-w-0">
+			<h2 class="font-heading text-h2 text-white">{m.events_title()}</h2>
 		</div>
-		{#if isEditor}
-			<Button
-				size="sm"
-				icon="add"
-				onclick={() => (showCreateModal = true)}
+		<div class="flex items-center gap-2 shrink-0">
+			{#if isEditor}
+				<Button icon="add" onclick={() => (showCreateModal = true)}>
+					{m.events_new()}
+				</Button>
+			{/if}
+		</div>
+	</div>
+
+	<!-- Status Tabs -->
+	<div class="flex items-center gap-1 shrink-0">
+		{#each statusTabs as tab}
+			<button
+				type="button"
+				class="flex items-center gap-1.5 px-4 py-2 rounded-[32px] text-body font-body transition-colors {data.statusFilter ===
+				tab.value
+					? 'bg-surface text-white'
+					: 'text-white/50 hover:text-white hover:bg-white/5'}"
+				onclick={() => switchStatus(tab.value)}
 			>
-				{m.events_new()}
-			</Button>
-		{/if}
+				{tab.label}
+			</button>
+		{/each}
 	</div>
 
 	<!-- Events Grid -->
-	<div class="flex-1 overflow-auto p-6">
+	<div class="flex-1 overflow-auto min-h-0">
 		{#if data.events.length === 0}
 			<div
 				class="flex flex-col items-center justify-center h-full text-light/40"