update: wishlist docker compose file

Reviewed-on: #7

README.md

@@ -2,6 +2,9 @@
 
 A wishlist application built with SvelteKit, Drizzle ORM, and PostgreSQL.
 
+![Dashboard](readme-assets/dashboard.png)
+![Creating a wishlist](readme-assets/create.png)
+
 ## Prerequisites
 
 - [Bun](https://bun.sh/)

docker-compose.yml

@@ -1,41 +1,61 @@
 services:
-  db:
+  database:
     image: postgres:16-alpine
-    container_name: wishlist-db
+    container_name: wishlist-postgres
+    restart: unless-stopped
     environment:
-      POSTGRES_USER: wishlistuser
-      POSTGRES_PASSWORD: wishlistpassword
-      POSTGRES_DB: wishlist
-    ports:
-      - "5432:5432"
+      POSTGRES_USER: ${POSTGRES_USER}
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
+      POSTGRES_DB: ${POSTGRES_DB}
     volumes:
-      - postgres_data:/var/lib/postgresql/data
+      - /mnt/HC_Volume_102830676/wishlist:/var/lib/postgresql/data
     healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U wishlistuser -d wishlist"]
+      test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USER} -d ${POSTGRES_DB}"]
       interval: 10s
       timeout: 5s
       retries: 5
+    networks:
+      - wishlist-net
 
   app:
     build:
       context: .
       dockerfile: Dockerfile
     container_name: wishlist-app
+    restart: unless-stopped
     environment:
-      DATABASE_URL: postgresql://wishlistuser:wishlistpassword@db:5432/wishlist
+      DATABASE_URL: postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@database:5432/${POSTGRES_DB}
       NODE_ENV: production
       PORT: 3000
