(incubator-answer) 12/13: update

[linkinstar]

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

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

commit d5092998f598c381b8d4af7835e98ed2f06d0f48
Author: hgaol <dhan...@hotmail.com>
AuthorDate: Fri May 10 17:53:13 2024 +0800

    update
---
 .../Questions/Detail/components/Reactions/index.tsx    | 12 ++++++++++--
 ui/src/pages/Questions/Detail/index.scss               | 18 +++++++++++++++++-
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/ui/src/pages/Questions/Detail/components/Reactions/index.tsx 
b/ui/src/pages/Questions/Detail/components/Reactions/index.tsx
index 5d292c7b..27a7619a 100644
--- a/ui/src/pages/Questions/Detail/components/Reactions/index.tsx
+++ b/ui/src/pages/Questions/Detail/components/Reactions/index.tsx
@@ -39,6 +39,7 @@ const Index: FC<Props> = ({
   handleClickComment,
 }) => {
   const [reactions, setReactions] = useState<Record<string, ReactionItem>>();
+  const [reactIsActive, setReactIsActive] = useState<boolean>(false);
   const { t } = useTranslation('translation');
 
   useEffect(() => {
@@ -61,6 +62,7 @@ const Index: FC<Props> = ({
           : 'activate',
     }).then((res) => {
       setReactions(res.reaction_summary);
+      setReactIsActive(false);
     });
   };
 
@@ -98,10 +100,16 @@ const Index: FC<Props> = ({
         </Button>
       )}
 
-      <OverlayTrigger trigger="click" placement="top" overlay={renderTooltip}>
+      <OverlayTrigger
+        trigger="click"
+        placement="top"
+        overlay={renderTooltip}
+        show={reactIsActive}
+        onToggle={(show) => setReactIsActive(show)}>
         <Button
           size="sm"
-          className="rounded-pill link-secondary"
+          active={reactIsActive}
+          className="smile-btn rounded-pill link-secondary"
           variant="light">
           <Icon name="emoji-smile-fill" />
           <span className="ms-1">+</span>
diff --git a/ui/src/pages/Questions/Detail/index.scss 
b/ui/src/pages/Questions/Detail/index.scss
index 46853f1b..46f394e3 100644
--- a/ui/src/pages/Questions/Detail/index.scss
+++ b/ui/src/pages/Questions/Detail/index.scss
@@ -21,12 +21,15 @@
     padding: 0.2rem;
     background-color: var(--bs-body-bg);
     border: 1px solid var(--bs-border-color);
+
     .btn {
       background-color: var(--bs-body-bg);
       border-color: transparent;
+
       &:hover {
         background-color: var(--bs-gray-100);
       }
+
       &:active {
         background-color: var(--bs-gray-200);
       }
@@ -36,6 +39,7 @@
   .tooltip-arrow {
     overflow: hidden;
     bottom: calc(-0.4rem + 1px);
+
     &::before {
       border: 1px solid var(--bs-gray-500);
       width: 50%;
@@ -49,10 +53,22 @@
   }
 }
 
+.smile-btn.active::before {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 80;
+  display: block;
+  cursor: default;
+  content: " ";
+}
+
 @media screen and (max-width: 768px) {
   .questionDetailPage {
     h1.h3 {
       font-size: calc(1.275rem + 0.3vw) !important;
     }
   }
-}
+}
\ No newline at end of file