Skip to content

Commit

Permalink
dark mode fixes #3
Browse files Browse the repository at this point in the history
  • Loading branch information
@surjithctly
surjithctly committed Aug 21, 2023
1 parent 5acdfd4 commit a1656be
Show file tree
Hide file tree
Showing 5 changed files with 67 additions and 56 deletions.
95 changes: 48 additions & 47 deletions src/components/contactform.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import Button from "@components/ui/button.astro";
type="text"
placeholder="Full Name"
required
class="w-full px-4 py-3 border-2 placeholder:text-gray-800 rounded-md outline-none focus:ring-4 border-gray-300 focus:border-gray-600 ring-gray-100"
class="w-full px-4 py-3 border-2 placeholder:text-gray-800 dark:text-white rounded-md outline-none dark:placeholder:text-gray-200 dark:bg-gray-900 focus:ring-4 border-gray-300 focus:border-gray-600 ring-gray-100 dark:border-gray-600 dark:focus:border-white dark:ring-0"
name="name"
/>
<div class="empty-feedback invalid-feedback text-red-400 text-sm mt-1">
Expand All @@ -32,7 +32,7 @@ import Button from "@components/ui/button.astro";
placeholder="Email Address"
name="email"
required
class="w-full px-4 py-3 border-2 placeholder:text-gray-800 rounded-md outline-none focus:ring-4 border-gray-300 focus:border-gray-600 ring-gray-100"
class="w-full px-4 py-3 border-2 placeholder:text-gray-800 dark:text-white rounded-md outline-none dark:placeholder:text-gray-200 dark:bg-gray-900 focus:ring-4 border-gray-300 focus:border-gray-600 ring-gray-100 dark:border-gray-600 dark:focus:border-white dark:ring-0"
/>
<div class="empty-feedback text-red-400 text-sm mt-1">
Please provide your email address.
Expand All @@ -46,7 +46,7 @@ import Button from "@components/ui/button.astro";
name="message"
required
placeholder="Your Message"
class="w-full px-4 py-3 border-2 placeholder:text-gray-800 rounded-md outline-none h-36 focus:ring-4 border-gray-300 focus:border-gray-600 ring-gray-100"
class="w-full px-4 py-3 border-2 placeholder:text-gray-800 dark:text-white dark:placeholder:text-gray-200 dark:bg-gray-900 rounded-md outline-none h-36 focus:ring-4 border-gray-300 focus:border-gray-600 ring-gray-100 dark:border-gray-600 dark:focus:border-white dark:ring-0"
></textarea>
<div class="empty-feedback invalid-feedback text-red-400 text-sm mt-1">
Please enter your message.
Expand All @@ -71,57 +71,58 @@ import Button from "@components/ui/button.astro";
}

