form improvements

pull/2/head
Midnight 3 years ago
parent 1f66e1ce63
commit faf92bcfba

@ -3,8 +3,8 @@
import { variables } from "$lib/helpers/variables"; import { variables } from "$lib/helpers/variables";
let email; let email = "";
let message; let message = "";
let notify; let notify;
function send() { function send() {
@ -45,7 +45,7 @@
id="email" id="email"
name="email" name="email"
type="text" type="text"
class="text-lg py-1 px-2 rounded-lg shadow" class="text-lg py-1 px-2 rounded-lg shadow dark:bg-gray-600"
bind:value={email} bind:value={email}
/> />
</div> </div>
@ -57,19 +57,31 @@
<textarea <textarea
id="message" id="message"
name="message" name="message"
class="text-lg py-1 px-2 rounded-lg shadow" class="text-lg py-1 px-2 rounded-lg shadow dark:bg-gray-600"
bind:value={message} bind:value={message}
rows="5" rows="5"
/> />
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
<button {#if email != "" && message != ""}
type="submit" <button
on:click={send} type="submit"
class="bg-white py-2 px-3 rounded-lg font-bold shadow" on:click={send}
>Send</button class="bg-white dark:bg-black py-2 px-3 rounded-lg font-bold shadow button"
> >Send</button
>
{:else}
<button
disabled
type="none"
on:click={send}
title="Fill in the fields before submitting"
class="bg-white dark:bg-black bg-opacity-50 dark:bg-opacity-50 py-2 px-3 rounded-lg font-bold shadow text-gray-400"
>
Send
</button>
{/if}
</div> </div>
{#if notify} {#if notify}
@ -80,16 +92,16 @@
</main> </main>
<style> <style>
button { .button {
transition-duration: 0.3s; transition-duration: 0.3s;
} }
button:hover { .button:hover {
transition-duration: 0.3s; transition-duration: 0.3s;
transform: translateY(-5px); transform: translateY(-2px);
} }
button:active { .button:active {
transition-duration: 0.3s; transition-duration: 0.3s;
transform: translateY(5px); transform: translateY(5px);
} }

Loading…
Cancel
Save