From 7a31a79d86b201f4deee5a6535d97432de2ee7eb Mon Sep 17 00:00:00 2001
From: sebastian2357 <80636200+sebastian2357@users.noreply.github.com>
Date: Tue, 18 Mar 2025 15:36:08 +0100
Subject: [PATCH] - fixed contact form (#295)

---
 docs/.vuepress/components/ContactForm.vue | 29 +++++++++++++----------
 docs/.vuepress/styles/index.scss          |  1 +
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/docs/.vuepress/components/ContactForm.vue b/docs/.vuepress/components/ContactForm.vue
index 245c699..14d408d 100644
--- a/docs/.vuepress/components/ContactForm.vue
+++ b/docs/.vuepress/components/ContactForm.vue
@@ -24,16 +24,16 @@
       </div>
 
       <h3 class="mb-4">Nachricht</h3>
-      <form class="space-y-4" @submit.prevent="handleSubmit">
-        <div v-if="submitSuccess" class="p-3 bg-green-100 text-green-700 rounded-md mb-4">
+      <form @submit.prevent="handleSubmit">
+        <div v-if="submitSuccess" class="my-4 p-3 bg-green-100 text-green-700 rounded-md mb-4">
           Deine Nachricht wurde erfolgreich gesendet. Vielen Dank!
         </div>
 
-        <div v-if="submitError" class="p-3 bg-red-100 text-red-700 rounded-md mb-4">
+        <div v-if="submitError" class="my-4 p-3 bg-red-100 text-red-700 rounded-md mb-4">
           {{ submitError }}
         </div>
 
-        <div>
+        <div class="my-4">
           <input
               type="text"
               id="name"
@@ -42,30 +42,30 @@
               required
               minlength="2"
               maxlength="35"
-              class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
+              class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:highlight focus:border-transparent"
           >
         </div>
-        <div>
+        <div class="my-4">
           <input
               type="email"
               id="email"
               v-model="form.email"
               placeholder="E-Mail"
               required
-              class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
+              class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:highlight focus:border-transparent"
           >
         </div>
-        <div>
+        <div class="my-4">
           <input
               type="tel"
               id="phone"
               v-model="form.phone"
               placeholder="Telefon"
               minlength="8"
-              class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
+              class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:highlight focus:border-transparent"
           >
         </div>
-        <div>
+        <div class="my-4">
           <textarea
               id="message"
               v-model="form.message"
@@ -73,14 +73,14 @@
               placeholder="Ihre Nachricht"
               required
               minlength="5"
-              class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
+              class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:highlight focus:border-transparent"
           ></textarea>
         </div>
-        <div class="flex justify-end">
+        <div class="my-4 flex justify-end">
           <button
               type="submit"
               :disabled="isSubmitting"
-              class="bg-green-700 text-white py-2 px-6 rounded-md hover:bg-green-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 disabled:bg-green-300 disabled:cursor-not-allowed"
+              class="bg-green-700 text-white py-2 px-6 rounded-md hover:bg-green-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:highlight focus:ring-offset-2 disabled:bg-green-300 disabled:cursor-not-allowed"
           >
             <span v-if="isSubmitting">Wird gesendet...</span>
             <span v-else>Nachricht senden</span>
@@ -155,4 +155,7 @@ const handleSubmit = async () => {
 .phone-number {
   color: var(--highlight-color);
 }
+.focus\:highlight:focus {
+  --tw-ring-color: var(--highlight-color);
+}
 </style>
\ No newline at end of file
diff --git a/docs/.vuepress/styles/index.scss b/docs/.vuepress/styles/index.scss
index 9c828c0..f9b8b88 100644
--- a/docs/.vuepress/styles/index.scss
+++ b/docs/.vuepress/styles/index.scss
@@ -9,6 +9,7 @@
   --highlight-color: #3894b3;
   --highlight-color-light: #a5e3f7;
 }
+
 h1, h2, h3, h4, h5, h6 {
   font-family: var(--font-family-heading);
 }