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 8950df859b5b0bfc372adeee15255cfefe67f2b7 Author: hgaol <[email protected]> AuthorDate: Thu May 9 23:50:34 2024 +0800 update styles based on comments --- .../Detail/components/Reactions/index.tsx | 20 +++++++++---- ui/src/pages/Questions/Detail/index.scss | 33 ++++++---------------- 2 files changed, 22 insertions(+), 31 deletions(-) diff --git a/ui/src/pages/Questions/Detail/components/Reactions/index.tsx b/ui/src/pages/Questions/Detail/components/Reactions/index.tsx index 9a47f4bf..5d292c7b 100644 --- a/ui/src/pages/Questions/Detail/components/Reactions/index.tsx +++ b/ui/src/pages/Questions/Detail/components/Reactions/index.tsx @@ -2,6 +2,8 @@ import { FC, memo, useEffect, useState } from 'react'; import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap'; import { useTranslation } from 'react-i18next'; +import classNames from 'classnames'; + import { Icon } from '@/components'; import { queryReactions, updateReaction } from '@/services'; import { tryNormalLogged } from '@/utils/guard'; @@ -81,10 +83,14 @@ const Index: FC<Props> = ({ ); return ( - <div className="d-block d-md-flex flex-wrap mt-4 mb-3"> + <div + className={classNames('d-block d-md-flex flex-wrap', { + 'mb-3': !showAddCommentBtn, + })}> {showAddCommentBtn && ( <Button - className="rounded-pill btn-no-border answer-reaction-btn bg-light" + className="rounded-pill me-2 link-secondary" + variant="light" size="sm" onClick={handleClickComment}> <Icon name="chat-text-fill" /> @@ -95,7 +101,8 @@ const Index: FC<Props> = ({ <OverlayTrigger trigger="click" placement="top" overlay={renderTooltip}> <Button size="sm" - className="rounded-pill ms-2 answer-reaction-btn bg-light btn-no-border"> + className="rounded-pill link-secondary" + variant="light"> <Icon name="emoji-smile-fill" /> <span className="ms-1">+</span> </Button> @@ -119,14 +126,15 @@ const Index: FC<Props> = ({ </Tooltip> }> <Button - title="hahah" - className="rounded-pill ms-2 answer-reaction-btn bg-light btn-no-border" + title={emoji.name} + className="rounded-pill ms-2 link-secondary d-flex align-items-center" + variant="light" size="sm" onClick={() => handleSubmit({ object_id: objectId, emoji: emoji.name }) }> <Icon name={emoji.icon} className={emoji.className} /> - <span className="ms-1">{reactions[emoji.name].count}</span> + <span className="ms-1 lh-1">{reactions[emoji.name].count}</span> </Button> </OverlayTrigger> ); diff --git a/ui/src/pages/Questions/Detail/index.scss b/ui/src/pages/Questions/Detail/index.scss index 72cb02e8..46853f1b 100644 --- a/ui/src/pages/Questions/Detail/index.scss +++ b/ui/src/pages/Questions/Detail/index.scss @@ -16,45 +16,28 @@ * specific language governing permissions and limitations * under the License. */ -@import 'bootstrap/scss/functions'; -@import 'bootstrap/scss/variables'; - -.answer-reaction-btn { - padding-top: 0.2rem; - padding-bottom: 0.2rem; - color: $secondary; - &:hover { - background-color: $gray-400 !important; - color: $secondary; - } - &:active { - background-color: $gray-500 !important; - color: $secondary !important; - } -} - #reaction-button-tooltip { .tooltip-inner { padding: 0.2rem; - background-color: $white; - border: 1px solid $gray-500; + background-color: var(--bs-body-bg); + border: 1px solid var(--bs-border-color); .btn { - background-color: $white; - border: none; + background-color: var(--bs-body-bg); + border-color: transparent; &:hover { - background-color: $gray-100; + background-color: var(--bs-gray-100); } &:active { - background-color: $gray-300; + background-color: var(--bs-gray-200); } } } .tooltip-arrow { overflow: hidden; - bottom: calc(-1 * $tooltip-arrow-height + 1px); + bottom: calc(-0.4rem + 1px); &::before { - border: 1px solid $gray-500; + border: 1px solid var(--bs-gray-500); width: 50%; height: 100%; transform: translate(-50%, -50%) rotate(-45deg);
