From 34499f0c927ce8fea3705dc2f0f0e6805cabda43 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Tue, 21 Mar 2023 08:59:17 +0800
Subject: [PATCH] perf(ui): improve hover effect of trending tags

---
 _includes/trending-tags.html |  6 ++----
 _sass/addon/commons.scss     | 25 +++++++++----------------
 _sass/layout/post.scss       | 10 ++++++++++
 3 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/_includes/trending-tags.html b/_includes/trending-tags.html
index a36108cbce4..131480bb20b 100644
--- a/_includes/trending-tags.html
+++ b/_includes/trending-tags.html
@@ -1,6 +1,4 @@
-{% comment %}
-  The trending tags list
-{% endcomment %}
+<!-- The trending tags list -->
 
 {% assign MAX = 10 %}
 
@@ -41,7 +39,7 @@
     <div class="d-flex flex-wrap mt-3 mb-1 mr-3">
       {% for tag_name in trending_tags %}
         {% assign url = tag_name | slugify | url_encode | prepend: '/tags/' | append: '/' %}
-        <a class="post-tag" href="{{ url | relative_url }}">{{ tag_name }}</a>
+        <a class="post-tag btn btn-outline-primary" href="{{ url | relative_url }}">{{ tag_name }}</a>
       {% endfor %}
     </div>
   </div>
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index 151ce626c71..8aba040e710 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -260,20 +260,15 @@ i {
   }
 
   .post-tag {
-    display: inline-block;
-    line-height: 1rem;
+    line-height: 1.05rem;
     font-size: 0.85rem;
-    background: none;
     border: 1px solid var(--btn-border-color);
     border-radius: 0.8rem;
     padding: 0.3rem 0.5rem;
     margin: 0 0.35rem 0.5rem 0;
 
     &:hover {
-      background-color: #2a408e;
-      border-color: #2a408e;
-      color: #ffffff;
-      transition: none;
+      transition: all 0.3s ease-in;
     }
   }
 
@@ -522,7 +517,6 @@ i {
   display: inline-block;
   min-width: 2rem;
   text-align: center;
-  background: var(--tag-bg);
   border-radius: 0.3rem;
   padding: 0 0.4rem;
   color: inherit;
@@ -531,14 +525,6 @@ i {
   &:not(:last-child) {
     margin-right: 0.2rem;
   }
-
-  &:hover {
-    @extend %tag-hover;
-
-    border-bottom: none;
-    text-decoration: none;
-    color: #d2603a;
-  }
 }
 
 .rounded-10 {
@@ -678,6 +664,13 @@ i {
   text-align: left;
 }
 
+/* Overwrite bootstrap outline button */
+.btn.btn-outline-primary {
+  &:hover {
+    border-color: #007bff !important;
+  }
+}
+
 .disabled {
   color: rgb(206, 196, 196);
   pointer-events: auto;
diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss
index ea6ecfc479c..e4cd2cfa571 100644
--- a/_sass/layout/post.scss
+++ b/_sass/layout/post.scss
@@ -155,6 +155,16 @@ h1 + .post-meta {
 
 .post-tags {
   line-height: 2rem;
+
+  .post-tag {
+    background: var(--tag-bg);
+
+    &:hover {
+      @extend %link-hover;
+      @extend %tag-hover;
+      @extend %no-bottom-border;
+    }
+  }
 }
 
 .post-navigation {