-      AUTH_SECRET: ${AUTH_SECRET:-change-me-in-production}
-      AUTH_URL: ${AUTH_URL:-http://localhost:3000}
-      AUTH_TRUST_HOST: true
+      AUTH_SECRET: ${AUTH_SECRET}
+      AUTH_URL: ${AUTH_URL}
+      AUTH_TRUST_HOST: "true"
       GOOGLE_CLIENT_ID: ${GOOGLE_CLIENT_ID:-}
       GOOGLE_CLIENT_SECRET: ${GOOGLE_CLIENT_SECRET:-}
-    ports:
-      - "3000:3000"
+      AUTHENTIK_CLIENT_ID: ${AUTHENTIK_CLIENT_ID:-}
+      AUTHENTIK_CLIENT_SECRET: ${AUTHENTIK_CLIENT_SECRET:-}
+      AUTHENTIK_ISSUER: ${AUTHENTIK_ISSUER:-}
     depends_on:
-      db:
+      database:
         condition: service_healthy
-    restart: unless-stopped
+    networks:
+      - wishlist-net
+      - traefik-net
+    labels:
+      - traefik.enable=true
+      - traefik.docker.network=traefik-net
+      # HTTPS router
+      - traefik.http.routers.wishlist.rule=Host(`wish.rasmusq.com`)
+      - traefik.http.routers.wishlist.entrypoints=websecure
+      - traefik.http.routers.wishlist.tls.certresolver=letsencrypt
+      # Forward headers for Auth.js
+      - traefik.http.routers.wishlist.middlewares=wishlist-headers
+      - traefik.http.middlewares.wishlist-headers.headers.customRequestHeaders.X-Forwarded-Proto=https
+      - traefik.http.middlewares.wishlist-headers.headers.customRequestHeaders.X-Forwarded-Host=wish.rasmusq.com
+      - traefik.http.services.wishlist.loadbalancer.server.port=3000
 
-volumes:
-  postgres_data:
+networks:
+  wishlist-net:
+    name: wishlist-net
+  traefik-net:
+    external: true

drizzle/schema.ts

@@ -78,6 +78,9 @@ export const user = pgTable("user", {
 	username: text(),
 	dashboardTheme: text("dashboard_theme").default('none'),
 	dashboardColor: text("dashboard_color"),
+	lastLogin: timestamp("last_login", { mode: 'string' }),
+	createdAt: timestamp("created_at", { mode: 'string' }).defaultNow().notNull(),
+	updatedAt: timestamp("updated_at", { mode: 'string' }).defaultNow().notNull(),
 }, (table) => [
 	unique("user_email_unique").on(table.email),
 	unique("user_username_unique").on(table.username),

src/auth.ts

@@ -103,6 +103,14 @@ const authConfig: SvelteKitAuthConfig = {
 		signIn: '/signin'
 	},
 	callbacks: {
+		async signIn({ user }) {
+			if (user?.id) {
+				await db.update(users)
+					.set({ lastLogin: new Date() })
+					.where(eq(users.id, user.id));
+			}
+			return true;
+		},
 		async jwt({ token, user }) {
 			if (user) {
 				token.id = user.id;

src/lib/components/layout/DashboardHeader.svelte

@@ -79,9 +79,9 @@
 		{/if}
 	</div>
 	<div class="flex items-center gap-1 sm:gap-2 flex-shrink-0">
-		<ColorPicker bind:color={localColor} onchange={handleColorChange} />
-		<ThemePicker value={dashboardTheme} onValueChange={handleThemeChange} />
-		<LanguageToggle />
+		<ColorPicker bind:color={localColor} onchange={handleColorChange} size="sm" />
+		<ThemePicker value={dashboardTheme} onValueChange={handleThemeChange} color={localColor} />
+		<LanguageToggle color={localColor} />
 		<ThemeToggle />
 		{#if isAuthenticated}
 			<Button variant="outline" onclick={() => signOut({ callbackUrl: '/' })}>{t.auth.signOut}</Button>

src/lib/components/layout/Navigation.svelte

@@ -7,10 +7,12 @@
 
 	let {
 		isAuthenticated = false,
-		showDashboardLink = false
+		showDashboardLink = false,
+		color = null
 	}: {
 		isAuthenticated?: boolean;
 		showDashboardLink?: boolean;
+		color?: string | null;
 	} = $props();
 
 	const t = $derived(languageStore.t);
@@ -28,7 +30,7 @@
 		</Button>
 	{/if}
 	<div class="ml-auto flex items-center gap-1 sm:gap-2">
-		<LanguageToggle />
-		<ThemeToggle />
+		<LanguageToggle {color} />
+		<ThemeToggle size="sm" {color} />
 	</div>
 </nav>

src/lib/components/themes/svgs/BottomPattern.svelte

@@ -16,17 +16,15 @@
 
 {#if pattern !== 'none'}
 	<div
-		class="absolute bottom-0 left-0 right-0 pointer-events-none overflow-hidden"
+		class="fixed bottom-0 left-0 right-0 pointer-events-none overflow-hidden z-0"
 		style="
 			mask-image: url({patternPath});
-			-webkit-mask-image: url({patternPath});
 			mask-size: cover;
-			-webkit-mask-size: cover;
-			mask-repeat: repeat;
-			-webkit-mask-repeat: repeat;
+			mask-repeat: no-repeat;
+			mask-position: left bottom;
 			background-color: {color};
 			opacity: {opacity};
-			height: 200px;
+			height: 100vh;
 		"
 	/>
 {/if}

src/lib/components/themes/svgs/CardPattern.svelte

@@ -16,18 +16,15 @@
 
 {#if pattern !== 'none'}
 	<div
-		class="absolute bottom-0 right-0 pointer-events-none overflow-hidden rounded-b-lg"
+		class="absolute bottom-0 top-0 right-0 pointer-events-none overflow-hidden rounded-b-lg"
 		style="
 			mask-image: url({patternPath});
-			-webkit-mask-image: url({patternPath});
 			mask-size: cover;
-			-webkit-mask-size: cover;
-			mask-repeat: repeat;
-			-webkit-mask-repeat: repeat;
+			mask-repeat: no-repeat;
+			mask-position: right bottom;
 			background-color: {color};
 			opacity: {opacity};
-			width: 200px;
-			height: 200px;
+			width: 100%;
 		"
 	/>
 {/if}

src/lib/components/themes/svgs/TopPattern.svelte

@@ -16,17 +16,15 @@
 
 {#if pattern !== 'none'}
 	<div
-		class="absolute top-0 left-0 right-0 pointer-events-none overflow-hidden"
+		class="fixed top-0 right-0 left-0 pointer-events-none z-0"
 		style="
 			mask-image: url({patternPath});
-			-webkit-mask-image: url({patternPath});
 			mask-size: cover;
-			-webkit-mask-size: cover;
-			mask-repeat: repeat;
-			-webkit-mask-repeat: repeat;
+			mask-repeat: no-repeat;
+			mask-position: right top;
 			background-color: {color};
 			opacity: {opacity};
-			height: 200px;
+			height: 100vh;
 		"
 	/>
 {/if}

src/lib/components/ui/ColorPicker.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { X, Pencil } from 'lucide-svelte';
+	import IconButton from './IconButton.svelte';
 
 	let {
 		color = $bindable(null),
@@ -18,7 +19,7 @@
 	};
 
 	const iconSizeClasses = {
-		sm: 'w-3 h-3',
+		sm: 'w-4 h-4',
 		md: 'w-4 h-4',
 		lg: 'w-5 h-5'
 	};
@@ -39,17 +40,18 @@
 
 <div class="flex items-center gap-2">
 	{#if color}
-		<button
-			type="button"
+		<IconButton
 			onclick={clearColor}
-			class="{buttonSize} flex items-center justify-center rounded-full border border-input hover:bg-accent transition-colors"
+			{color}
+			{size}
 			aria-label="Clear color"
+			rounded="md"
 		>
 			<X class={iconSize} />
-		</button>
+		</IconButton>
 	{/if}
 	<label
-		class="{buttonSize} flex items-center justify-center rounded-full border border-input hover:opacity-90 transition-opacity cursor-pointer relative overflow-hidden"
+		class="{buttonSize} flex items-center justify-center rounded-md border border-input hover:opacity-90 transition-opacity cursor-pointer relative overflow-hidden"
 		style={color ? `background-color: ${color};` : ''}
 	>
 		<Pencil class="{iconSize} relative z-10 pointer-events-none" style={color ? 'color: white; filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));' : ''} />

src/lib/components/ui/Dropdown.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { scale } from 'svelte/transition';
+	import { cubicOut } from 'svelte/easing';
+	import type { Snippet } from 'svelte';
+    import IconButton from './IconButton.svelte';
+
+	let {
+		items,
+		selectedValue,
+		onSelect,
+		color,
+		showCheckmark = true,
+		icon,
+		ariaLabel
+	}: {
+		items: Array<{ value: string; label: string }>;
+		selectedValue: string;
+		onSelect: (value: string) => void;
+		color?: string | null;
+		showCheckmark?: boolean;
+		icon: Snippet;
+		ariaLabel: string;
+	} = $props();
+
+	let showMenu = $state(false);
+
+	const menuClasses = $derived(
+		color
+			? 'absolute left-0 sm:right-0 sm:left-auto mt-2 w-40 rounded-md border shadow-lg z-50 backdrop-blur-md'
+			: 'absolute left-0 sm:right-0 sm:left-auto mt-2 w-40 rounded-md border shadow-lg z-50 backdrop-blur-md border-slate-200 dark:border-slate-800 bg-white/90 dark:bg-slate-950/90'
+	);
+
+	const menuStyle = $derived(
+		color
+			? `border-color: ${color}; background-color: ${color}20; backdrop-filter: blur(12px);`
+			: ''
+	);
+
+	function getItemStyle(itemValue: string): string {
+		if (!color) return '';
+		return selectedValue === itemValue ? `background-color: ${color}20;` : '';
+	}
+
+	function toggleMenu() {
+		showMenu = !showMenu;
+	}
+
+	function handleSelect(value: string) {
+		onSelect(value);
+		showMenu = false;
+	}
+
+	function handleClickOutside(event: MouseEvent) {
+		const target = event.target as HTMLElement;
+		if (!target.closest('.dropdown-menu')) {
+			showMenu = false;
+		}
+	}
+
+	function handleMouseEnter(e: MouseEvent) {
+		if (color) {
+			(e.currentTarget as HTMLElement).style.backgroundColor = `${color}15`;
+		}
+	}
+
+	function handleMouseLeave(e: MouseEvent, itemValue: string) {
+		if (color) {
+			(e.currentTarget as HTMLElement).style.backgroundColor =
+				selectedValue === itemValue ? `${color}20` : 'transparent';
+		}
+	}
+
+	$effect(() => {
+		if (showMenu) {
+			document.addEventListener('click', handleClickOutside);
+			return () => document.removeEventListener('click', handleClickOutside);
+		}
+	});
+</script>
+
+<div class="relative dropdown-menu">
+	<IconButton
+		size="sm"
+		rounded="md"
+		onclick={toggleMenu}
+		aria-label={ariaLabel}
+		class={color ? 'hover-themed' : ''}
+		style={color ? `--hover-bg: ${color}20;` : ''}
+	>
+		{@render icon()}
+	</IconButton>
+
+	{#if showMenu}
+		<div
+			class={menuClasses}
+			style={menuStyle}
+			transition:scale={{ duration: 150, start: 0.95, opacity: 0, easing: cubicOut }}
+		>
+			<div class="py-1">
+				{#each items as item}
+					<button
+						type="button"
+						class="w-full text-left px-4 py-2 text-sm transition-colors"
+						class:hover:bg-slate-100={!color}
+						class:dark:hover:bg-slate-900={!color}
+						class:font-bold={selectedValue === item.value}
+						class:bg-slate-100={selectedValue === item.value && !color}
+						class:dark:bg-slate-900={selectedValue === item.value && !color}
+						class:flex={showCheckmark}
+						class:items-center={showCheckmark}
+						class:justify-between={showCheckmark}
+						style={getItemStyle(item.value)}
+						onmouseenter={handleMouseEnter}
+						onmouseleave={(e) => handleMouseLeave(e, item.value)}
+						onclick={() => handleSelect(item.value)}
+					>
+						<span>{item.label}</span>
+						{#if showCheckmark && selectedValue === item.value}
+							<span class="ml-2">✓</span>
+						{/if}
+					</button>
+				{/each}
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	:global(.hover-themed:hover) {
+		background-color: var(--hover-bg) !important;
+	}
+</style>

src/lib/components/ui/IconButton.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLButtonAttributes {
+		color?: string | null;
+		rounded?: 'full' | 'md' | 'lg';
+		size?: 'sm' | 'md' | 'lg';
+		children: Snippet;
+	}
+
+	let {
+		color = null,
+		rounded = 'full',
+		size = 'md',
+		class: className = '',
+		children,
+		...restProps
+	}: Props = $props();
+
+	const sizeClasses = {
+		sm: 'w-8 h-8',
+		md: 'w-10 h-10',
+		lg: 'w-12 h-12'
+	};
+
+	const roundedClasses = {
+		full: 'rounded-full',
+		md: 'rounded-md',
+		lg: 'rounded-lg'
+	};
+
+	const baseClasses = 'flex items-center justify-center border border-input transition-colors backdrop-blur';
+	const sizeClass = sizeClasses[size];
+	const roundedClass = roundedClasses[rounded];
+</script>
+
+<button
+	type="button"
+	class="{baseClasses} {sizeClass} {roundedClass} {className} backdrop-blur-sm"
+	class:hover:bg-accent={!color}
+	style={color ? `--hover-bg: ${color}20;` : ''}
+	{...restProps}
+>
+	{@render children()}
+</button>
+
+<style>
+	button[style*='--hover-bg']:hover {
+		background-color: var(--hover-bg);
+	}
+</style>

src/lib/components/ui/language-toggle/LanguageToggle.svelte

@@ -1,58 +1,32 @@
 <script lang="ts">
 	import { languageStore } from '$lib/stores/language.svelte';
 	import { languages } from '$lib/i18n/translations';
-	import { Button } from '$lib/components/ui/button';
+	import Dropdown from '$lib/components/ui/Dropdown.svelte';
 	import { Languages } from 'lucide-svelte';
 
-	let showMenu = $state(false);
+	let { color }: { color?: string | null } = $props();
 
-	function toggleMenu() {
-		showMenu = !showMenu;
-	}
+	const languageItems = $derived(
+		languages.map((lang) => ({
+			value: lang.code,
+			label: lang.name
+		}))
+	);
 
-	function setLanguage(code: 'en' | 'da') {
-		languageStore.setLanguage(code);
-		showMenu = false;
+	function setLanguage(code: string) {
+		languageStore.setLanguage(code as 'en' | 'da');
 	}
-
-	function handleClickOutside(event: MouseEvent) {
-		const target = event.target as HTMLElement;
-		if (!target.closest('.language-toggle-menu')) {
-			showMenu = false;
-		}
-	}
-
-	$effect(() => {
-		if (showMenu) {
-			document.addEventListener('click', handleClickOutside);
-			return () => document.removeEventListener('click', handleClickOutside);
-		}
-	});
 </script>
 
-<div class="relative language-toggle-menu">
-	<Button variant="outline" size="icon" onclick={toggleMenu} aria-label="Toggle language">
+<Dropdown
+	items={languageItems}
+	selectedValue={languageStore.current}
+	onSelect={setLanguage}
+	{color}
+	showCheckmark={false}
+	ariaLabel="Toggle language"
+>
+	{#snippet icon()}
 		<Languages class="h-[1.2rem] w-[1.2rem]" />
-	</Button>
-
-	{#if showMenu}
-		<div
-			class="absolute left-0 sm:right-0 sm:left-auto mt-2 w-40 rounded-md border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 shadow-lg z-50"
-		>
-			<div class="py-1">
-				{#each languages as lang}
-					<button
-						type="button"
-						class="w-full text-left px-4 py-2 text-sm hover:bg-slate-100 dark:hover:bg-slate-900 transition-colors"
-						class:font-bold={languageStore.current === lang.code}
-						class:bg-slate-100={languageStore.current === lang.code}
-						class:dark:bg-slate-900={languageStore.current === lang.code}
-						onclick={() => setLanguage(lang.code)}
-					>
-						{lang.name}
-					</button>
-				{/each}
-			</div>
-		</div>
-	{/if}
-</div>
+	{/snippet}
+</Dropdown>

src/lib/components/ui/theme-picker.svelte

@@ -1,68 +1,35 @@
 <script lang="ts">
-	import { Button } from '$lib/components/ui/button';
+	import Dropdown from '$lib/components/ui/Dropdown.svelte';
 	import { Palette } from 'lucide-svelte';
 	import { AVAILABLE_THEMES } from '$lib/utils/themes';
 
 	let {
 		value = 'none',
-		onValueChange
+		onValueChange,
+		color
 	}: {
 		value?: string;
 		onValueChange: (theme: string) => void;
+		color?: string | null;
 	} = $props();
 
-	let showMenu = $state(false);
-
-	function toggleMenu() {
-		showMenu = !showMenu;
-	}
-
-	function handleSelect(themeName: string) {
-		onValueChange(themeName);
-		showMenu = false;
-	}
-
-	function handleClickOutside(event: MouseEvent) {
-		const target = event.target as HTMLElement;
-		if (!target.closest('.theme-picker-menu')) {
-			showMenu = false;
-		}
-	}
-
-	$effect(() => {
-		if (showMenu) {
-			document.addEventListener('click', handleClickOutside);
-			return () => document.removeEventListener('click', handleClickOutside);
-		}
-	});
+	const themeItems = $derived(
+		Object.entries(AVAILABLE_THEMES).map(([key, theme]) => ({
+			value: key,
+			label: theme.name
+		}))
+	);
 </script>
 
-<div class="relative theme-picker-menu">
-	<Button variant="outline" size="icon" onclick={toggleMenu} aria-label="Select theme pattern">
+<Dropdown
+	items={themeItems}
+	selectedValue={value}
+	onSelect={onValueChange}
+	{color}
+	showCheckmark={true}
+	ariaLabel="Select theme pattern"
+>
+	{#snippet icon()}
 		<Palette class="h-[1.2rem] w-[1.2rem]" />
-	</Button>
-
-	{#if showMenu}
-		<div
-			class="absolute left-0 sm:right-0 sm:left-auto mt-2 w-40 rounded-md border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 shadow-lg z-50"
-		>
-			<div class="py-1">
-				{#each Object.entries(AVAILABLE_THEMES) as [key, theme]}
-					<button
-						type="button"
-						class="w-full text-left px-4 py-2 text-sm hover:bg-slate-100 dark:hover:bg-slate-900 transition-colors flex items-center justify-between"
-						class:font-bold={value === key}
-						class:bg-slate-100={value === key}
-						class:dark:bg-slate-900={value === key}
-						onclick={() => handleSelect(key)}
-					>
-						<span>{theme.name}</span>
-						{#if value === key}
-							<span class="ml-2">✓</span>
-						{/if}
-					</button>
-				{/each}
-			</div>
-		</div>
-	{/if}
-</div>
+	{/snippet}
+</Dropdown>

src/lib/components/ui/theme-toggle/ThemeToggle.svelte

@@ -1,14 +1,22 @@
 <script lang="ts">
 	import { themeStore } from '$lib/stores/theme.svelte';
-	import { Button } from '$lib/components/ui/button';
 	import { Sun, Moon, Monitor } from 'lucide-svelte';
+    import IconButton from '../IconButton.svelte';
+
+	let {
+		color = $bindable(null),
+		size = 'sm',
+	}: {
+		color: string | null;
+		size?: 'sm' | 'md' | 'lg';
+	} = $props();
 
 	function toggle() {
 		themeStore.toggle();
 	}
 </script>
 
-<Button onclick={toggle} variant="ghost" size="icon" class="rounded-full">
+<IconButton onclick={toggle} {size} {color} rounded="md">
 	{#if themeStore.current === 'light'}
 		<Sun size={20} />
 		<span class="sr-only">Light mode (click for dark)</span>
@@ -19,4 +27,4 @@
 		<Monitor size={20} />
 		<span class="sr-only">System mode (click for light)</span>
 	{/if}
-</Button>
+</IconButton>

src/lib/components/wishlist/AddItemForm.svelte

@@ -8,12 +8,18 @@
 	import ColorPicker from '$lib/components/ui/ColorPicker.svelte';
 	import { enhance } from '$app/forms';
 	import { languageStore } from '$lib/stores/language.svelte';
+	import ThemeCard from '$lib/components/themes/ThemeCard.svelte';
+	import { getCardStyle } from '$lib/utils/colors';
 
 	interface Props {
 		onSuccess?: () => void;
+		wishlistColor?: string | null;
+		wishlistTheme?: string | null;
 	}
 
-	let { onSuccess }: Props = $props();
+	let { onSuccess, wishlistColor = null, wishlistTheme = null }: Props = $props();
+
+	const cardStyle = $derived(getCardStyle(wishlistColor, null));
 
 	const t = $derived(languageStore.t);
 
@@ -53,11 +59,12 @@
 	}
 </script>
 
-<Card>
-	<CardHeader>
+<Card style={cardStyle} class="relative overflow-hidden">
+	<ThemeCard themeName={wishlistTheme} color={wishlistColor} showPattern={false} />
+	<CardHeader class="relative z-10">
 		<CardTitle>{t.form.addNewWish}</CardTitle>
 	</CardHeader>
-	<CardContent>
+	<CardContent class="relative z-10">
 		<form
 			method="POST"
 			action="?/addItem"

src/lib/components/wishlist/EditItemForm.svelte

@@ -9,6 +9,8 @@
 	import { enhance } from '$app/forms';
 	import type { Item } from '$lib/server/schema';
 	import { languageStore } from '$lib/stores/language.svelte';
+	import ThemeCard from '$lib/components/themes/ThemeCard.svelte';
+	import { getCardStyle } from '$lib/utils/colors';
 
 	interface Props {
 		item: Item;
@@ -18,9 +20,13 @@
 		currentPosition?: number;
 		totalItems?: number;
 		onPositionChange?: (newPosition: number) => void;
+		wishlistColor?: string | null;
+		wishlistTheme?: string | null;
 	}
 
-	let { item, onSuccess, onCancel, onColorChange, currentPosition = 1, totalItems = 1, onPositionChange }: Props = $props();
+	let { item, onSuccess, onCancel, onColorChange, currentPosition = 1, totalItems = 1, onPositionChange, wishlistColor = null, wishlistTheme = null }: Props = $props();
+
+	const cardStyle = $derived(getCardStyle(wishlistColor, null));
 
 	const t = $derived(languageStore.t);
 
@@ -60,11 +66,12 @@
 	}
 </script>
 
-<Card>
-	<CardHeader>
+<Card style={cardStyle} class="relative overflow-hidden">
+	<ThemeCard themeName={wishlistTheme} color={wishlistColor} showPattern={false} />
+	<CardHeader class="relative z-10">
 		<CardTitle>{t.wishlist.editWish}</CardTitle>
 	</CardHeader>
-	<CardContent>
+	<CardContent class="relative z-10">
 		<form
 			method="POST"
 			action="?/updateItem"

src/lib/components/wishlist/EditableItemsList.svelte

@@ -72,7 +72,7 @@
 		</div>
 	{:else}
 		<Card style={cardStyle} class="relative overflow-hidden">
-			<ThemeCard themeName={theme} color={wishlistColor} />
+			<ThemeCard themeName={theme} color={wishlistColor} showPattern={false} />
 			<CardContent class="p-12 relative z-10">
 				<EmptyState
 					message={t.wishlist.noWishes + ". " + t.wishlist.addFirstWish + "!"}

src/lib/components/wishlist/WishlistHeader.svelte

@@ -6,6 +6,7 @@
 	import { Pencil, Check, X } from "lucide-svelte";
 	import ColorPicker from "$lib/components/ui/ColorPicker.svelte";
 	import ThemePicker from "$lib/components/ui/theme-picker.svelte";
+	import IconButton from "$lib/components/ui/IconButton.svelte";
 	import type { Wishlist } from "$lib/server/schema";
 	import { languageStore } from '$lib/stores/language.svelte';
 	import { getCardStyle } from '$lib/utils/colors';
@@ -80,7 +81,6 @@
 	}
 </script>
 
-<!-- Title Header -->
 <div class="flex items-center justify-between gap-4 mb-6">
 	<div class="flex items-center gap-2 flex-1 min-w-0">
 		{#if editingTitle}
@@ -100,8 +100,7 @@
 		{:else}
 			<h1 class="text-3xl font-bold leading-[2.25rem]">{wishlistTitle}</h1>
 		{/if}
-		<button
-			type="button"
+		<IconButton
 			onclick={() => {
 				if (editingTitle) {
 					saveTitle();
@@ -109,7 +108,9 @@
 					editingTitle = true;
 				}
 			}}
-			class="shrink-0 w-8 h-8 flex items-center justify-center rounded-full border border-input hover:bg-accent transition-colors"
+			color={wishlistColor}
+			size="sm"
+			class="shrink-0"
 			aria-label={editingTitle ? "Save title" : "Edit title"}
 		>
 			{#if editingTitle}
@@ -117,7 +118,7 @@
 			{:else}
 				<Pencil class="w-4 h-4" />
 			{/if}
-		</button>
+		</IconButton>
 	</div>
 	<div class="flex items-center gap-2 shrink-0">
 		<ThemePicker
@@ -128,23 +129,22 @@
 				// Force reactivity by updating the wishlist object
 				wishlist.theme = theme;
 			}}
+			color={wishlistColor}
 		/>
 		<ColorPicker
 			bind:color={wishlistColor}
 			onchange={() => onColorUpdate(wishlistColor)}
+			size="sm"
 		/>
 	</div>
 </div>
 
-<!-- Settings Card -->
 <Card style={cardStyle}>
 	<CardContent class="pt-6 space-y-4">
-		<!-- Description -->
 		<div class="space-y-2">
 			<div class="flex items-center justify-between gap-2">
 				<Label for="wishlist-description">{t.form.descriptionOptional}</Label>
-				<button
-					type="button"
+				<IconButton
 					onclick={() => {
 						if (editingDescription) {
 							saveDescription();
@@ -152,7 +152,9 @@
 							editingDescription = true;
 						}
 					}}
-					class="flex-shrink-0 w-8 h-8 flex items-center justify-center rounded-full border border-input hover:bg-accent transition-colors"
+					color={wishlistColor}
+					size="sm"
+					class="flex-shrink-0"
 					aria-label={editingDescription ? "Save description" : "Edit description"}
 				>
 					{#if editingDescription}
@@ -160,7 +162,7 @@
 					{:else}
 						<Pencil class="w-4 h-4" />
 					{/if}
-				</button>
+				</IconButton>
 			</div>
 			{#if editingDescription}
 				<Textarea
@@ -183,19 +185,19 @@
 			{/if}
 		</div>
 
-		<!-- End Date -->
 		<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-4">
 			<Label for="wishlist-end-date">{t.form.endDateOptional}</Label>
 			<div class="flex items-center gap-2">
 				{#if wishlistEndDate}
-					<button
-						type="button"
+					<IconButton
 						onclick={clearEndDate}
-						class="flex-shrink-0 w-8 h-8 flex items-center justify-center rounded-full border border-input hover:bg-accent transition-colors"
+						color={wishlistColor}
+						size="sm"
+						class="flex-shrink-0"
 						aria-label="Clear end date"
 					>
 						<X class="w-4 h-4" />
-					</button>
+					</IconButton>
 				{/if}
 				<Input
 					id="wishlist-end-date"

src/lib/components/wishlist/WishlistItem.svelte

@@ -57,7 +57,7 @@
 </script>
 
 <Card style={cardStyle} class="relative overflow-hidden">
-	<ThemeCard themeName={theme} color={item.color} />
+	<ThemeCard themeName={theme} color={item.color} showPattern={false} />
 	<CardContent class="p-6 relative z-10">
 		<div class="flex gap-4">
 			{#if showDragHandle}

src/lib/server/schema.ts

@@ -14,7 +14,10 @@ export const users = pgTable('user', {
 	password: text('password'),
 	username: text('username').unique(),
 	dashboardTheme: text('dashboard_theme').default('none'),
-	dashboardColor: text('dashboard_color')
+	dashboardColor: text('dashboard_color'),
+	lastLogin: timestamp('last_login', { mode: 'date' }),
+	createdAt: timestamp('created_at').defaultNow().notNull(),
+	updatedAt: timestamp('updated_at').defaultNow().notNull()
 });
 
 export const accounts = pgTable(

src/lib/utils/themes.ts

@@ -1,6 +1,6 @@
 import { themeStore } from '$lib/stores/theme.svelte';
 
-export type ThemePattern = 'waves' | 'geometric' | 'dots' | 'none';
+export type ThemePattern = 'snow' | 'none';
 
 export interface Theme {
 	name: string;
@@ -13,16 +13,8 @@ export const AVAILABLE_THEMES: Record<string, Theme> = {
 		pattern: 'none'
 	},
 	waves: {
-		name: 'Waves',
-		pattern: 'waves'
-	},
-	geometric: {
-		name: 'Geometric',
-		pattern: 'geometric'
-	},
-	dots: {
-		name: 'Dots',
-		pattern: 'dots'
+		name: 'Snow',
+		pattern: 'snow'
 	}
 };
 

src/routes/dashboard/+page.server.ts

@@ -85,7 +85,7 @@ export const actions: Actions = {
 		}
 
 		await db.update(wishlists)
-			.set({ isFavorite: !isFavorite })
+			.set({ isFavorite: !isFavorite, updatedAt: new Date() })
 			.where(eq(wishlists.id, wishlistId));
 
 		return { success: true };
@@ -171,7 +171,7 @@ export const actions: Actions = {
 		}
 
 		await db.update(users)
-			.set({ dashboardTheme: theme })
+			.set({ dashboardTheme: theme, updatedAt: new Date() })
 			.where(eq(users.id, session.user.id));
 
 		return { success: true };
@@ -187,7 +187,7 @@ export const actions: Actions = {
 		const color = formData.get('color') as string | null;
 
 		await db.update(users)
-			.set({ dashboardColor: color })
+			.set({ dashboardColor: color, updatedAt: new Date() })
 			.where(eq(users.id, session.user.id));
 
 		return { success: true };

src/routes/wishlist/[token]/+page.svelte

@@ -38,6 +38,7 @@
 	<Navigation
 		isAuthenticated={data.isAuthenticated}
 		showDashboardLink={true}
+		color={data.wishlist.color}
 	/>
 
 	<Card style={headerCardStyle}>
@@ -124,7 +125,7 @@
 			</Card>
 		{:else}
 			<Card style={headerCardStyle} class="relative overflow-hidden">
-				<ThemeCard themeName={data.wishlist.theme} color={data.wishlist.color} />
+				<ThemeCard themeName={data.wishlist.theme} color={data.wishlist.color} showPattern={false} />
 				<CardContent class="p-12 relative z-10">
 					<EmptyState
 						message={t.wishlist.emptyWishes}

src/routes/wishlist/[token]/edit/+page.svelte

@@ -123,6 +123,7 @@
 	<Navigation
 		isAuthenticated={data.isAuthenticated}
 		showDashboardLink={true}
+		color={currentColor}
 	/>
 
 	<WishlistHeader
@@ -155,7 +156,7 @@
 
 	{#if showAddForm}
 		<div bind:this={addFormElement}>
-			<AddItemForm onSuccess={handleItemAdded} />
+			<AddItemForm onSuccess={handleItemAdded} wishlistColor={currentColor} wishlistTheme={currentTheme} />
 		</div>
 	{/if}
 
@@ -169,6 +170,8 @@
 				currentPosition={items.findIndex(item => item.id === editingItem.id) + 1}
 				totalItems={items.length}
 				onPositionChange={handlePositionChange}
+				wishlistColor={currentColor}
+				wishlistTheme={currentTheme}
 			/>
 		</div>
 	{/if}

static/themes/dots/bgbottom.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52"><path fill="#000000" d="M0 17.83V0h17.83a3 3 0 0 1-5.66 2H5.9A5 5 0 0 1 2 5.9v6.27a3 3 0 0 1-2 5.66zm0 18.34a3 3 0 0 1 2 5.66v6.27A5 5 0 0 1 5.9 52h6.27a3 3 0 0 1 5.66 0H0V36.17zM36.17 52a3 3 0 0 1 5.66 0h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 0 1 0-5.66V52H36.17zM0 31.93v-9.78a5 5 0 0 1 3.8.72l4.43-4.43a3 3 0 1 1 1.42 1.41L5.2 24.28a5 5 0 0 1 0 5.52l4.44 4.43a3 3 0 1 1-1.42 1.42L3.8 31.2a5 5 0 0 1-3.8.72zm52-14.1a3 3 0 0 1 0-5.66V5.9A5 5 0 0 1 48.1 2h-6.27a3 3 0 0 1-5.66-2H52v17.83zm0 14.1a4.97 4.97 0 0 1-1.72-.72l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1 0-5.52l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43c.53-.35 1.12-.6 1.72-.72v9.78zM22.15 0h9.78a5 5 0 0 1-.72 3.8l4.44 4.43a3 3 0 1 1-1.42 1.42L29.8 5.2a5 5 0 0 1-5.52 0l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1-.72-3.8zm0 52c.13-.6.37-1.19.72-1.72l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43a5 5 0 0 1 5.52 0l4.43-4.43a3 3 0 1 1 1.42 1.41l-4.44 4.43c.36.53.6 1.12.72 1.72h-9.78zm9.75-24a5 5 0 0 1-3.9 3.9v6.27a3 3 0 1 1-2 0V31.9a5 5 0 0 1-3.9-3.9h-6.27a3 3 0 1 1 0-2h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 1 1 2 0v6.27a5 5 0 0 1 3.9 3.9h6.27a3 3 0 1 1 0 2H31.9z"></path></svg>

static/themes/dots/bgtop.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52"><path fill="#000000" d="M0 17.83V0h17.83a3 3 0 0 1-5.66 2H5.9A5 5 0 0 1 2 5.9v6.27a3 3 0 0 1-2 5.66zm0 18.34a3 3 0 0 1 2 5.66v6.27A5 5 0 0 1 5.9 52h6.27a3 3 0 0 1 5.66 0H0V36.17zM36.17 52a3 3 0 0 1 5.66 0h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 0 1 0-5.66V52H36.17zM0 31.93v-9.78a5 5 0 0 1 3.8.72l4.43-4.43a3 3 0 1 1 1.42 1.41L5.2 24.28a5 5 0 0 1 0 5.52l4.44 4.43a3 3 0 1 1-1.42 1.42L3.8 31.2a5 5 0 0 1-3.8.72zm52-14.1a3 3 0 0 1 0-5.66V5.9A5 5 0 0 1 48.1 2h-6.27a3 3 0 0 1-5.66-2H52v17.83zm0 14.1a4.97 4.97 0 0 1-1.72-.72l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1 0-5.52l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43c.53-.35 1.12-.6 1.72-.72v9.78zM22.15 0h9.78a5 5 0 0 1-.72 3.8l4.44 4.43a3 3 0 1 1-1.42 1.42L29.8 5.2a5 5 0 0 1-5.52 0l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1-.72-3.8zm0 52c.13-.6.37-1.19.72-1.72l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43a5 5 0 0 1 5.52 0l4.43-4.43a3 3 0 1 1 1.42 1.41l-4.44 4.43c.36.53.6 1.12.72 1.72h-9.78zm9.75-24a5 5 0 0 1-3.9 3.9v6.27a3 3 0 1 1-2 0V31.9a5 5 0 0 1-3.9-3.9h-6.27a3 3 0 1 1 0-2h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 1 1 2 0v6.27a5 5 0 0 1 3.9 3.9h6.27a3 3 0 1 1 0 2H31.9z"></path></svg>

static/themes/dots/item.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52"><path fill="#000000" d="M0 17.83V0h17.83a3 3 0 0 1-5.66 2H5.9A5 5 0 0 1 2 5.9v6.27a3 3 0 0 1-2 5.66zm0 18.34a3 3 0 0 1 2 5.66v6.27A5 5 0 0 1 5.9 52h6.27a3 3 0 0 1 5.66 0H0V36.17zM36.17 52a3 3 0 0 1 5.66 0h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 0 1 0-5.66V52H36.17zM0 31.93v-9.78a5 5 0 0 1 3.8.72l4.43-4.43a3 3 0 1 1 1.42 1.41L5.2 24.28a5 5 0 0 1 0 5.52l4.44 4.43a3 3 0 1 1-1.42 1.42L3.8 31.2a5 5 0 0 1-3.8.72zm52-14.1a3 3 0 0 1 0-5.66V5.9A5 5 0 0 1 48.1 2h-6.27a3 3 0 0 1-5.66-2H52v17.83zm0 14.1a4.97 4.97 0 0 1-1.72-.72l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1 0-5.52l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43c.53-.35 1.12-.6 1.72-.72v9.78zM22.15 0h9.78a5 5 0 0 1-.72 3.8l4.44 4.43a3 3 0 1 1-1.42 1.42L29.8 5.2a5 5 0 0 1-5.52 0l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1-.72-3.8zm0 52c.13-.6.37-1.19.72-1.72l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43a5 5 0 0 1 5.52 0l4.43-4.43a3 3 0 1 1 1.42 1.41l-4.44 4.43c.36.53.6 1.12.72 1.72h-9.78zm9.75-24a5 5 0 0 1-3.9 3.9v6.27a3 3 0 1 1-2 0V31.9a5 5 0 0 1-3.9-3.9h-6.27a3 3 0 1 1 0-2h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 1 1 2 0v6.27a5 5 0 0 1 3.9 3.9h6.27a3 3 0 1 1 0 2H31.9z"></path></svg>

static/themes/geometric/bgbottom.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52"><path fill="#000000" d="M0 17.83V0h17.83a3 3 0 0 1-5.66 2H5.9A5 5 0 0 1 2 5.9v6.27a3 3 0 0 1-2 5.66zm0 18.34a3 3 0 0 1 2 5.66v6.27A5 5 0 0 1 5.9 52h6.27a3 3 0 0 1 5.66 0H0V36.17zM36.17 52a3 3 0 0 1 5.66 0h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 0 1 0-5.66V52H36.17zM0 31.93v-9.78a5 5 0 0 1 3.8.72l4.43-4.43a3 3 0 1 1 1.42 1.41L5.2 24.28a5 5 0 0 1 0 5.52l4.44 4.43a3 3 0 1 1-1.42 1.42L3.8 31.2a5 5 0 0 1-3.8.72zm52-14.1a3 3 0 0 1 0-5.66V5.9A5 5 0 0 1 48.1 2h-6.27a3 3 0 0 1-5.66-2H52v17.83zm0 14.1a4.97 4.97 0 0 1-1.72-.72l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1 0-5.52l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43c.53-.35 1.12-.6 1.72-.72v9.78zM22.15 0h9.78a5 5 0 0 1-.72 3.8l4.44 4.43a3 3 0 1 1-1.42 1.42L29.8 5.2a5 5 0 0 1-5.52 0l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1-.72-3.8zm0 52c.13-.6.37-1.19.72-1.72l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43a5 5 0 0 1 5.52 0l4.43-4.43a3 3 0 1 1 1.42 1.41l-4.44 4.43c.36.53.6 1.12.72 1.72h-9.78zm9.75-24a5 5 0 0 1-3.9 3.9v6.27a3 3 0 1 1-2 0V31.9a5 5 0 0 1-3.9-3.9h-6.27a3 3 0 1 1 0-2h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 1 1 2 0v6.27a5 5 0 0 1 3.9 3.9h6.27a3 3 0 1 1 0 2H31.9z"></path></svg>

static/themes/geometric/bgtop.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52"><path fill="#000000" d="M0 17.83V0h17.83a3 3 0 0 1-5.66 2H5.9A5 5 0 0 1 2 5.9v6.27a3 3 0 0 1-2 5.66zm0 18.34a3 3 0 0 1 2 5.66v6.27A5 5 0 0 1 5.9 52h6.27a3 3 0 0 1 5.66 0H0V36.17zM36.17 52a3 3 0 0 1 5.66 0h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 0 1 0-5.66V52H36.17zM0 31.93v-9.78a5 5 0 0 1 3.8.72l4.43-4.43a3 3 0 1 1 1.42 1.41L5.2 24.28a5 5 0 0 1 0 5.52l4.44 4.43a3 3 0 1 1-1.42 1.42L3.8 31.2a5 5 0 0 1-3.8.72zm52-14.1a3 3 0 0 1 0-5.66V5.9A5 5 0 0 1 48.1 2h-6.27a3 3 0 0 1-5.66-2H52v17.83zm0 14.1a4.97 4.97 0 0 1-1.72-.72l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1 0-5.52l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43c.53-.35 1.12-.6 1.72-.72v9.78zM22.15 0h9.78a5 5 0 0 1-.72 3.8l4.44 4.43a3 3 0 1 1-1.42 1.42L29.8 5.2a5 5 0 0 1-5.52 0l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1-.72-3.8zm0 52c.13-.6.37-1.19.72-1.72l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43a5 5 0 0 1 5.52 0l4.43-4.43a3 3 0 1 1 1.42 1.41l-4.44 4.43c.36.53.6 1.12.72 1.72h-9.78zm9.75-24a5 5 0 0 1-3.9 3.9v6.27a3 3 0 1 1-2 0V31.9a5 5 0 0 1-3.9-3.9h-6.27a3 3 0 1 1 0-2h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 1 1 2 0v6.27a5 5 0 0 1 3.9 3.9h6.27a3 3 0 1 1 0 2H31.9z"></path></svg>

static/themes/geometric/item.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52"><path fill="#000000" d="M0 17.83V0h17.83a3 3 0 0 1-5.66 2H5.9A5 5 0 0 1 2 5.9v6.27a3 3 0 0 1-2 5.66zm0 18.34a3 3 0 0 1 2 5.66v6.27A5 5 0 0 1 5.9 52h6.27a3 3 0 0 1 5.66 0H0V36.17zM36.17 52a3 3 0 0 1 5.66 0h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 0 1 0-5.66V52H36.17zM0 31.93v-9.78a5 5 0 0 1 3.8.72l4.43-4.43a3 3 0 1 1 1.42 1.41L5.2 24.28a5 5 0 0 1 0 5.52l4.44 4.43a3 3 0 1 1-1.42 1.42L3.8 31.2a5 5 0 0 1-3.8.72zm52-14.1a3 3 0 0 1 0-5.66V5.9A5 5 0 0 1 48.1 2h-6.27a3 3 0 0 1-5.66-2H52v17.83zm0 14.1a4.97 4.97 0 0 1-1.72-.72l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1 0-5.52l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43c.53-.35 1.12-.6 1.72-.72v9.78zM22.15 0h9.78a5 5 0 0 1-.72 3.8l4.44 4.43a3 3 0 1 1-1.42 1.42L29.8 5.2a5 5 0 0 1-5.52 0l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1-.72-3.8zm0 52c.13-.6.37-1.19.72-1.72l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43a5 5 0 0 1 5.52 0l4.43-4.43a3 3 0 1 1 1.42 1.41l-4.44 4.43c.36.53.6 1.12.72 1.72h-9.78zm9.75-24a5 5 0 0 1-3.9 3.9v6.27a3 3 0 1 1-2 0V31.9a5 5 0 0 1-3.9-3.9h-6.27a3 3 0 1 1 0-2h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 1 1 2 0v6.27a5 5 0 0 1 3.9 3.9h6.27a3 3 0 1 1 0 2H31.9z"></path></svg>

static/themes/waves/bgbottom.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52"><path fill="#000000" d="M0 17.83V0h17.83a3 3 0 0 1-5.66 2H5.9A5 5 0 0 1 2 5.9v6.27a3 3 0 0 1-2 5.66zm0 18.34a3 3 0 0 1 2 5.66v6.27A5 5 0 0 1 5.9 52h6.27a3 3 0 0 1 5.66 0H0V36.17zM36.17 52a3 3 0 0 1 5.66 0h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 0 1 0-5.66V52H36.17zM0 31.93v-9.78a5 5 0 0 1 3.8.72l4.43-4.43a3 3 0 1 1 1.42 1.41L5.2 24.28a5 5 0 0 1 0 5.52l4.44 4.43a3 3 0 1 1-1.42 1.42L3.8 31.2a5 5 0 0 1-3.8.72zm52-14.1a3 3 0 0 1 0-5.66V5.9A5 5 0 0 1 48.1 2h-6.27a3 3 0 0 1-5.66-2H52v17.83zm0 14.1a4.97 4.97 0 0 1-1.72-.72l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1 0-5.52l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43c.53-.35 1.12-.6 1.72-.72v9.78zM22.15 0h9.78a5 5 0 0 1-.72 3.8l4.44 4.43a3 3 0 1 1-1.42 1.42L29.8 5.2a5 5 0 0 1-5.52 0l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1-.72-3.8zm0 52c.13-.6.37-1.19.72-1.72l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43a5 5 0 0 1 5.52 0l4.43-4.43a3 3 0 1 1 1.42 1.41l-4.44 4.43c.36.53.6 1.12.72 1.72h-9.78zm9.75-24a5 5 0 0 1-3.9 3.9v6.27a3 3 0 1 1-2 0V31.9a5 5 0 0 1-3.9-3.9h-6.27a3 3 0 1 1 0-2h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 1 1 2 0v6.27a5 5 0 0 1 3.9 3.9h6.27a3 3 0 1 1 0 2H31.9z"></path></svg>

static/themes/waves/bgtop.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52"><path fill="#000000" d="M0 17.83V0h17.83a3 3 0 0 1-5.66 2H5.9A5 5 0 0 1 2 5.9v6.27a3 3 0 0 1-2 5.66zm0 18.34a3 3 0 0 1 2 5.66v6.27A5 5 0 0 1 5.9 52h6.27a3 3 0 0 1 5.66 0H0V36.17zM36.17 52a3 3 0 0 1 5.66 0h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 0 1 0-5.66V52H36.17zM0 31.93v-9.78a5 5 0 0 1 3.8.72l4.43-4.43a3 3 0 1 1 1.42 1.41L5.2 24.28a5 5 0 0 1 0 5.52l4.44 4.43a3 3 0 1 1-1.42 1.42L3.8 31.2a5 5 0 0 1-3.8.72zm52-14.1a3 3 0 0 1 0-5.66V5.9A5 5 0 0 1 48.1 2h-6.27a3 3 0 0 1-5.66-2H52v17.83zm0 14.1a4.97 4.97 0 0 1-1.72-.72l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1 0-5.52l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43c.53-.35 1.12-.6 1.72-.72v9.78zM22.15 0h9.78a5 5 0 0 1-.72 3.8l4.44 4.43a3 3 0 1 1-1.42 1.42L29.8 5.2a5 5 0 0 1-5.52 0l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1-.72-3.8zm0 52c.13-.6.37-1.19.72-1.72l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43a5 5 0 0 1 5.52 0l4.43-4.43a3 3 0 1 1 1.42 1.41l-4.44 4.43c.36.53.6 1.12.72 1.72h-9.78zm9.75-24a5 5 0 0 1-3.9 3.9v6.27a3 3 0 1 1-2 0V31.9a5 5 0 0 1-3.9-3.9h-6.27a3 3 0 1 1 0-2h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 1 1 2 0v6.27a5 5 0 0 1 3.9 3.9h6.27a3 3 0 1 1 0 2H31.9z"></path></svg>

static/themes/waves/item.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52"><path fill="#000000" d="M0 17.83V0h17.83a3 3 0 0 1-5.66 2H5.9A5 5 0 0 1 2 5.9v6.27a3 3 0 0 1-2 5.66zm0 18.34a3 3 0 0 1 2 5.66v6.27A5 5 0 0 1 5.9 52h6.27a3 3 0 0 1 5.66 0H0V36.17zM36.17 52a3 3 0 0 1 5.66 0h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 0 1 0-5.66V52H36.17zM0 31.93v-9.78a5 5 0 0 1 3.8.72l4.43-4.43a3 3 0 1 1 1.42 1.41L5.2 24.28a5 5 0 0 1 0 5.52l4.44 4.43a3 3 0 1 1-1.42 1.42L3.8 31.2a5 5 0 0 1-3.8.72zm52-14.1a3 3 0 0 1 0-5.66V5.9A5 5 0 0 1 48.1 2h-6.27a3 3 0 0 1-5.66-2H52v17.83zm0 14.1a4.97 4.97 0 0 1-1.72-.72l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1 0-5.52l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43c.53-.35 1.12-.6 1.72-.72v9.78zM22.15 0h9.78a5 5 0 0 1-.72 3.8l4.44 4.43a3 3 0 1 1-1.42 1.42L29.8 5.2a5 5 0 0 1-5.52 0l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1-.72-3.8zm0 52c.13-.6.37-1.19.72-1.72l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43a5 5 0 0 1 5.52 0l4.43-4.43a3 3 0 1 1 1.42 1.41l-4.44 4.43c.36.53.6 1.12.72 1.72h-9.78zm9.75-24a5 5 0 0 1-3.9 3.9v6.27a3 3 0 1 1-2 0V31.9a5 5 0 0 1-3.9-3.9h-6.27a3 3 0 1 1 0-2h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 1 1 2 0v6.27a5 5 0 0 1 3.9 3.9h6.27a3 3 0 1 1 0 2H31.9z"></path></svg>