style: gray out and disable login button when name is empty

flamingchickens1540 · Dec 10, 2024 · bb63470 · bb63470
1 parent 56fd1b7
commit bb63470
Showing 1 changed file with 7 additions and 8 deletions.
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -26,13 +26,12 @@
 			placeholder="Please enter your name here"
 			bind:value={inputname}
 		/>
-		{#if inputname != ''}
-			<button
-				class="text-l bg-grey rounded border-2 border-solid px-4 py-2 text-center text-white"
-				on:click={login}
-			>
-				Login
-			</button>
-		{/if}
+		<button
+			class="text-l rounded bg-gunmetal px-4 py-2 text-center
+            {inputname === '' ? 'pointer-events-none text-white/50' : ''}"
+			on:click={login}
+		>
+			Login
+		</button>
 	</div>
 </div>