updated buttons

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;
 

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({

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);

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();

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()

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()
 

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) {