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); }