ui: optimize reward author style

_config.yml

@@ -153,6 +153,7 @@ post:
     enable: false        # Option values: true | false
     img_link:            # Image link for the payment QR code
     text:                # Custom reward text, Can be null
+    icon:                # Custom reward icon, Can be null
 
 
 # ---------------------------------------------------------------------------------------

layout/_partial/post/reward-author.ejs

@@ -1,10 +1,13 @@
+<%
+const { img_link, text, icon } = theme?.post?.reward || {}
+%>
+
 <div class="reward-author-container border-box flex-center">
-    <div class="reward-btn keep-button border-box flex-center tooltip tooltip-img"
-            data-tooltip-content="<%= theme?.post?.reward?.text ||  __('post.reward') %>"
-            data-tooltip-img-url="<%= theme?.post?.reward?.img_link %>"
+    <div class="reward-btn border-box flex-center tooltip tooltip-img"
+            data-tooltip-img-url="<%= img_link %>"
             data-tooltip-img-trigger="click"
-            data-tooltip-img-style="top: -8px;"
+            data-tooltip-img-style="top: -6px;"
     >
-        <i class="fa-solid fa-hand-holding-heart"></i>
+        <i class="<%= icon || 'fa-solid fa-gift' %>"></i>&nbsp;<%= (text ||  __('post.reward')).toUpperCase() %>
     </div>
 </div>

source/css/layout/_partial/post/reward-author.styl

@@ -1,22 +1,34 @@
 .reward-author-container {
-  margin-top 2rem
+  margin-top 1.6rem
 
   .tooltip-img {
     .tooltip-img-box {
       img {
-        max-height 12rem
+        max-height 13rem
       }
     }
   }
 
 
   .reward-btn {
-    width 3rem
-    height 3rem
-    border-radius 50%
+    padding 0.6rem 1rem
+    color var(--text-color-3)
+    font-size 1rem
+    background -webkit-linear-gradient(0deg, var(--keep-primary-color) 15%, var(--keep-danger-color), var(--keep-warning-color), var(--keep-success-color), var(--keep-primary-color))
+    -webkit-background-clip text
+    background-clip text
+    border-radius 0.8rem
+    box-shadow 0 0 0.4rem var(--shadow-color)
+    cursor pointer
+
+    &:hover {
+      font-weight bold
+      -webkit-text-fill-color transparent
+    }
+
 
     i {
-      font-size 1.2rem
+      color var(--text-color-3)
     }
   }
 }