From 61b8ad6380ff640d0a6da67d7aeed758b2c8f9b3 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Mon, 25 Jul 2022 14:34:10 +0200
Subject: [PATCH] updated style for contact form

---
 .../sections/contacts/MailContact.vue         | 188 ++++++++----------
 .../sections/contacts/OtherContact.vue        |   2 +-
 src/views/ContactView.vue                     |  11 +-
 3 files changed, 92 insertions(+), 109 deletions(-)

diff --git a/src/components/sections/contacts/MailContact.vue b/src/components/sections/contacts/MailContact.vue
index 336ca0e..31d05e7 100644
--- a/src/components/sections/contacts/MailContact.vue
+++ b/src/components/sections/contacts/MailContact.vue
@@ -1,91 +1,95 @@
 <template>
-  <div class="contact_container">
-    <div
-      v-if="hasMessageError"
-      class="message message_error"
-    >
-      {{ messageError }}
-    </div>
-    <div
-      v-if="hasMessageOkStatus"
-      class="message message_ok"
-    >
-      {{ messageOk }}
-    </div>
-    <header class="container_head">
-      Formularz kontaktowy:
+  <div class="contact_container bg-neutral-100 rounded-md border border-gray-200 max-w-[500px] p-2 shadow">
+    <header class="mb-1.5">
+      <h3 class="text-xl">
+        Formularz kontaktowy
+      </h3>
     </header>
     <form
-      id="form-point"
+      class="flex flex-col gap-3 justify-start items-start"
       @submit="formSubmit"
     >
-      <label
-        class="label-info"
-        :class="{ 'label-error': isEmailError }"
-        for="email"
+      <div
+        v-if="hasMessageError"
+        class="w-full p-2 bg-red-200 text-red-500 text-sm border border-red-300 rounded-md"
       >
-        E-mail:
-      </label>
-      <input
-        id="email"
-        v-model="emailValue"
-        class="contact_input"
-        :class="{ 'contact_input-error': isEmailError }"
-        type="text"
-        name="email"
-        placeholder="przemek.kowalski@gmail.com"
+        {{ messageError }}
+      </div>
+      <div
+        v-else-if="hasMessageOkStatus"
+        class="w-full p-2 bg-[#27ae60] text-white text-sm border border-lime-600 rounded-md shadow"
       >
-      <span
-        v-if="isEmailError"
-        class="error-message"
-      >
-        E-mail musi być poprawny, np. przemek.kowalski@gmail.com
-      </span>
-      <label
-        class="label-info"
-        :class="{ 'label-error': isMessageError }"
-        for="message"
-      >
-        Wiadomość:
-      </label>
-      <textarea
-        id="message"
-        v-model="messageValue"
-        class="contact_input"
-        :class="{ 'contact_input-error': isMessageError }"
-        name="message"
-        placeholder="Chciałbym zlecić wykonanie strony..."
-      />
-      <span
-        v-if="isMessageError"
-        class="error-message"
-      >
-        Wiadomość musi zawierać przynajmniej 3 znaki!
-      </span>
-      <label
-        class="label-info"
-        :class="{ 'label-error': isSenderError }"
-        for="sender"
-      >
-        Podpis nadawcy:
-      </label>
-      <input
-        id="sender"
-        v-model="senderValue"
-        class="contact_input"
-        :class="{ 'contact_input-error': isSenderError }"
-        type="text"
-        name="sender"
-        placeholder="np. Przemek Kowalski"
-      >
-      <span
-        v-if="isSenderError"
-        class="error-message"
-      >
-        Podpis musi zawierać przynajmniej 3 znaki!
-      </span>
+        {{ messageOk }}
+      </div>
+      <div class="flex flex-col gap-1 w-full">
+        <label
+          class="text-gray-500"
+          for="message"
+        >
+          W czym mogę pomóc?
+        </label>
+        <textarea
+          id="message"
+          v-model="messageValue"
+          class="w-full max-w-full min-h-[150px] px-2.5 py-2 border-b-2 border-neutral-300 rounded-md focus:border-neutral-400 hover:border-neutral-500 outline-none"
+          :class="[ isMessageError ? 'border-red-400 text-red-400 placeholder-red-300' : 'text-gray-900 placeholder-gray-400' ]"
+          name="message"
+          placeholder="Chciałbym zlecić wykonanie strony..."
+        />
+        <span
+          v-if="isMessageError"
+        >
+          Wiadomość musi zawierać przynajmniej 3 znaki!
+        </span>
+      </div>
+      <div class="flex flex-col gap-1 w-full">
+        <label
+          class="text-gray-500"
+          for="email"
+        >
+          Jak mam się skontaktować?
+        </label>
+        <input
+          id="email"
+          v-model="emailValue"
+          class="w-full px-2.5 py-2 border-b-2 border-neutral-300 rounded-md focus:border-neutral-400 hover:border-neutral-500 outline-none"
+          :class="[ isEmailError ? 'border-red-400 text-red-400 placeholder-red-300' : 'text-gray-900 placeholder-gray-400' ]"
+          type="text"
+          name="email"
+          placeholder="Twój adres e-mail"
+        >
+        <span
+          v-if="isEmailError"
+          class="error-message"
+        >
+          E-mail musi być poprawny, np. przemek.kowalski@gmail.com
+        </span>
+      </div>
+      <div class="flex flex-col gap-1 w-full">
+        <label
+          class="text-gray-500"
+          for="sender"
+        >
+          Podpis
+        </label>
+        <input
+          id="sender"
+          v-model="senderValue"
+          class="w-full px-2.5 py-2 border-b-2 border-neutral-300 rounded-md focus:border-neutral-400 hover:border-neutral-500 outline-none"
+          :class="[ isSenderError ? 'border-red-400 text-red-400 placeholder-red-300' : 'text-gray-900 placeholder-gray-400' ]"
+          type="text"
+          name="sender"
+        >
+        <span
+          v-if="isSenderError"
+          class="error-message"
+        >
+          Podpis musi zawierać przynajmniej 3 znaki!
+        </span>
+      </div>
       <BaseButton
         is-reverse
