From 8f3649d141b8bf7693b755caa8805d9b5c4438a6 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <kamilniemczycki@gmail.com>
Date: Thu, 6 Jan 2022 00:53:37 +0100
Subject: [PATCH] Style update to contact page

---
 .../sections/contacts/MailContact.vue         | 125 +++++++++---------
 .../sections/contacts/OtherContact.vue        | 119 ++++++++++-------
 src/views/Contact.vue                         |  61 +++++----
 3 files changed, 166 insertions(+), 139 deletions(-)

diff --git a/src/components/sections/contacts/MailContact.vue b/src/components/sections/contacts/MailContact.vue
index b8d7c7c..af69137 100644
--- a/src/components/sections/contacts/MailContact.vue
+++ b/src/components/sections/contacts/MailContact.vue
@@ -1,17 +1,19 @@
 <template>
-  <div class="contact-container" style="flex-basis: 500px;">
-    <div class="message-status"></div>
-    <header class="head">Formularz kontaktowy:</header>
+  <div class="contact_container">
+    <div class="message"></div>
+    <header class="container_head">Formularz kontaktowy:</header>
     <form id="form-point" @submit="formSubmit">
-      <input v-model="emailValue" class="contact-input" type="text" name="email" placeholder="Twój adres e-mail." />
-      <textarea v-model="messageValue" class="contact-input" name="message" placeholder="Twoja wiadomość."></textarea>
-      <input v-model="senderValue" class="contact-input" type="text" name="sender" placeholder="Twój podpis." />
-      <input :disabled="buttonDisabled" class="contact-input" type="submit" value="Wyślij"/>
+      <input v-model="emailValue" class="contact_input" type="text" name="email" placeholder="Twój adres e-mail." />
+      <textarea v-model="messageValue" class="contact_input" name="message" placeholder="Twoja wiadomość."></textarea>
+      <input v-model="senderValue" class="contact_input" type="text" name="sender" placeholder="Twój podpis." />
+      <base-btn is-reverse :disabled="buttonDisabled">Wyślij</base-btn>
     </form>
   </div>
 </template>
 
 <script>
+import BaseButton from '../../BaseButton'
+
 function emailValidate (mailObj) {
   const mailFormat = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/
   return !!mailObj.value.match(mailFormat)
@@ -43,41 +45,44 @@ export default {
       senderValue: ''
     }
   },
