From 12d9215a4ab42c9631df45e8100c0c012f40ed4e Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Fri, 12 Jul 2024 17:25:01 +0800
Subject: [PATCH] ui: optimize reward author style

---
 _config.yml                                   |  1 +
 layout/_partial/post/reward-author.ejs        | 13 ++++++----
 .../layout/_partial/post/reward-author.styl   | 24 ++++++++++++++-----
 3 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/_config.yml b/_config.yml
index fd40a0926..ca705f1b2 100644
--- a/_config.yml
+++ b/_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
 
 
 # ---------------------------------------------------------------------------------------
diff --git a/layout/_partial/post/reward-author.ejs b/layout/_partial/post/reward-author.ejs
index b5af391aa..3a69292b4 100644
--- a/layout/_partial/post/reward-author.ejs
+++ b/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>
diff --git a/source/css/layout/_partial/post/reward-author.styl b/source/css/layout/_partial/post/reward-author.styl
index 050297cef..3817c4e88 100644
--- a/source/css/layout/_partial/post/reward-author.styl
+++ b/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)
     }
   }
 }