Kim/fe 183 (#245)

* add flex-none to episode image

* change transcript button to a link

* deepsource fix

assets/scss/global.scss

@@ -312,6 +312,12 @@ section {
     @include blue-button();
   }
 }
+.p-button:hover,
+.p-button:enabled:hover {
+  background: var(--black500);
+  border-color: transparent;
+  color: var(--primary-color);
+}
 
 // style-mode over rides
 

components/EpisodeHead.vue

@@ -73,7 +73,7 @@ onMounted(() => {
       flat-quality
       :max-width="episode['image-main'].w"
       :max-height="episode['image-main'].h"
-      class="episode-image"
+      class="episode-image flex-none"
     />
 
     <div class="episode-content">

components/EpisodeTools.vue

@@ -22,8 +22,6 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['toggleTranscript'])
-
 const toastConfig = ref(toastGlobalConfig())
 
 const dotsMenu = ref()
@@ -147,16 +145,6 @@ const toggleShare = (event) => {
     event_label: 'Share Menu',
   })
 }
-
-// toggle function for toggle transcript emit
-const toggleTranscript = () => {
-  emit('toggleTranscript')
-  $analytics.sendEvent('click_tracking', {
-    event_category: 'Click Tracking',
-    component: 'Episode Tools',
-    event_label: 'Transcript',
-  })
-}
 </script>
 
 <template>
@@ -168,13 +156,13 @@ const toggleTranscript = () => {
           menu-class="episode-tools-play-selector"
         />
       </client-only>
-      <Button
+      <nuxt-link
         v-if="!!props.episode['transcript'] && !props.isTranscript"
-        class="p-button-sm p-button-rounded"
-        label="Transcript"
-        @click="toggleTranscript"
-        aria-label="Transcript"
-      ></Button>
+        :to="`/podcast/${episode?.slug}/transcript`"
+        class="p-button p-component p-button-sm p-button-rounded no-underline"
+      >
+        Transcript
+      </nuxt-link>
       <Button
         icon="pi pi-share-alt"
         class="p-button-rounded p-button-sm wh40"