From 8d00447dff7dfe3695a9e4589e3635768bedceaa Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Thu, 9 Jan 2025 13:27:08 +0100
Subject: [PATCH] feat: unify style and hover effects of channel, playlist and
 video items

---
 src/components/ChannelItem.vue  |  4 ++--
 src/components/PlaylistItem.vue | 11 ++++-------
 src/components/VideoItem.vue    |  2 +-
 3 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/components/ChannelItem.vue b/src/components/ChannelItem.vue
index 68c25fd1..d48e5f4f 100644
--- a/src/components/ChannelItem.vue
+++ b/src/components/ChannelItem.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="flex flex-col flex-justify-between">
-        <router-link :to="item.url">
+        <router-link :to="item.url" class="link font-bold">
             <div class="my-4 flex justify-center">
                 <img loading="lazy" class="aspect-square w-[50%] rounded-full" :src="item.thumbnail" />
             </div>
@@ -9,7 +9,7 @@
                 <i v-if="item.verified" class="i-fa6-solid:check ml-1.5" />
             </p>
         </router-link>
-        <p v-if="item.description" v-text="item.description" />
+        <p v-if="item.description" class="pt-1 text-sm" v-text="item.description" />
         <router-link v-if="item.uploaderUrl" class="link" :to="item.uploaderUrl">
             <p>
                 <span v-text="item.uploader" />
diff --git a/src/components/PlaylistItem.vue b/src/components/PlaylistItem.vue
index 9278e883..6254fcc2 100644
--- a/src/components/PlaylistItem.vue
+++ b/src/components/PlaylistItem.vue
@@ -1,17 +1,14 @@
 <template>
     <div class="flex flex-col flex-justify-between">
-        <router-link :to="props.item.url">
+        <router-link :to="props.item.url" class="link inline-block">
             <div class="relative">
                 <img loading="lazy" class="w-full" :src="props.item.thumbnail" />
             </div>
-            <p>
-                <span v-text="props.item.name" />
-                <i v-if="props.item.verified" class="i-fa6-solid:check ml-1.5" />
-            </p>
+            <p class="link pt-2 font-bold" :title="props.item.name" v-text="props.item.name" />
         </router-link>
         <p v-if="props.item.description" v-text="props.item.description" />
 
-        <router-link v-if="props.item.uploaderUrl" class="link" :to="props.item.uploaderUrl">
+        <router-link v-if="props.item.uploaderUrl" class="link-secondary text-sm" :to="props.item.uploaderUrl">
             <p>
                 <span v-text="props.item.uploaderName" />
                 <i v-if="props.item.uploaderVerified" class="i-fa6-solid:check ml-1.5" />
@@ -21,7 +18,7 @@
 
         <template v-if="props.item.videos >= 0">
             <br v-if="props.item.uploaderName" />
-            <strong v-text="`${props.item.videos} ${$t('video.videos')}`" />
+            <span class="text-sm" v-text="`${props.item.videos} ${$t('video.videos')}`" />
         </template>
 
         <br />
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index 816376d2..5313b9c3 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -1,7 +1,7 @@
 <template>
     <div v-if="showVideo" class="flex flex-col flex-justify-between">
         <router-link
-            class="inline-block w-full focus:text-red-400 hover:text-red-400"
+            class="link inline-block w-full"
             :to="{
                 path: '/watch',
                 query: {