From 03f43d525e8b8fb1febbb9bdab3ca2a5d7cdfb30 Mon Sep 17 00:00:00 2001
From: keyboardreamer <bluetofuiscat@protonmail.com>
Date: Wed, 3 Jan 2024 21:21:27 +0800
Subject: [PATCH] feat: add more hover effects for better UX

---
 src/App.vue                        | 14 +++++++++-----
 src/components/FooterComponent.vue | 12 ++++++------
 src/components/NavBar.vue          | 30 +++++++++++++++++++++++-------
 src/components/VideoItem.vue       | 14 +++++++++++---
 4 files changed, 49 insertions(+), 21 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c157314b..e3319c1d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -206,7 +206,7 @@ b {
 }
 
 .btn {
-    @apply py-2 lt-md:px-2 md:px-4 rounded cursor-pointer inline-block;
+    @apply py-2 lt-md:px-2 md:px-4 rounded cursor-pointer inline-block hover:bg-gray-500 hover:text-white;
 }
 
 .reset {
@@ -238,8 +238,12 @@ b {
     @apply text-gray-400 bg-dark-400;
 }
 
+.dark .btn {
+    @apply hover:bg-dark-300;
+}
+
 .input {
-    @apply px-2.5;
+    @apply px-2.5 rounded-md;
 }
 
 .input:focus {
@@ -275,15 +279,15 @@ h2 {
 }
 
 .link {
-    @apply hover:(text-dark-300 underline underline-dark-300);
+    @apply focus:text-red-500 hover:text-red-500;
 }
 
 .link-secondary {
-    @apply hover:(text-dark-400 underline underline-dark-400);
+    @apply hover:text-dark-400 focus:text-dark-400 underline underline-dark-400;
 }
 
 .dark .link {
-    @apply hover:(text-gray-300 underline underline-gray-300);
+    @apply focus:text-red-400 hover:text-red-400;
 }
 
 .dark .link-secondary {
diff --git a/src/components/FooterComponent.vue b/src/components/FooterComponent.vue
index 7f9f711e..5701a06d 100644
--- a/src/components/FooterComponent.vue
+++ b/src/components/FooterComponent.vue
@@ -2,27 +2,27 @@
     <footer class="mt-10 w-full rounded-xl py-4 text-center children:(mx-3)">
         <a aria-label="GitHub" href="https://github.com/TeamPiped/Piped" target="_blank">
             <i class="i-fa6-brands:github" />
-            <span v-t="'actions.source_code'" class="ml-2" />
+            <span v-t="'actions.source_code'" class="ml-2 hover:underline" />
         </a>
         <a href="https://docs.piped.video/" target="_blank">
             <i class="i-fa6-solid:book" />
-            <span v-t="'actions.documentation'" class="ml-2" />
+            <span v-t="'actions.documentation'" class="ml-2 hover:underline" />
         </a>
         <a href="https://github.com/TeamPiped/Piped#donations" target="_blank">
             <i class="i-fa6-brands:bitcoin" />
-            <span v-t="'actions.donations'" class="ml-2" />
+            <span v-t="'actions.donations'" class="ml-2 hover:underline" />
         </a>
         <a v-if="statusPageHref" :href="statusPageHref">
             <i class="i-fa6-solid:server" />
-            <span v-t="'actions.status_page'" class="ml-2" />
+            <span v-t="'actions.status_page'" class="ml-2 hover:underline" />
         </a>
         <a v-if="donationHref" :href="donationHref">
             <i class="i-fa6-solid:money-check" />
-            <span v-t="'actions.instance_donations'" class="ml-2" />
+            <span v-t="'actions.instance_donations'" class="ml-2 hover:underline" />
         </a>
         <a v-if="privacyPolicyHref" :href="privacyPolicyHref" target="_blank">
             <i class="i-fa6-solid:eye" />
-            <span v-t="'actions.instance_privacy_policy'" class="ml-2" />
+            <span v-t="'actions.instance_privacy_policy'" class="ml-2 hover:underline" />
         </a>
     </footer>
 </template>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 0e7fc6ec..3802944a 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -39,25 +39,25 @@
         <!-- navigation bar for large screen devices -->
         <ul class="md:text-1xl hidden md:(flex flex flex-1 justify-end children:pl-3)">
             <li v-if="shouldShowTrending">
-                <router-link v-t="'titles.trending'" to="/trending" />
+                <router-link v-t="'titles.trending'" to="/trending" class="nav-link" />
             </li>
             <li>
-                <router-link v-t="'titles.preferences'" to="/preferences" />
+                <router-link v-t="'titles.preferences'" to="/preferences" class="nav-link" />
             </li>
             <li v-if="shouldShowLogin">
-                <router-link v-t="'titles.login'" to="/login" />
+                <router-link v-t="'titles.login'" to="/login" class="nav-link" />
             </li>
             <li v-if="shouldShowRegister">
-                <router-link v-t="'titles.register'" to="/register" />
+                <router-link v-t="'titles.register'" to="/register" class="nav-link" />
             </li>
             <li v-if="shouldShowHistory">
-                <router-link v-t="'titles.history'" to="/history" />
+                <router-link v-t="'titles.history'" to="/history" class="nav-link" />
             </li>
             <li>
-                <router-link v-t="'titles.playlists'" to="/playlists" />
+                <router-link v-t="'titles.playlists'" to="/playlists" class="nav-link" />
             </li>
             <li v-if="!shouldShowTrending">
-                <router-link v-t="'titles.feed'" to="/feed" />
+                <router-link v-t="'titles.feed'" to="/feed" class="nav-link" />
             </li>
         </ul>
     </nav>
@@ -233,6 +233,22 @@ export default {
     @apply mx-1;
 }
 
+#search-btn:hover {
+    @apply bg-red-400;
+}
+
+.dark #search-btn:hover {
+    @apply bg-dark-100;
+}
+
+.nav-link {
+    @apply hover:text-red-500;
+}
+
+.dark .nav-link {
+    @apply hover:text-red-400;
+}
+
 @media screen and (max-width: 848px) {
     #search-btn {
         display: none;
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index 49f73d80..816376d2 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:underline hover:underline"
+            class="inline-block w-full focus:text-red-400 hover:text-red-400"
             :to="{
                 path: '/watch',
                 query: {
@@ -15,7 +15,7 @@
             <div class="w-full">
                 <img
                     loading="lazy"
-                    class="aspect-video w-full object-contain"
+                    class="aspect-video w-full rounded-md object-contain"
                     :src="thumbnail"
                     :alt="title"
                     :class="{ 'shorts-img': item.isShort, 'opacity-75': item.watched }"
@@ -82,7 +82,7 @@
                     <i v-if="item.uploaderVerified" class="i-fa6-solid:check ml-1.5" />
                 </router-link>
 
-                <div v-if="item.views >= 0 || item.uploadedDate" class="mt-1 text-xs text-gray-300 font-normal">
+                <div v-if="item.views >= 0 || item.uploadedDate" class="video-info">
                     <span v-if="item.views >= 0">
                         <i class="i-fa6-solid:eye" />
                         <span class="pl-1" v-text="`${numberFormat(item.views)} •`" />
@@ -271,4 +271,12 @@ export default {
 .shorts-img {
     @apply w-full object-contain;
 }
+
+.video-info {
+    @apply mt-1 text-xs text-gray-600 font-normal;
+}
+
+.dark .video-info {
+    @apply text-gray-400;
+}
 </style>