(answer) 02/02: update reaction button styles for dark mode and enhance hover effects

[shuai]

This is an automated email from the ASF dual-hosted git repository.

shuai pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/answer.git

commit f9362749b1f14797b0d7a43457d9ba85d1fb93cb
Author: hgaol <dhan...@hotmail.com>
AuthorDate: Tue Apr 29 10:47:03 2025 +0800

    update reaction button styles for dark mode and enhance hover effects
---
 .../pages/Questions/Detail/components/Reactions/index.tsx |  6 +++---
 ui/src/pages/Questions/Detail/index.scss                  | 15 ++++++++++++++-
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/ui/src/pages/Questions/Detail/components/Reactions/index.tsx 
b/ui/src/pages/Questions/Detail/components/Reactions/index.tsx
index 6405de3b..9c747cf8 100644
--- a/ui/src/pages/Questions/Detail/components/Reactions/index.tsx
+++ b/ui/src/pages/Questions/Detail/components/Reactions/index.tsx
@@ -117,7 +117,7 @@ const Index: FC<Props> = ({
       })}>
       {showAddCommentBtn && (
         <Button
-          className="rounded-pill me-2 link-secondary"
+          className="rounded-pill me-2 link-secondary btn-reaction"
           variant={darkMode ? 'dark' : 'light'}
           size="sm"
           onClick={handleClickComment}>
@@ -137,7 +137,7 @@ const Index: FC<Props> = ({
           aria-label={t('reaction.btn_label')}
           aria-haspopup="true"
           active={reactIsActive}
-          className="smile-btn rounded-pill link-secondary"
+          className="smile-btn rounded-pill link-secondary btn-reaction"
           variant={darkMode ? 'dark' : 'light'}>
           <Icon name="emoji-smile-fill" />
           <span className="ms-1">+</span>
@@ -160,7 +160,7 @@ const Index: FC<Props> = ({
               </Tooltip>
             }>
             <Button
-              className="rounded-pill ms-2 link-secondary d-flex 
align-items-center"
+              className="rounded-pill ms-2 link-secondary d-flex 
align-items-center btn-reaction"
               aria-label={
                 data?.is_active
                   ? t('reaction.unreact_emoji', { emoji: data.emoji })
diff --git a/ui/src/pages/Questions/Detail/index.scss 
b/ui/src/pages/Questions/Detail/index.scss
index 8c7396ad..2519cc55 100644
--- a/ui/src/pages/Questions/Detail/index.scss
+++ b/ui/src/pages/Questions/Detail/index.scss
@@ -36,13 +36,26 @@
         background-color: var(--bs-gray-200);
 
         [data-bs-theme='dark'] & {
-          background-color: var(--bs-gray-800);
+          background-color: var(--bs-gray-700);
         }
       }
     }
   }
 }
 
+.btn-reaction {
+  [data-bs-theme='dark'] & {
+    color: var(--bs-gray-400) !important;
+    background-color: var(--bs-gray-800);
+    &:active, &.active {
+      background-color: #626E79 !important;
+    }
+    &:hover {
+      background-color: #57616B !important;
+    }
+  }
+}
+
 .answer-item {
   border-top: 1px solid var(--an-answer-item-border-top);
 }