From 1c8ceea40a25aef2bcbf7648a577b67dc314d915 Mon Sep 17 00:00:00 2001
From: shuai <lishuailing@sifou.com>
Date: Wed, 5 Jun 2024 16:28:44 +0800
Subject: [PATCH] fix: fix issues on reactions ui

---
 ui/src/components/Comment/index.tsx           |  2 +-
 .../Detail/components/Reactions/index.tsx     | 17 ++++++------
 ui/src/pages/Questions/Detail/index.scss      | 27 +++++--------------
 3 files changed, 16 insertions(+), 30 deletions(-)

diff --git a/ui/src/components/Comment/index.tsx b/ui/src/components/Comment/index.tsx
index 1cb46f12..c639fc64 100644
--- a/ui/src/components/Comment/index.tsx
+++ b/ui/src/components/Comment/index.tsx
@@ -480,7 +480,7 @@ const Comment = ({ objectId, mode, commentId }) => {
           <Form
             mode={mode}
             className={classNames(
-              'mt-2',
+              comments.length <= 0 ? 'mt-3' : 'mt-2',
               comments.length <= 0 && 'bg-light p-3 rounded',
             )}
             onSendReply={(value) => handleSendReply({ value, type: 'comment' })}
diff --git a/ui/src/pages/Questions/Detail/components/Reactions/index.tsx b/ui/src/pages/Questions/Detail/components/Reactions/index.tsx
index 4cf7b454..08040631 100644
--- a/ui/src/pages/Questions/Detail/components/Reactions/index.tsx
+++ b/ui/src/pages/Questions/Detail/components/Reactions/index.tsx
@@ -1,5 +1,5 @@
 import { FC, memo, useEffect, useState } from 'react';
-import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import { Button, OverlayTrigger, Popover, Tooltip } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
 import classNames from 'classnames';
@@ -44,7 +44,7 @@ const Index: FC<Props> = ({
 
   useEffect(() => {
     queryReactions(objectId).then((res) => {
-      setReactions(res.reaction_summary);
+      setReactions(res?.reaction_summary);
     });
   }, []);
 
@@ -67,9 +67,9 @@ const Index: FC<Props> = ({
     });
   };
 
-  const renderTooltip = (props) => (
-    <Tooltip id="reaction-button-tooltip" {...props} bsPrefix="tooltip">
-      <div className="d-block d-md-flex flex-wrap m-0 p-0">
+  const renderPopover = (props) => (
+    <Popover id="reaction-button-tooltip" {...props}>
+      <Popover.Body className="d-block d-md-flex flex-wrap p-1">
         {emojiMap.map((d) => (
           <Button
             key={d.icon}
@@ -81,8 +81,8 @@ const Index: FC<Props> = ({
             <Icon name={d.icon} className={d.className} />
           </Button>
         ))}
-      </div>
-    </Tooltip>
+      </Popover.Body>
+    </Popover>
   );
 
   return (
@@ -104,7 +104,7 @@ const Index: FC<Props> = ({
       <OverlayTrigger
         trigger="click"
         placement="top"
-        overlay={renderTooltip}
+        overlay={renderPopover}
         show={reactIsActive}
         onToggle={(show) => setReactIsActive(show)}>
         <Button
@@ -138,6 +138,7 @@ const Index: FC<Props> = ({
                 title={emoji.name}
                 className="rounded-pill ms-2 link-secondary align-items-center"
                 variant="light"
+                active={reactions[emoji.name].is_active}
                 size="sm"
                 onClick={() =>
                   handleSubmit({ object_id: objectId, emoji: emoji.name })
diff --git a/ui/src/pages/Questions/Detail/index.scss b/ui/src/pages/Questions/Detail/index.scss
index 46f394e3..9bb6e1a5 100644
--- a/ui/src/pages/Questions/Detail/index.scss
+++ b/ui/src/pages/Questions/Detail/index.scss
@@ -16,12 +16,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-#reaction-button-tooltip {
-  .tooltip-inner {
-    padding: 0.2rem;
-    background-color: var(--bs-body-bg);
-    border: 1px solid var(--bs-border-color);
 
+#reaction-button-tooltip {
+  .popover-body {
     .btn {
       background-color: var(--bs-body-bg);
       border-color: transparent;
@@ -35,22 +32,10 @@
       }
     }
   }
+}
 
-  .tooltip-arrow {
-    overflow: hidden;
-    bottom: calc(-0.4rem + 1px);
-
-    &::before {
-      border: 1px solid var(--bs-gray-500);
-      width: 50%;
-      height: 100%;
-      transform: translate(-50%, -50%) rotate(-45deg);
-      box-sizing: content-box;
-      left: 50%;
-      bottom: 50%;
-      background-color: white;
-    }
-  }
+.answer-item {
+  border-top: 1px solid var(--an-answer-item-border-top);
 }
 
 .smile-btn.active::before {
@@ -71,4 +56,4 @@
       font-size: calc(1.275rem + 0.3vw) !important;
     }
   }
-}
\ No newline at end of file
+}