+        class="py-1 w-full"
         :disabled="isButtonDisabled"
       >
         Wyślij
@@ -207,32 +211,14 @@ function formSubmit(event) {
 
 .contact_container {
   flex-basis: 500px;
-
-  #form-point {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .btn {
-    width: 97%;
-    margin: 0 20px 5px;
-  }
-}
-
-.container_head {
-  padding: 10px;
-  line-height: 1.6em;
-  font-size: 1.3em;
-  font-weight: bold;
 }
 
 .contact_container {
-  .label-info {
+  /* .label-info {
     width: 97%;
     padding-bottom: 5px;
     color: #7a7a7a;
-  }
+  } */
 
   .error-message {
     width: 97%;
@@ -240,7 +226,7 @@ function formSubmit(event) {
     color: #d44950;
   }
 
-  input, textarea {
+  /* input, textarea {
     width: 97%;
     max-width: 97%;
     border: 0;
@@ -251,7 +237,7 @@ function formSubmit(event) {
     line-height: 1.3em;
     margin-bottom: 15px;
     border-radius: 5px;
-  }
+  } */
 }
 
 .contact_input::placeholder {
diff --git a/src/components/sections/contacts/OtherContact.vue b/src/components/sections/contacts/OtherContact.vue
index 6856559..94e5d6c 100644
--- a/src/components/sections/contacts/OtherContact.vue
+++ b/src/components/sections/contacts/OtherContact.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="contact_info">
+  <div class="contact_info bg-neutral-100 rounded-md border border-gray-200 max-w-[500px] shadow">
     <header class="info_head">
       Inne formy kontaktu:
     </header>
diff --git a/src/views/ContactView.vue b/src/views/ContactView.vue
index 10b9b31..99d9bc9 100644
--- a/src/views/ContactView.vue
+++ b/src/views/ContactView.vue
@@ -1,6 +1,6 @@
 <template>
-  <section class="contact">
-    <div class="container">
+  <section class="py-6">
+    <div class="flex items-start justify-center mx-auto gap-5">
       <MailContact />
       <OtherContact />
     </div>
@@ -29,7 +29,7 @@ onMounted(() => {
 <style lang="scss">
 @import "scss/media";
 
-.contact {
+/* .contact {
   padding: 25px 0;
 
   .container {
@@ -41,9 +41,6 @@ onMounted(() => {
   .contact_container, .contact_info {
     margin: 10px;
     max-width: 500px;
-    background-color: #eaeaea;
-    border: 2px solid #dadada;
-    border-radius: 2px;
     box-shadow: 0 0 5px rgba(0, 0, 0, .2);
   }
 
@@ -69,5 +66,5 @@ onMounted(() => {
       }
     }
   }
-}
+} */
 </style>