Fireworks

components/Button.tsx

@@ -8,7 +8,7 @@ export function Button(
 		<button
 			{...props}
 			disabled={!IS_BROWSER || disabled}
-			class={`px-2 py-1 bg-gray-500/20 rounded hover:bg-gray-500/25 cursor-pointer transition-colors ${className}`}
+			class={`flex items-center justify-center gap-1 px-2 py-1 bg-gray-500/20 rounded hover:bg-gray-500/25 cursor-pointer transition-colors ${className}`}
 		/>
 	)
 }

islands/Dashboard.tsx

@@ -93,6 +93,7 @@ export default function Dashboard(
 	}, [])
 
 	useEffect(() => {
+		const fireworks = new Audio('/fireworks.mp3')
 		const count = 200,
 			defaults = {
 				origin: { y: 0.7 },
@@ -104,6 +105,7 @@ export default function Dashboard(
 			decay?: number
 			scalar?: number
 		}) {
+			fireworks.play()
 			confetti(
 				Object.assign({}, defaults, opts, {
 					particleCount: Math.floor(count * particleRatio),

islands/TodoList.tsx

@@ -2,7 +2,14 @@ import { Todo, UserWithTodos } from '@homeman/models.ts'
 import { JSX } from 'preact'
 import { Button } from '@homeman/components/Button.tsx'
 import { Avatar } from '@homeman/components/Avatar.tsx'
-import { ChevronDownMiniSolid, TrashSolid } from 'preact-heroicons'
+import {
+	CheckBadgeSolid,
+	CheckCircleMiniSolid,
+	CheckCircleSolid,
+	CheckMiniSolid,
+	ChevronDownMiniSolid,
+	TrashSolid,
+} from 'preact-heroicons'
 
 export interface Props {
 	user: UserWithTodos
@@ -33,7 +40,7 @@ export function TodoList(
 			<footer class='flex gap-2'>
 				{(virtual || doneAt != null) ? '' : (
 					<Button
-						className='grow'
+						className='bg-emerald-500/50 grow'
 						onClick={async () => {
 							await fetch('/api/todo/done', {
 								method: 'PUT',
@@ -41,7 +48,7 @@ export function TodoList(
 							})
 						}}
 					>
-						Done
+						<CheckMiniSolid class='w-5 h-5' /> Done
 					</Button>
 				)}
 				{(!virtual && doneAt != null)