+  components: {
+    'base-btn': BaseButton
+  },
   watch: {
     emailValue (value) {
       if (this.statusError > 0 && emailValidate(this.email)) {
-        this.email.classList.remove('error')
+        this.email.classList.remove('contact_input-error')
       }
     },
     messageValue (value) {
       if (this.statusError > 0 && value !== '') {
-        this.message.classList.remove('error')
+        this.message.classList.remove('contact_input-error')
       }
     },
     senderValue (value) {
       if (this.statusError > 0 && value !== '') {
-        this.sender.classList.remove('error')
+        this.sender.classList.remove('contact_input-error')
       }
     }
   },
   methods: {
     clearErrors () {
       this.statusError = 0
-      this.email.classList.remove('error')
-      this.message.classList.remove('error')
-      this.sender.classList.remove('error')
+      this.email.classList.remove('contact_input-error')
+      this.message.classList.remove('contact_input-error')
+      this.sender.classList.remove('contact_input-error')
     },
     checkForm () {
       if (!emailValidate(this.email)) {
-        this.email.classList.add('error')
+        this.email.classList.add('contact_input-error')
         this.statusError++
       }
       if (this.message.value === '') {
-        this.message.classList.add('error')
+        this.message.classList.add('contact_input-error')
         this.statusError++
       }
       if (this.sender.value === '') {
-        this.sender.classList.add('error')
+        this.sender.classList.add('contact_input-error')
         this.statusError++
       }
     },
@@ -91,8 +96,8 @@ export default {
       this.clearErrors()
       this.checkForm()
 
-      const messageElement = document.querySelector('.message-status')
-      messageElement.classList.remove('message-status__ok', 'message-status__error')
+      const messageElement = document.querySelector('.message')
+      messageElement.classList.remove('message_ok', 'message_error')
 
       if (this.statusError === 0) {
         this.buttonDisabled = true
@@ -102,7 +107,7 @@ export default {
           sender: this.senderValue
         }).then(result => {
           messageElement.classList.add(
-            result.error ? 'message-status__error' : 'message-status__ok'
+            result.error ? 'message_error' : 'message_ok'
           )
 
           messageElement.textContent = result.message
@@ -113,7 +118,7 @@ export default {
           }
           this.buttonDisabled = false
         }).catch(() => {
-          messageElement.classList.add('message-status__error')
+          messageElement.classList.add('message_error')
           messageElement.textContent = 'Wystąpił błąd podczas wysyłania wiadomości. Proszę spróbować później.'
           this.buttonDisabled = false
         })
@@ -124,29 +129,33 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.contact-container {
-  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);
+@import "scss/media";
 
-  header.head {
-    padding: 10px;
-    line-height: 1.6em;
-    font-size: 1.3em;
-    font-weight: bold;
-  }
+.contact_container {
+  flex-basis: 500px;
 
-  form#form-point {
+  #form-point {
     display: flex;
     flex-direction: column;
     align-items: center;
   }
+
+  .btn {
+    width: 97%;
+    margin: 0 20px 5px;
+  }
 }
-.contact-container input, .contact-container textarea {
+
+.container_head {
+  padding: 10px;
+  line-height: 1.6em;
+  font-size: 1.3em;
+  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;
@@ -156,64 +165,54 @@ export default {
   margin-bottom: 10px;
   border-radius: 5px;
 }
-input.contact-input:focus, textarea.contact-input:focus {
+
+.contact_input:focus, .contact_input:focus {
   outline: none;
   border-color: black;
 }
-textarea.contact-input {
+
+textarea.contact_input {
   max-width: 97%;
   min-width: 97%;
   min-height: 150px;
 }
-input.error, textarea.error {
+
+.contact_input-error, .contact_input-error {
   background-color: #ffc3b0;
   border-color: #ff865f;
   color: #c90000;
 }
-input.error::placeholder, textarea.error::placeholder {
+
+.contact_input-error::placeholder, .contact_input-error::placeholder {
   color: #c9000094;
 }
-input[type="submit"].contact-input {
-  appearance: unset;
-  color: white;
-  background-color: #4CAF50;
-  border-bottom: 2px solid #387d3b;
-}
-input[type="submit"].contact-input:hover {
-  box-shadow: 0 0 8px rgba(0,0,0,.4);
-}
-input[disabled].contact-input {
+
+input[disabled].contact_input {
   background-color: #cdcdcd;
   border-color: gray;
   color: black;
 }
-.message-status {
+
+.message {
   display: none;
   margin: 5px;
   padding: 8px;
   border-radius: 5px;
 }
-.message-status__ok, .message-status__error {
+
+.message_ok, .message_error {
   display: block;
 }
-.message-status__ok {
+
+.message_ok {
   background-color: #4CAF50;
   border: 1px solid #387d3b;
   color: white;
 }
-.message-status__error {
+
+.message_error {
   background-color: #ffc3b0;
   border: 1px solid #ff865f;
   color: #c90000;
 }
-@media screen and (max-width: 800px) {
-  .contact-elements {
-    display: block;
-    width: auto;
-  }
-  #instagram, #facebook, #twitter, #email, #gg {
-    font-size: 1em;
-    line-height: 1.2em;
-  }
-}
 </style>
diff --git a/src/components/sections/contacts/OtherContact.vue b/src/components/sections/contacts/OtherContact.vue
index 0753162..d603bb1 100644
--- a/src/components/sections/contacts/OtherContact.vue
+++ b/src/components/sections/contacts/OtherContact.vue
@@ -1,25 +1,43 @@
 <template>
-  <div class="contact-container" style="flex-basis: 410px">
-    <header class="head">Inne formy kontaktu:</header>
-    <div class="contact-element">
-      <img class="contact-element-icon" src="/assets/img/instagram.jpg" />
-      <span id="instagram"><a href="https://www.instagram.com/nikcamii/" target="_blank">Instagram: @NiKCamii</a></span>
+  <div class="contact_info">
+    <header class="info_head">Inne formy kontaktu:</header>
+    <div class="contact_element">
+      <img class="contact_element_icon"
+           src="/assets/img/instagram.jpg" />
+      <span id="instagram" class="contact_element_text">
+        <a href="https://www.instagram.com/nikcamii/"
+           target="_blank"
+           rel="noopener nofollow noreferrer">Instagram: @NiKCamii</a>
+      </span>
     </div>
-    <div class="contact-element">
-      <img class="contact-element-icon" src="/assets/img/facebook.jpg" />
-      <span id="facebook"><a href="https://www.facebook.com/nikcamii/" target="_blank">Facebook: @NiKCamii</a></span>
+    <div class="contact_element">
+      <img class="contact_element_icon" src="/assets/img/facebook.jpg" />
+      <span id="facebook" class="contact_element_text">
+        <a href="https://www.facebook.com/nikcamii/"
+           target="_blank"
+           rel="noopener nofollow noreferrer">Facebook: @NiKCamii</a>
+      </span>
     </div>
-    <div class="contact-element">
-      <img class="contact-element-icon" src="/assets/img/twitter.jpg" />
-      <span id="twitter"><a href="https://twitter.com/nikcamii" target="_blank">Twitter: @NiKCamii</a></span>
+    <div class="contact_element">
+      <img class="contact_element_icon"
+           src="/assets/img/twitter.jpg" />
+      <span id="twitter" class="contact_element_text">
+        <a href="https://twitter.com/nikcamii"
+           target="_blank"
+           rel="noopener nofollow noreferrer">Twitter: @NiKCamii</a>
+      </span>
     </div>
-    <div class="contact-element">
-      <img class="contact-element-icon" src="/assets/img/gg.png" />
-      <span id="gg">GG: 38429969</span>
+    <div class="contact_element">
+      <img class="contact_element_icon"
+           src="/assets/img/gg.png" />
+      <span id="gg" class="contact_element_text">GG: 38429969</span>
     </div>
-    <div class="contact-element">
-      <img class="contact-element-icon" src="/assets/img/user.jpg" />
-      <span id="email"><a href="mailto:contact@kamilcraft.com">Email: contact@kamilcraft.com</a></span>
+    <div class="contact_element">
+      <img class="contact_element_icon"
+           src="/assets/img/user.jpg" />
+      <span id="email" class="contact_element_text">
+        <a href="mailto:contact@kamilcraft.com">Email: contact@kamilcraft.com</a>
+      </span>
     </div>
   </div>
 </template>
@@ -31,28 +49,20 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.contact-container {
-  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);
+@import "scss/media";
 
-  header.head {
-    padding: 10px;
-    line-height: 1.6em;
-    font-size: 1.3em;
-    font-weight: bold;
-  }
-
-  form#form-point {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
+.contact_info {
+  flex-basis: 410px;
 }
-.contact-element {
+
+.info_head {
+  padding: 10px;
+  line-height: 1.6em;
+  font-size: 1.3em;
+  font-weight: bold;
+}
+
+.contact_element {
   display: flex;
   align-items: center;
   padding: 5px;
@@ -71,22 +81,22 @@ export default {
       text-decoration: underline;
     }
   }
-}
 
-.contact-element-icon {
-  border-radius: 50%;
-  border: 1px solid #e2e2e2;
-  width: 50px;
-  height: 50px;
-  margin-right: 10px;
-  object-fit: contain;
-}
+  &_icon {
+    border-radius: 50%;
+    border: 1px solid #e2e2e2;
+    width: 50px;
+    height: 50px;
+    margin-right: 10px;
+    object-fit: contain;
+  }
 
-#instagram, #facebook, #twitter, #email, #gg {
-  padding-top: 2px;
-  line-height: 1.6em;
-  font-size: 1.1em;
-  font-weight: bold;
+  &_text{
+    padding-top: 2px;
+    line-height: 1.6em;
+    font-size: 1.1em;
+    font-weight: bold;
+  }
 }
 
 #instagram {
@@ -110,4 +120,11 @@ export default {
 #gg {
   color: #ffa214;
 }
+
+@include media-tablet {
+  #instagram, #facebook, #twitter, #email, #gg {
+    font-size: 1em;
+    line-height: 1.2em;
+  }
+}
 </style>
diff --git a/src/views/Contact.vue b/src/views/Contact.vue
index b843789..6f14137 100644
--- a/src/views/Contact.vue
+++ b/src/views/Contact.vue
@@ -28,36 +28,47 @@ export default {
 </script>
 
 <style lang="scss">
-  .contact {
-    padding: 25px 0;
+@import "scss/media";
 
+.contact {
+  padding: 25px 0;
+
+  .container {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+  }
+
+  .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);
+  }
+
+  @include media-tablet {
     .container {
-      display: flex;
-      align-items: flex-start;
-      justify-content: center;
-    }
+      display: block;
+      margin: 0 auto;
 
-    @media screen and (max-width: 940px) {
-      .container {
-        display: block;
-        margin: 0 auto;
-
-        .contact-container {
-          margin: 0 auto 25px;
-          &:last-child {
-            margin-bottom: 0;
-          }
-        }
-      }
-    }
-    @media screen and (max-width: 640px) {
-      .container {
-        padding: 0 10px;
-
-        .contact-container {
-          max-width: unset;
+      .contact_container, .contact_info {
+        margin: 0 auto 25px;
+        &:last-child {
+          margin-bottom: 0;
         }
       }
     }
   }
+  @include media-mobile {
+    .container {
+      padding: 0 10px;
+
+      .contact_container {
+        max-width: unset;
+      }
+    }
+  }
+}
 </style>