feat: unify style and hover effects of channel, playlist and video items

TeamPiped · Jan 9, 2025 · 91a85ae · 91a85ae
1 parent 9079300
commit 91a85ae
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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: {