Merge remote-tracking branch 'origin/dev' into test

ui/src/pages/Questions/Detail/components/Reactions/index.tsx

@@ -26,6 +26,7 @@ import classNames from 'classnames';
 import { Icon } from '@/components';
 import { queryReactions, updateReaction } from '@/services';
 import { tryNormalLogged } from '@/utils/guard';
+import { isDarkTheme } from '@/utils/common';
 import { ReactionItem } from '@/common/interface';
 
 interface Props {
@@ -60,6 +61,7 @@ const Index: FC<Props> = ({
   const [reactions, setReactions] = useState<ReactionItem[]>();
   const [reactIsActive, setReactIsActive] = useState<boolean>(false);
   const { t } = useTranslation('translation');
+  const darkMode = isDarkTheme();
 
   useEffect(() => {
     queryReactions(objectId).then((res) => {
@@ -94,7 +96,7 @@ const Index: FC<Props> = ({
                 : t(`reaction.${d.name}`)
             }
             key={d.icon}
-            variant="light"
+            variant={darkMode ? 'dark' : 'light'}
             active={reactions?.find((v) => v.emoji === d.name)?.is_active}
             className={`${index !== 0 ? 'ms-1' : ''}`}
             size="sm"
@@ -115,8 +117,8 @@ const Index: FC<Props> = ({
       })}>
       {showAddCommentBtn && (
         <Button
-          className="rounded-pill me-2 link-secondary"
-          variant="light"
+          className="rounded-pill me-2 link-secondary btn-reaction"
+          variant={darkMode ? 'dark' : 'light'}
           size="sm"
           onClick={handleClickComment}>
           <Icon name="chat-text-fill" />
@@ -135,8 +137,8 @@ const Index: FC<Props> = ({
           aria-label={t('reaction.btn_label')}
           aria-haspopup="true"
           active={reactIsActive}
-          className="smile-btn rounded-pill link-secondary"
-          variant="light">
+          className="smile-btn rounded-pill link-secondary btn-reaction"
+          variant={darkMode ? 'dark' : 'light'}>
           <Icon name="emoji-smile-fill" />
           <span className="ms-1">+</span>
         </Button>
@@ -158,14 +160,14 @@ 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 })
                   : t('reaction.react_emoji', { emoji: data.emoji })
               }
               aria-pressed="true"
-              variant="light"
+              variant={darkMode ? 'dark' : 'light'}
               active={data.is_active}
               size="sm"
               onClick={() =>

ui/src/pages/Questions/Detail/index.scss

@@ -27,17 +27,35 @@
         [data-bs-theme='dark'] & {
           background-color: var(--bs-gray-800);
         }
+
         background-color: var(--bs-gray-100);
       }
 
       &:active,
       &.active {
         background-color: var(--bs-gray-200);
+
+        [data-bs-theme='dark'] & {
+          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);
 }
@@ -60,4 +78,4 @@
       font-size: calc(1.275rem + 0.3vw) !important;
     }
   }
-}
+}