.is-invalid,
.was-validated :invalid {
.was-validated :invalid,
.was-validated :invalid:focus {
border-color: #dc3545;
}
</style>

<script is:inline>
const form = document.getElementById("form");
const result = document.getElementById("result");
const form = document.getElementById("form");
const result = document.getElementById("result");

form.addEventListener("submit", function (e) {
e.preventDefault();
form.classList.add("was-validated");
if (!form.checkValidity()) {
form.querySelectorAll(":invalid")[0].focus();
return;
}
const formData = new FormData(form);
const object = Object.fromEntries(formData);
const json = JSON.stringify(object);
form.addEventListener("submit", function (e) {
e.preventDefault();
form.classList.add("was-validated");
if (!form.checkValidity()) {
form.querySelectorAll(":invalid")[0].focus();
return;
}
const formData = new FormData(form);
const object = Object.fromEntries(formData);
const json = JSON.stringify(object);

result.innerHTML = "Sending...";
result.innerHTML = "Sending...";

fetch("https://api.web3forms.com/submit", {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
body: json,
fetch("https://api.web3forms.com/submit", {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
body: json,
})
.then(async (response) => {
let json = await response.json();
if (response.status == 200) {
result.classList.add("text-green-500");
result.innerHTML = json.message;
} else {
console.log(response);
result.classList.add("text-red-500");
result.innerHTML = json.message;
}
})
.catch((error) => {
console.log(error);
result.innerHTML = "Something went wrong!";
})
.then(async (response) => {
let json = await response.json();
if (response.status == 200) {
result.classList.add("text-green-500");
result.innerHTML = json.message;
} else {
console.log(response);
result.classList.add("text-red-500");
result.innerHTML = json.message;
}
})
.catch((error) => {
console.log(error);
result.innerHTML = "Something went wrong!";
})
.then(function () {
form.reset();
form.classList.remove("was-validated");
setTimeout(() => {
result.style.display = "none";
}, 5000);
});
});
.then(function () {
form.reset();
form.classList.remove("was-validated");
setTimeout(() => {
result.style.display = "none";
}, 5000);
});
});
</script>
2 changes: 1 addition & 1 deletion src/components/pagetitle.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const { align = "center" } = Astro.props;
class="text-3xl font-semibold tracking-tight text-center lg:leading-snug text-brand-primary lg:text-4xl dark:text-white">
<slot name="title">Title</slot>
</h1>
<p class="text-lg mt-3 text-gray-600">
<p class="text-lg mt-3 text-gray-600 dark:text-gray-400">
<slot name="desc">Some description goes here</slot>
</p>
</div>
3 changes: 2 additions & 1 deletion src/components/ui/button.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@ const sizes = {
const styles = {
outline: "border-2 border-black hover:bg-black text-black hover:text-white",
primary: "bg-black text-white hover:bg-gray-900 border-2 border-transparent",
primary:
"bg-black text-white hover:bg-gray-900 border-2 border-transparent dark:bg-white dark:text-black",
};
---

Expand Down
7 changes: 5 additions & 2 deletions src/pages/about.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,15 +30,18 @@ import Link from "@components/ui/link.astro";
</div>

<div class="mt-4 text-center">
<h3 class="text-sm text-gray-500"> {item.name}</h3>
<h3 class="text-sm text-gray-500 dark:text-gray-300">
{" "}
{item.name}
</h3>
</div>
</div>
))
}
</div>

<div class="mx-auto max-w-xl text-center mt-14">
<p class="text-lg leading-relaxed text-gray-600">
<p class="text-lg leading-relaxed text-gray-600 dark:text-gray-400">
We're a multi-cultural team from around the world! We come from diverse
backgrounds, bringing different personalities, experiences and skills to
the job. This is what makes our team so special.
Expand Down
16 changes: 11 additions & 5 deletions src/pages/contact.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,20 +15,26 @@ import Pagetitle from "@components/pagetitle.astro";

<div class="grid md:grid-cols-2 gap-10 mx-auto max-w-4xl mt-16">
<div>
<h2 class="font-medium text-2xl text-gray-800">Contact Stablo</h2>
<p class="text-lg leading-relaxed text-gray-500 mt-3">
<h2 class="font-medium text-2xl text-gray-800 dark:text-gray-200">
Contact Stablo
</h2>
<p
class="text-lg leading-relaxed text-gray-500 dark:text-gray-400 mt-3">
Have something to say? We are here to help. Fill up the form or send
email or call phone.
</p>
<div class="mt-5">
<div class="flex items-center mt-2 space-x-2 text-gray-600">
<div
class="flex items-center mt-2 space-x-2 text-gray-600 dark:text-gray-300">
<Icon class="text-gray-400 w-4 h-4" name="uil:map-marker" />
<span>1734 Sanfransico, CA 93063</span>
</div><div class="flex items-center mt-2 space-x-2 text-gray-600">
</div><div
class="flex items-center mt-2 space-x-2 text-gray-600 dark:text-gray-300">
<Icon class="text-gray-400 w-4 h-4" name="uil:envelope" /><a
href="mailto:hello@stablotemplate.com">hello@stablotemplate.com</a
>
</div><div class="flex items-center mt-2 space-x-2 text-gray-600">
</div><div
class="flex items-center mt-2 space-x-2 text-gray-600 dark:text-gray-300">
<Icon class="text-gray-400 w-4 h-4" name="uil:phone" /><a
href="tel:+1 (987) 4587 899">+1 (987) 4587 899</a
>
Expand Down

1 comment on commit a1656be

@vercel
Copy link

@vercel vercel bot commented on a1656be Aug 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

stablo-astro – ./

stablo-astro-git-main-web3templates.vercel.app
stablo-astro-web3templates.vercel.app
stablo-astro.web3templates.com
stablo-astro.vercel.app

Please sign in to comment.