update: more visual consistency

src/lib/components/ui/ColorPicker.svelte

@@ -45,12 +45,13 @@
 			{color}
 			{size}
 			aria-label="Clear color"
+			rounded="md"
 		>
 			<X class={iconSize} />
 		</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

@@ -3,6 +3,7 @@
 	import { scale } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
 	import type { Snippet } from 'svelte';
+    import IconButton from './IconButton.svelte';
 
 	let {
 		items,
@@ -79,16 +80,16 @@
 </script>
 
 <div class="relative dropdown-menu">
-	<Button
+	<IconButton
-		variant="outline"
+		size="sm"
-		size="icon"
+		rounded="md"
 		onclick={toggleMenu}
 		aria-label={ariaLabel}
 		class={color ? 'hover-themed' : ''}
 		style={color ? `--hover-bg: ${color}20;` : ''}
 	>
 		{@render icon()}
-	</Button>
+	</IconButton>
 
 	{#if showMenu}
 		<div

src/lib/components/ui/IconButton.svelte

@@ -30,14 +30,14 @@
 		lg: 'rounded-lg'
 	};
 
-	const baseClasses = 'flex items-center justify-center border border-input transition-colors';
+	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}"
+	class="{baseClasses} {sizeClass} {roundedClass} {className} backdrop-blur-sm"
 	class:hover:bg-accent={!color}
 	style={color ? `--hover-bg: ${color}20;` : ''}
 	{...restProps}

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

@@ -1,6 +1,5 @@
 <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';
 
@@ -17,7 +16,7 @@
 	}
 </script>
 
-<IconButton onclick={toggle} {size} {color}>
+<IconButton onclick={toggle} {size} {color} rounded="md">
 	{#if themeStore.current === 'light'}
 		<Sun size={20} />
 		<span class="sr-only">Light mode (click for dark)</span>

src/lib/components/wishlist/WishlistHeader.svelte

@@ -81,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}
@@ -140,10 +139,8 @@
 	</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>
@@ -188,7 +185,6 @@
 			{/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">