fix: icons

Author: fcastrovilli

src/lib/synth.svelte

@@ -15,8 +15,8 @@
 	{#each Array(voices) as _}
 		<Voice />
 	{/each}
-	<div class="card variant-soft-secondary">
-		<button class="btn btn-primary" on:click={() => (voices += 1)}>Add Voice</button>
-		<!-- <button class="btn btn-secondary" on:click={() => voices -= 1}>Remove Voice</button> -->
-	</div>
+	<button class="py-4 card variant-soft-secondary w-full" on:click={() => (voices += 1)}
+		>Add Voice</button
+	>
+	<!-- <button class="btn btn-secondary" on:click={() => voices -= 1}>Remove Voice</button> -->
 </div>

src/lib/voice.svelte

@@ -9,8 +9,7 @@
 
 	let osc: Tone.Oscillator | undefined = undefined;
 
-	$: status = '⏹';
-	// $: status = osc?.state == 'started' ? '⏹' : '▶';
+	$: status = osc?.state == 'started' ? '/stop.svg' : '/play.svg';
 
 	onMount(() => {
 		if (osc) return;
@@ -23,14 +22,15 @@
 	const toggleOsc = () => {
 		if (!osc) return;
 		osc.state === 'started' ? osc.stop() : osc.start();
-		status = osc.state === 'started' ? '⏹' : '▶';
+		status = osc.state === 'started' ? '/stop.svg' : '/play.svg';
 	};
 </script>
 
 <div class="card variant-ghost p-4 w-full flex flex-col h-full mx-auto justify-center items-center">
 	{#if osc}
+		<p>Voice</p>
 		<button on:click={toggleOsc} type="button" class="btn btn-icon variant-ghost uppercase">
-			{status}
+			<img src={status} alt="" />
 		</button>
 
 		{#if osc.state === 'started'}

src/routes/+page.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <div class="p-4 w-full space-y-4">
-	<button class="btn variant-ghost w-full" on:click={() => (start = !start)}
+	<button class="btn variant-soft-primary w-full" on:click={() => (start = !start)}
 		>{start ? 'Stop' : 'Start'}</button
 	>
 	{#if start}