Header component

src/lib/components/Button.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	interface Props {
+		text: string;
+		color?: string;
+		variant?: 'primary' | 'secondary' | 'outline';
+		size?: 'sm' | 'md' | 'lg';
+		disabled?: boolean;
+		type?: 'button' | 'submit' | 'reset';
+		onclick?: () => void;
+		class?: string;
+	}
+
+	let {
+		text,
+		color = 'var(--color-pink)',
+		variant = 'primary',
+		size = 'md',
+		disabled = false,
+		type = 'button',
+		onclick,
+		class: className = '',
+		...restProps
+	}: Props = $props();
+
+	const baseClasses =
+		'inline-flex items-center justify-center font-medium rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed';
+
+	const sizeClasses = {
+		sm: 'px-3 py-1.5 text-sm',
+		md: 'px-4 py-2 text-sm',
+		lg: 'px-6 py-3 text-base'
+	};
+
+	const getVariantClasses = (variant: string) => {
+		switch (variant) {
+			case 'primary':
+				return `text-white hover:opacity-90 focus:ring-2`;
+			case 'secondary':
+				return `bg-gray-100 text-gray-900 hover:bg-gray-200 focus:ring-gray-500`;
+			case 'outline':
+				return `bg-transparent border-2 hover:opacity-90 focus:ring-2`;
+			default:
+				return `text-white hover:opacity-90 focus:ring-2`;
+		}
+	};
+
+	const buttonClasses = $derived(
+		[baseClasses, sizeClasses[size], getVariantClasses(variant), className].join(' ')
+	);
+
+	const buttonStyle = $derived(
+		variant === 'primary'
+			? `background-color: ${color}; --tw-ring-color: ${color};`
+			: variant === 'outline'
+				? `border-color: ${color}; color: ${color}; --tw-ring-color: ${color};`
+				: ''
+	);
+</script>
+
+<button {type} {disabled} class={buttonClasses} style={buttonStyle} {onclick} {...restProps}>
+	{text}
+</button>

src/lib/components/header.svelte

@@ -1,16 +1,40 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
+	import Button from './Button.svelte';
 
 	const toggleDevMode = getContext<() => void>('toggleDevMode');
-	const onToggleDevMode = () => { toggleDevMode() };
+	const onToggleDevMode = () => {
+		toggleDevMode();
+	};
 </script>
 
-<header class="dev flex flex-row justify-between">
-	<h1 class="dev">
-		<strike>Beacons</strike> Questionnaire
-	</h1>
+<header class="sticky top-0 z-50 w-full border-b border-gray-200 bg-white">
+	<div class="flex h-16 items-center justify-between px-4 sm:px-6 lg:px-8">
+		<!-- Logo and App Name. Forcing uppercase for consistency -->
+		<div class="flex items-center space-x-3">
+			<img
+				src="/Logos/LIFT_logo_gradient_clean.svg"
+				alt="Neacons logo"
+				class="h-8 w-auto sm:h-10"
+			/>
+			<h1 class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl">Neacons</h1>
+		</div>
 
-	<button onclick={onToggleDevMode} class="dev button">
-		Toggle Dev Mode
-	</button>
-</header>
+		<!-- Action Buttons -->
+		<div class="flex items-center space-x-3">
+			<!-- Dev Mode Toggle (Development Only) -->
+			<button
+				onclick={onToggleDevMode}
+				class="dev button inline-flex items-center rounded-md border border-gray-300 bg-gray-100 px-3 py-2 text-sm font-medium text-gray-700 transition-colors duration-200 hover:bg-gray-200 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none"
+				type="button"
+				aria-label="Toggle development mode"
+			>
+				<span class="sr-only">Toggle</span>
+				Dev Mode
+			</button>
+
+			<!-- Profile Button -->
+			<Button text="Profile" variant="primary" onclick={() => {}} />
+		</div>
+	</div>
+</header>