From 948a187931ca4a79cac744c2d46f14941021121e Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Tue, 12 Jul 2022 23:43:52 +0200
Subject: [PATCH] updated contact

---
 .../sections/contacts/MailContact.vue         | 109 ++++++++++++++----
 .../sections/contacts/OtherContact.vue        |  11 +-
 2 files changed, 93 insertions(+), 27 deletions(-)

diff --git a/src/components/sections/contacts/MailContact.vue b/src/components/sections/contacts/MailContact.vue
index 545c4ca..336ca0e 100644
--- a/src/components/sections/contacts/MailContact.vue
+++ b/src/components/sections/contacts/MailContact.vue
@@ -19,32 +19,74 @@
       id="form-point"
       @submit="formSubmit"
     >
+      <label
+        class="label-info"
+        :class="{ 'label-error': isEmailError }"
+        for="email"
+      >
+        E-mail:
+      </label>
       <input
+        id="email"
         v-model="emailValue"
         class="contact_input"
         :class="{ 'contact_input-error': isEmailError }"
         type="text"
         name="email"
-        placeholder="Twój adres e-mail."
+        placeholder="przemek.kowalski@gmail.com"
       >
+      <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="Twoja wiadomość."
+        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="Twój podpis."
+        placeholder="np. Przemek Kowalski"
       >
+      <span
+        v-if="isSenderError"
+        class="error-message"
+      >
+        Podpis musi zawierać przynajmniej 3 znaki!
+      </span>
       <BaseButton
         is-reverse
-        :disabled="buttonDisabled"
+        :disabled="isButtonDisabled"
       >
         Wyślij
       </BaseButton>
@@ -54,7 +96,7 @@
 
 <script setup>
 import BaseButton from '../../buttons/BaseButton'
-import {ref, reactive, watch, computed} from 'vue'
+import { ref, reactive, watch, computed } from 'vue'
 
 function emailValidate (mailObj) {
   const mailFormat = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/
@@ -88,6 +130,7 @@ const errors = reactive({
   sender: false
 })
 
+const isButtonDisabled = computed(() => buttonDisabled.value || errors.email || errors.message || errors.sender)
 const isEmailError = computed(() => errors.email)
 const isMessageError = computed(() => errors.message)
 const isSenderError = computed(() => errors.sender)
@@ -184,17 +227,35 @@ function formSubmit(event) {
   font-weight: bold;
 }
 
-.contact_container input, .contact_container textarea {
-  width: 97%;
-  max-width: 97%;
-  border: 0;
-  border-bottom: 2px solid #c9c9c9;
-  padding: 10px 10px 8px;
-  font-size: 1em;
-  font-family: var(--font-family);
-  line-height: 1.3em;
-  margin-bottom: 10px;
-  border-radius: 5px;
+.contact_container {
+  .label-info {
+    width: 97%;
+    padding-bottom: 5px;
+    color: #7a7a7a;
+  }
+
+  .error-message {
+    width: 97%;
+    padding: 5px 0 10px;
+    color: #d44950;
+  }
+
+  input, textarea {
+    width: 97%;
+    max-width: 97%;
+    border: 0;
+    border-bottom: 2px solid #c9c9c9;
+    padding: 10px 10px 8px;
+    font-size: 1em;
+    font-family: var(--font-family);
+    line-height: 1.3em;
+    margin-bottom: 15px;
+    border-radius: 5px;
+  }
+}
+
+.contact_input::placeholder {
+  color: #bdbdbd;
 }
 
 .contact_input:focus, .contact_input:focus {
@@ -208,14 +269,14 @@ textarea.contact_input {
   min-height: 150px;
 }
 
-.contact_input-error, .contact_input-error {
-  background-color: #ffc3b0;
-  border-color: #ff865f;
-  color: #c90000;
+input.contact_input-error, textarea.contact_input-error {
+  border-color: #d44950;
+  color: #d44950;
+  margin-bottom: 0;
 }
 
 .contact_input-error::placeholder, .contact_input-error::placeholder {
-  color: #c9000094;
+  color: #d7626a;
 }
 
 input[disabled].contact_input {
@@ -242,8 +303,8 @@ input[disabled].contact_input {
 }
 
 .message_error {
-  background-color: #ffc3b0;
-  border: 1px solid #ff865f;
-  color: #c90000;
+  background-color: #f8d7da;
+  border: 1px solid #f5c6cb;
+  color: #721c24;
 }
 </style>
diff --git a/src/components/sections/contacts/OtherContact.vue b/src/components/sections/contacts/OtherContact.vue
index df5d080..6856559 100644
--- a/src/components/sections/contacts/OtherContact.vue
+++ b/src/components/sections/contacts/OtherContact.vue
@@ -7,6 +7,7 @@
       <img
         class="contact_element_icon"
         src="/assets/img/instagram.jpg"
+        alt="Instagram"
       >
       <span
         id="instagram"
@@ -23,6 +24,7 @@
       <img
         class="contact_element_icon"
         src="/assets/img/facebook.jpg"
+        alt="Facebook"
       >
       <span
         id="facebook"
@@ -39,6 +41,7 @@
       <img
         class="contact_element_icon"
         src="/assets/img/twitter.jpg"
+        alt="Twitter"
       >
       <span
         id="twitter"
@@ -55,6 +58,7 @@
       <img
         class="contact_element_icon"
         src="/assets/img/gg.png"
+        alt="Gadu-Gadu"
       >
       <span
         id="gg"
@@ -65,9 +69,10 @@
       <img
         class="contact_element_icon"
         src="/assets/img/user.jpg"
+        alt="E-mail"
       >
       <span
-        id="email"
+        id="mailto"
         class="contact_element_text"
       >
         <a href="mailto:contact@kamilcraft.com">Email: contact@kamilcraft.com</a>
@@ -141,7 +146,7 @@
   color: #5eaade;
 }
 
-#email {
+#mailto {
   color: #696969;
 }
 
@@ -150,7 +155,7 @@
 }
 
 @include media-tablet {
-  #instagram, #facebook, #twitter, #email, #gg {
+  #instagram, #facebook, #twitter, #mailto, #gg {
     font-size: 1em;
     line-height: 1.2em;
   }