refactor: migrate event pages to shadcn ui

src/lib/shared/layout/header/BrowserSupportNotice.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
 
-	import HeadBanner from '$lib/shared/layout/header/HeadBanner.svelte';
+	import Icon from '@iconify/svelte';
 
 	import {
 		getBrowserName,
@@ -17,16 +17,36 @@
 		fullSupported = isFullSupported(window.navigator.userAgent);
 		browserName = getBrowserName(window.navigator.userAgent);
 	}
-</script>
 
-<HeadBanner type="error" display={!supported}>
-	<b class="capitalize">{browserName} is not supported.</b>
-	<span class="hidden sm:inline"> We cannot guarantee a good experience. </span>
-	<a class="ml-2" href="/about/faq"> Why? </a>
-</HeadBanner>
+	let hide = false;
+	$: show = !hide && (!supported || !fullSupported);
+</script>
 
-<HeadBanner type="warning" display={supported && !fullSupported}>
-	<b class="capitalize">{browserName} is not FULLY supported.</b>
-	<span class="hidden sm:inline"> You may experience some minor issues. </span>
-	<a class="ml-2" href="/about/faq"> Why? </a>
-</HeadBanner>
+{#if show}
+	<div class="bg-destructive text-destructive-foreground">
+		<div
+			class="mx-auto flex max-w-7xl items-center gap-x-6 overflow-hidden whitespace-nowrap px-6 py-2.5 sm:px-8"
+		>
+			<p class="text-sm leading-6">
+				{#if !supported}
+					<b class="capitalize">{browserName} is not supported.</b>
+					<span class="hidden sm:inline"> We cannot guarantee a good experience. </span>
+				{:else if !fullSupported}
+					<b class="capitalize">{browserName} is not FULLY supported.</b>
+					<span class="hidden sm:inline"> You may experience some minor issues. </span>
+				{/if}
+				<a class="ml-2" href="/about/faq"> Why? </a>
+			</p>
+			<div class="flex flex-1 justify-end">
+				<button
+					type="button"
+					class="-m-3 p-3 focus-visible:outline-offset-[-4px]"
+					on:click={() => (hide = true)}
+				>
+					<span class="sr-only">Dismiss</span>
+					<Icon icon="lucide:x" class="h-5 w-5" />
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}

src/lib/shared/layout/header/Header.svelte

@@ -4,6 +4,7 @@
 	import * as m from '$lib/shared/i18n/compiled/messages';
 
 	import BrandLogo from '$lib/shared/layout/BrandLogo.svelte';
+	import BrowserSupportNotice from '$lib/shared/layout/header/BrowserSupportNotice.svelte';
 	import DesktopNavigation from '$lib/shared/layout/header/DesktopNavigation.svelte';
 	import MobileNavigation from '$lib/shared/layout/header/MobileNavigation.svelte';
 	import PreferencesSheet from '$lib/shared/layout/preferences/PreferencesSheet.svelte';
@@ -16,7 +17,8 @@
 </script>
 
 <header class="border-rainbow z-30 border-b-2 bg-background shadow-md">
-	<div id="head-banner-holder" />
+	<BrowserSupportNotice />
+
 	<nav class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" aria-label="Navbar">
 		<div class="flex items-center gap-x-12">
 			<a href="/" class="-m-1.5 p-1.5">

src/routes/+layout.svelte

@@ -7,7 +7,6 @@
 	import { webVitals } from '$lib/shared/analytics/vitals';
 	import ParaglideJsSvelteKitProviderCsr from '$lib/shared/i18n/ParaglideJsSvelteKitProviderCsr.svelte';
 	import Footer from '$lib/shared/layout/Footer.svelte';
-	import BrowserSupportNotice from '$lib/shared/layout/header/BrowserSupportNotice.svelte';
 	import Header from '$lib/shared/layout/header/Header.svelte';
 	import LoadingOverlay2 from '$lib/shared/layout/LoadingOverlay2.svelte';
 
@@ -46,8 +45,6 @@
 
 <ParaglideJsSvelteKitProviderCsr>
 	<QueryClientProvider client={data.queryClient}>
-		<BrowserSupportNotice />
-
 		{#if loading}
 			<!--	<LoadingOverlay />-->
 			<LoadingOverlay2 />

src/routes/events/+page.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import { page } from '$app/stores';
+	import Icon from '@iconify/svelte';
 	import { createQuery } from '@tanstack/svelte-query';
 
 	import * as m from '$lib/shared/i18n/compiled/messages';
 	import { EventListSeoFactory } from '$lib/shared/seo/factory/event';
 	import SeoHandler from '$lib/shared/seo/SeoHandler.svelte';
 	import DataUnavailableCallout from '$lib/shared/shared/components/DataUnavailableCallout.svelte';
-	import Callout from '$lib/vgui/callout/Callout.svelte';
-
+	import * as Alert from '$lib/vgui/components/ui/alert';
 	import Section from '$lib/vgui/section/Section.svelte';
 
 	import EventListItem from './EventListItem.svelte';
@@ -23,9 +23,10 @@
 <HeroSection />
 
 <Section>
-	<Callout class="mb-12">
-		<p>{m.event_information_language_restriction()}</p>
-	</Callout>
+	<Alert.Root class="mb-12">
+		<Icon icon="lucide:info" class="h-4 w-4" />
+		<Alert.Description>{m.event_information_language_restriction()}</Alert.Description>
+	</Alert.Root>
 
 	{#if $events.isSuccess}
 		<SeoHandler factory={new EventListSeoFactory($events.data)} />

src/routes/events/EventListItem.svelte

@@ -16,11 +16,9 @@
 </script>
 
 <a href={`/events/${event.id}/${event.slug}`}>
-	<article
-		class="bg-neutral-3 relative isolate flex flex-col justify-between gap-10 p-6 lg:flex-row"
-	>
+	<article class="relative isolate flex flex-col justify-between gap-10 bg-muted p-6 lg:flex-row">
 		<div class="flex-none">
-			<div class="text-high-contrast group relative mb-6 max-w-xl">
+			<div class="group relative mb-6 max-w-xl">
 				<span class="text-xl">
 					{#if event.status === 'ongoing'}
 						{m.event_status_ongoing_label()}
@@ -40,10 +38,10 @@
 			<div class="relative flex items-center justify-between gap-x-4 lg:absolute lg:bottom-4">
 				<!-- Meeting Time (Bookmark effect) -->
 				<div
-					class="text-accent-fg relative -left-10 top-0 p-2 pl-2 pr-4 font-bold bg-{category.color}"
+					class="relative -left-10 top-0 p-2 pl-2 pr-4 font-bold text-primary-foreground bg-{category.color}"
 				>
 					<div
-						class="top-17 absolute left-0 border-8 border-b-transparent border-l-transparent border-{category.color}"
+						class="absolute left-0 top-17 border-8 border-b-transparent border-l-transparent border-{category.color}"
 					/>
 					<time class="sr-only" datetime={meetingDay.format()}>{meetingDay.format('l')}</time>
 					<div class="flex" aria-hidden="true">
@@ -61,28 +59,28 @@
 
 				<!-- Entity Name & Proposer -->
 				<div class="-ml-8">
-					<span class="text-high-contrast font-semibold">
+					<span class="font-semibold">
 						{m.event_property_proposer()}
 					</span>
-					<p class="text-low-contrast w-[12ch] truncate text-sm">{event.proposer.nickname}</p>
+					<p class="w-[12ch] truncate text-sm text-muted-foreground">{event.proposer.nickname}</p>
 				</div>
 			</div>
 		</div>
 
 		<div class="mr-auto lg:flex lg:flex-col lg:place-content-center">
-			<div class="text-high-contrast text-5xl font-bold">
+			<div class="text-5xl font-bold">
 				{event.name}
 			</div>
-			<p class="text-low-contrast mt-2 line-clamp-3">
+			<p class="mt-2 line-clamp-3 text-muted-foreground">
 				{event.description}
 			</p>
 		</div>
 
 		<div class="hidden flex-none lg:block">
-			<div class="bg-neutralA-2 rounded-lg p-4">
+			<div class="rounded-lg bg-muted-foreground/5 p-4">
 				<Icon
 					icon={`material-symbols:${kebabCase(String(category.icon))}`}
-					class="w-26 h-full text-{category.color}"
+					class="h-full w-26 text-{category.color}"
 				/>
 			</div>
 		</div>

src/routes/events/HeroSection.svelte

@@ -5,7 +5,7 @@
 	import { kebabCase } from 'change-case';
 
 	import * as m from '$lib/shared/i18n/compiled/messages';
-	import Card from '$lib/vgui/card/Card.svelte';
+	import * as Card from '$lib/vgui/components/ui/card';
 
 	import { queryCategories } from './query';
 
@@ -27,14 +27,14 @@
 	};
 </script>
 
-<div class="lg:h-hero bg-neutral-2 relative isolate overflow-hidden lg:mt-0">
+<div class="lg:h-hero relative isolate overflow-hidden lg:mt-0">
 	<div class="pb-12 pt-16 sm:pb-40 sm:pt-24 lg:pb-48 lg:pt-40">
 		<div class="relative mx-auto max-w-7xl px-4 sm:static sm:px-6 lg:px-8">
 			<div class="sm:max-w-lg">
-				<h1 class="font text-high-contrast text-4xl font-extrabold tracking-tight sm:text-6xl">
+				<h1 class="font text-4xl font-extrabold tracking-tight sm:text-6xl">
 					{m.event_list_hero_title()}
 				</h1>
-				<p class="text-low-contrast mt-4 text-xl">
+				<p class="mt-4 text-xl text-muted-foreground">
 					{m.event_list_hero_text()}
 				</p>
 			</div>
@@ -47,31 +47,30 @@
 						<div
 							class="absolute transform sm:left-1/2 sm:top-0 sm:translate-x-8 lg:left-1/2 lg:translate-x-8"
 						>
-							<div class="flex items-center space-x-6 lg:space-x-8">
+							<div class="mt-40 flex items-center space-x-6 lg:space-x-8">
 								{#if $categories.isSuccess}
 									{#each groupCategories($categories.data) as grid}
 										<div class="grid flex-shrink-0 grid-cols-1 gap-y-6 lg:gap-y-8">
 											{#each grid as category, i (i)}
 												{#if category.display === false}
-													<div class="h-56 w-44 overflow-hidden rounded-lg" />
+													<div class="w-44 overflow-hidden" />
 												{:else}
-													<div class="h-56 w-44 overflow-hidden rounded-lg shadow">
-														<Card variant="surface" class="h-full w-full overflow-hidden">
-															<div class="px-2 py-3 sm:p-4">
+													<Card.Root class="w-44 overflow-hidden">
+														<Card.Header>
+															<Card.Title>
 																<Icon
 																	icon={`material-symbols:${kebabCase(String(category.icon))}`}
-																	class="mb-4 h-12 w-12 text-{category.color}"
+																	class="mb-2 h-12 w-12 text-{category.color}"
 																/>
-
-																<h2 class="text-high-contrast text-lg font-medium leading-6">
+																<h3 class="text-lg font-medium leading-6">
 																	{m[`event_category_${category.key}_name`]()}
-																</h2>
-																<p class="text-low-contrast mt-2 text-base">
-																	{m[`event_category_${category.key}_description`]()}
-																</p>
-															</div>
-														</Card>
-													</div>
+																</h3>
+															</Card.Title>
+															<Card.Description>
+																{m[`event_category_${category.key}_description`]()}
+															</Card.Description>
+														</Card.Header>
+													</Card.Root>
 												{/if}
 											{/each}
 										</div>

src/routes/events/[id=integer]/[[slug]]/+page.svelte

@@ -36,33 +36,18 @@
 		<SeoHandler factory={new EventSeoFactory($event.data)} />
 
 		<article class="text-base leading-7">
-			<p class="text-accent-11 text-base font-semibold leading-7">
+			<p class="text-base font-semibold leading-7 text-primary">
 				{m[`event_category_${$event.data.category_key}_name`]()}
 				#{$event.data.id}
 			</p>
-			<h1 class="text-high-contrast mt-2 text-3xl font-bold tracking-tight sm:text-4xl">
+			<h1 class="mt-2 text-3xl font-bold tracking-tight sm:text-4xl">
 				{$event.data.name}
 			</h1>
-			<p class="text-low-contrast my-4 text-xl leading-8">
+			<p class="my-4 text-xl leading-8 text-muted-foreground">
 				{$event.data.description}
 			</p>
 
-			<div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
-				<div class="/*col-span-2*/ col-span-3 lg:order-last">
-					<EventProperties properties={$event.data} />
-				</div>
-			</div>
-
-			<div class="relative my-6">
-				<div class="absolute inset-0 flex items-center" aria-hidden="true">
-					<div class="border-neutral-6 w-full border-t" />
-				</div>
-				<div class="relative flex justify-center">
-					<span class="bg-neutral-1 text-neutral-9 px-2">
-						<Icon icon="tabler:lego" class="h-5 w-5" />
-					</span>
-				</div>
-			</div>
+			<EventProperties properties={$event.data} />
 		</article>
 	{/if}
 </Section>