From dc7d6773a91d27fcb2e332e2705ae00365705ae8 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Tue, 12 Jul 2022 23:20:31 +0200
Subject: [PATCH] updated buttons

---
 scss/_btn.scss                                   | 8 ++++++--
 src/components/SelectedProjects.vue              | 2 +-
 src/components/{ => buttons}/BaseButton.vue      | 5 +++--
 src/components/{ => buttons}/GhostButton.vue     | 4 ++--
 src/components/sections/AboutSection.vue         | 7 +++++--
 src/components/sections/FavoriteProjects.vue     | 2 +-
 src/components/sections/contacts/MailContact.vue | 2 +-
 7 files changed, 19 insertions(+), 11 deletions(-)
 rename src/components/{ => buttons}/BaseButton.vue (88%)
 rename src/components/{ => buttons}/GhostButton.vue (89%)

diff --git a/scss/_btn.scss b/scss/_btn.scss
index 5c08389..d8d79b3 100644
--- a/scss/_btn.scss
+++ b/scss/_btn.scss
@@ -35,7 +35,11 @@ $btn-colors: (
   font-size: 1.05em;
   color: map-get($colors, font);
 
-  &:hover {
+  &[disabled] {
+    opacity: .7;
+  }
+
+  &:hover:not([disabled]) {
     $hovers: map-get($colors, hover);
     background-color: map-get($hovers, bg);
     color: map-get($hovers, font);
@@ -83,7 +87,7 @@ $btn-colors: (
   font-size: 1.2em;
   border: unset;
 
-  &:hover {
+  &:hover:not([disabled]) {
     background-color: $default-color;
     color: $dark-gray;
 
diff --git a/src/components/SelectedProjects.vue b/src/components/SelectedProjects.vue
index 262f2f2..21b2483 100644
--- a/src/components/SelectedProjects.vue
+++ b/src/components/SelectedProjects.vue
@@ -51,7 +51,7 @@
 import { defineProps, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useStore } from 'vuex'
-import BaseButton from './BaseButton'
+import BaseButton from './buttons/BaseButton'
 import { marked } from 'marked'
 
 defineProps({
diff --git a/src/components/BaseButton.vue b/src/components/buttons/BaseButton.vue
similarity index 88%
rename from src/components/BaseButton.vue
rename to src/components/buttons/BaseButton.vue
index 5de3cf1..de10d05 100644
--- a/src/components/BaseButton.vue
+++ b/src/components/buttons/BaseButton.vue
@@ -2,13 +2,14 @@
   <button
     class="btn"
     :class="{ 'btn-reverse': isReverse }"
+    title="Wyślij wiadomość"
   >
     <font-awesome-icon
       v-if="hasIcon && icon"
       class="icon"
       :icon="icon"
     />
-    <span><slot /></span>
+    <slot />
   </button>
 </template>
 
@@ -32,7 +33,7 @@ defineProps({
 </script>
 
 <style lang="scss" scoped>
-@import "scss/_btn";
+@import "../../../scss/btn";
 
 .btn {
   @include button($has-icon: true);
diff --git a/src/components/GhostButton.vue b/src/components/buttons/GhostButton.vue
similarity index 89%
rename from src/components/GhostButton.vue
rename to src/components/buttons/GhostButton.vue
index 43c36e9..f3899b5 100644
--- a/src/components/GhostButton.vue
+++ b/src/components/buttons/GhostButton.vue
@@ -5,7 +5,7 @@
       class="icon"
       :icon="icon"
     />
-    <span><slot /></span>
+    <slot />
   </button>
 </template>
 
@@ -25,7 +25,7 @@ defineProps({
 </script>
 
 <style lang="scss" scoped>
-@import "scss/btn";
+@import "../../../scss/btn";
 
 .btn {
   @include ghost-button();
diff --git a/src/components/sections/AboutSection.vue b/src/components/sections/AboutSection.vue
index 7c702f0..e1195af 100644
--- a/src/components/sections/AboutSection.vue
+++ b/src/components/sections/AboutSection.vue
@@ -33,7 +33,10 @@
         </div>
         <div id="grid-photo">
           <figure id="about-photo">
-            <img :src="`${publicPath}assets/me.jpg`">
+            <img
+              :src="`${publicPath}assets/me.jpg`"
+              alt="Moje zdjęcie"
+            >
           </figure>
         </div>
       </div>
@@ -42,7 +45,7 @@
 </template>
 
 <script setup>
-import BaseButton from '../BaseButton'
+import BaseButton from '../buttons/BaseButton'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
diff --git a/src/components/sections/FavoriteProjects.vue b/src/components/sections/FavoriteProjects.vue
index cfeac4e..b9139cb 100644
--- a/src/components/sections/FavoriteProjects.vue
+++ b/src/components/sections/FavoriteProjects.vue
@@ -18,7 +18,7 @@
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import Projects from '../SelectedProjects'
-import GhostButton from '../GhostButton'
+import GhostButton from '../buttons/GhostButton'
 
 const router = useRouter()
 
diff --git a/src/components/sections/contacts/MailContact.vue b/src/components/sections/contacts/MailContact.vue
index 0247fd7..545c4ca 100644
--- a/src/components/sections/contacts/MailContact.vue
+++ b/src/components/sections/contacts/MailContact.vue
@@ -53,7 +53,7 @@
 </template>
 
 <script setup>
-import BaseButton from '../../BaseButton'
+import BaseButton from '../../buttons/BaseButton'
 import {ref, reactive, watch, computed} from 'vue'
 
 function emailValidate (mailObj) {