fix: little usability changes

fcastrovilli · Mar 13, 2024 · c71bcb4 · c71bcb4
1 parent 8b53ca0
commit c71bcb4
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 11 deletions.
diff --git a/src/lib/frequency.svelte b/src/lib/frequency.svelte
@@ -10,7 +10,8 @@
 	};
 </script>
 
-<label for="frequency">Frequency</label>
+<label for="frequency" class="font-semibold text-slate-400">Frequency</label>
+<p class="h1 text-center">{frequencyValue} Hz</p>
 <input
 	type="range"
 	on:input={updateFrequency}
@@ -20,5 +21,3 @@
 	max={10000}
 	step={1}
 />
-
-<p class="h1 text-center">{frequencyValue} Hz</p>
diff --git a/src/lib/voice.svelte b/src/lib/voice.svelte
@@ -30,14 +30,17 @@
 
 <div class="card variant-ghost p-4 w-full flex flex-col h-full mx-auto justify-center items-center">
 	{#if osc}
-		<slot>Voice</slot>
-		<button on:click={toggleOsc} type="button" class="btn btn-icon variant-ghost uppercase">
-			<img src={icon} alt="" />
-		</button>
-
+		<div class="flex justify-center items-center w-full gap-4">
+			<button on:click={toggleOsc} type="button" class="btn btn-icon variant-ghost uppercase">
+				<img src={icon} alt="" />
+			</button>
+			<slot>Voice</slot>
+		</div>
 		{#if osc.state === 'started'}
-			<div class="space-y-2 w-full">
+			<div class="space-y-2 w-full py-2">
+				<hr />
 				<Volume {osc} bind:volume />
+				<hr />
 				<Frequency {osc} bind:frequencyValue={frequency} />
 			</div>
 		{/if}

diff --git a/src/lib/volume.svelte b/src/lib/volume.svelte
@@ -9,7 +9,8 @@
 	};
 </script>
 
-<label for="volume">Volume</label>
+<label for="volume" class="font-semibold text-slate-400">Volume</label>
+<p class="h1 text-center">{volume} dB</p>
 <input
 	type="range"
 	on:input={updateVolume}
@@ -19,4 +20,3 @@
 	max={-3}
 	step={0.1}
 />
-<p class="h1 text-center">{volume} dB</p>