feat: use PostGuard shield logo with purple colorway

Copy the PostGuard SVG logo from the personal site, replace blue
(#0071EB) with purple (#7C3AED) for light mode and violet (#A78BFA)
with white text for dark mode.

Replace the generic mdi:shield-lock icon with the actual logo across
all pages: header, portal sidebar, admin sidebar, and login pages.
Global .light-only/.dark-only CSS classes handle theme switching.

Author: rubenhensen

src/lib/assets/images/logo-dark.svg

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import ThemeSwitcher from './ThemeSwitcher.svelte';
 	import Icon from '@iconify/svelte';
+	import logoLight from '$lib/assets/images/logo.svg';
+	import logoDark from '$lib/assets/images/logo-dark.svg';
 
 	let {
 		showPricing = true,
@@ -26,8 +28,8 @@
 <header>
 	<div class="header-inner">
 		<a href="/" class="logo" aria-label="PostGuard for Business home">
-			<Icon icon="mdi:shield-lock" width="28" height="28" />
-			<span class="logo-text">PostGuard</span>
+			<img src={logoLight} alt="PostGuard" class="logo-img light-only" height="28" />
+			<img src={logoDark} alt="PostGuard" class="logo-img dark-only" height="28" />
 			<span class="logo-badge">Business</span>
 		</a>
 
@@ -87,12 +89,6 @@
 		color: var(--pg-text);
 	}
 
-	.logo-text {
-		font-family: var(--pg-font-family);
-		font-weight: var(--pg-font-weight-extrabold);
-		font-size: var(--pg-font-size-lg);
-	}
-
 	.logo-badge {
 		font-family: var(--pg-font-family);
 		font-size: var(--pg-font-size-xs);

src/lib/assets/images/logo.svg

@@ -79,6 +79,18 @@ body {
 	.invert {
 		filter: invert(100%);
 	}
+
+	.light-only {
+		display: none !important;
+	}
+}
+
+.dark-only {
+	display: none !important;
+}
+
+.dark .dark-only {
+	display: block !important;
 }
 
 *,

src/lib/components/Header.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import Icon from '@iconify/svelte';
+	import logoLight from '$lib/assets/images/logo.svg';
+	import logoDark from '$lib/assets/images/logo-dark.svg';
 	import ThemeSwitcher from '$lib/components/ThemeSwitcher.svelte';
 	import type { LayoutData } from './$types';
 
@@ -34,7 +36,7 @@
 	<aside class="sidebar" class:open={sidebarOpen}>
 		<div class="sidebar-header">
 			<a href="/admin/organizations" class="sidebar-logo">
-				<Icon icon="mdi:shield-lock" width="24" height="24" />
+				<img src={logoLight} alt="PostGuard" class="logo-img light-only" height="22" /><img src={logoDark} alt="PostGuard" class="logo-img dark-only" height="22" />
 				<span>Admin</span>
 			</a>
 			<button class="sidebar-close desktop-hide" onclick={() => (sidebarOpen = false)}>

src/lib/global.scss

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import Icon from '@iconify/svelte';
+	import logoLight from '$lib/assets/images/logo.svg';
+	import logoDark from '$lib/assets/images/logo-dark.svg';
 	import ThemeSwitcher from '$lib/components/ThemeSwitcher.svelte';
 	import type { LayoutData } from './$types';
 
@@ -37,7 +39,7 @@
 	<aside class="sidebar" class:open={sidebarOpen}>
 		<div class="sidebar-header">
 			<a href="/" class="sidebar-logo">
-				<Icon icon="mdi:shield-lock" width="24" height="24" />
+				<img src={logoLight} alt="PostGuard" class="logo-img light-only" height="22" /><img src={logoDark} alt="PostGuard" class="logo-img dark-only" height="22" />
 				<span>PostGuard</span>
 			</a>
 			<button class="sidebar-close desktop-hide" onclick={() => (sidebarOpen = false)}>

src/routes/(admin)/+layout.svelte

@@ -3,6 +3,8 @@
 	import ThemeSwitcher from '$lib/components/ThemeSwitcher.svelte';
 	import YiviLogin from '$lib/components/YiviLogin.svelte';
 	import Icon from '@iconify/svelte';
+	import logoLight from '$lib/assets/images/logo.svg';
+	import logoDark from '$lib/assets/images/logo-dark.svg';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import type { PageData } from './$types';
@@ -21,7 +23,7 @@
 <section class="login-page">
 	<div class="login-header">
 		<a href="/" class="logo">
-			<Icon icon="mdi:shield-lock" width="24" height="24" />
+			<img src={logoLight} alt="PostGuard" class="logo-img light-only" height="22" /><img src={logoDark} alt="PostGuard" class="logo-img dark-only" height="22" />
 			<span>PostGuard</span>
 		</a>
 		<ThemeSwitcher />

src/routes/(portal)/+layout.svelte

@@ -3,6 +3,8 @@
 	import ThemeSwitcher from '$lib/components/ThemeSwitcher.svelte';
 	import YiviLogin from '$lib/components/YiviLogin.svelte';
 	import Icon from '@iconify/svelte';
+	import logoLight from '$lib/assets/images/logo.svg';
+	import logoDark from '$lib/assets/images/logo-dark.svg';
 	import { goto } from '$app/navigation';
 	import type { PageData } from './$types';
 
@@ -18,7 +20,7 @@
 <section class="login-page">
 	<div class="login-header">
 		<a href="/" class="logo">
-			<Icon icon="mdi:shield-lock" width="24" height="24" />
+			<img src={logoLight} alt="PostGuard" class="logo-img light-only" height="22" /><img src={logoDark} alt="PostGuard" class="logo-img dark-only" height="22" />
 			<span>PostGuard</span>
 		</a>
 		<ThemeSwitcher />