refactor(app): replace <i> with <em> for icons and add alt attribute …

…to logo image

- Replace <i> tags with <em> tags for better semantic HTML in Tools.vue and TopMenubar.vue
- Add alt attribute to logo image in TopMenubar.vue for accessibility

packages/app/src/components/Tools.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="w-full h-8 flex flex-row justify-center items-center border">
     <div class="w-8 h-8 flex items-center justify-center">
-      <i class="fa fa-backward hover:text-[#41B883] text-[#35495E] justify-center" />
+      <em class="fa fa-backward hover:text-[#41B883] text-[#35495E] justify-center" />
     </div>
     <div class="w-8 h-8 flex items-center justify-center">
-      <i class="fa fa-pause hover:text-[#41B883] text-[#35495E] justify-center" />
+      <em class="fa fa-pause hover:text-[#41B883] text-[#35495E] justify-center" />
     </div>
     <div class="w-8 h-8 flex items-center justify-center">
-      <i class="fa fa-forward hover:text-[#41B883] text-[#35495E] justify-center" />
+      <em class="fa fa-forward hover:text-[#41B883] text-[#35495E] justify-center" />
     </div>
   </div>
 </template>

packages/app/src/components/TopMenubar.vue

@@ -9,7 +9,7 @@ const help = ref(false)
 <template>
   <div class="w-full h-10 border flex flex-row select-none">
     <div class="flex flex-row">
-      <img src="../assets/logo.svg" class="w-10 h-10 p-1 mr-5">
+      <img src="../assets/logo.svg" class="w-10 h-10 p-1 mr-5" alt="logo">
     </div>
     <div class="h-full w-16 hover:bg-gray-300" @mouseleave="options = false" @mouseenter="options = true">
       <span class="font-mono text-sm h-full flex items-center justify-center">Options</span>
@@ -35,14 +35,14 @@ const help = ref(false)
       <div v-if="help" class="absolute bg-white border top-10 w-40 rounded-md">
         <a href="https://github.com/Bug-Duck/vuemotion">
           <div class="hover:bg-gray-300 h-8 w-full">
-            <span class="font-mono text-sm h-full flex items-center justify-center"><i
+            <span class="font-mono text-sm h-full flex items-center justify-center"><em
               class="fa fa-github mx-1"
             />GitHub</span>
           </div>
         </a>
         <a href="https://vuemotion.dev">
           <div class="hover:bg-gray-300 h-8 w-full">
-            <span class="font-mono text-sm h-full flex items-center justify-center"><i
+            <span class="font-mono text-sm h-full flex items-center justify-center"><em
               class="fa fa-book mx-1"
             />Docs</span>
           </div>
@@ -59,7 +59,7 @@ const help = ref(false)
         </a>
         <a href="mailto:[email protected]">
           <div class="hover:bg-gray-300 h-8 w-full">
-            <span class="font-mono text-sm h-full flex items-center justify-center"><i
+            <span class="font-mono text-sm h-full flex items-center justify-center"><em
               class="fa fa-envelope mx-1"
             />Contact
               us</span>