diff --git a/src/common/utils/comment/index.ts b/src/common/utils/comment/index.ts index 25e0570815..fe18109685 100644 --- a/src/common/utils/comment/index.ts +++ b/src/common/utils/comment/index.ts @@ -77,12 +77,13 @@ export function filterResponses( export const highlightComment = ( targetElement: HTMLElement, + spacing: 8 | 12 | 16 = 16, isParentComment?: boolean, fullSpacing?: boolean ) => { const activeParentCommentClass = fullSpacing - ? styles.activeParentCommentFullSpacing - : styles.activeParentComment + ? styles[`activeParentComment${spacing}`] + : styles[`activeParentComment${spacing}`] targetElement.classList.add(styles.activeBgColor) if (isParentComment) { targetElement.classList.add(activeParentCommentClass) diff --git a/src/common/utils/comment/styles.module.css b/src/common/utils/comment/styles.module.css index 6e0539c9d9..0069caf4c5 100644 --- a/src/common/utils/comment/styles.module.css +++ b/src/common/utils/comment/styles.module.css @@ -2,12 +2,36 @@ animation: comment-background-fade-out 1.6s ease-out 0s; } -.activeParentCommentFullSpacing { +.activeParentCommentFullSpacing8 { + padding: var(--sp8) !important; + margin: calc(-1 * var(--sp8)); +} + +.activeParentCommentFullSpacing12 { + padding: var(--sp12) !important; + margin: calc(-1 * var(--sp12)); +} + +.activeParentCommentFullSpacing16 { padding: var(--sp16) !important; margin: calc(-1 * var(--sp16)); } -.activeParentComment { +.activeParentComment8 { + padding-right: var(--sp8) !important; + padding-left: var(--sp8) !important; + margin-right: calc(-1 * var(--sp8)); + margin-left: calc(-1 * var(--sp8)); +} + +.activeParentComment12 { + padding-right: var(--sp12) !important; + padding-left: var(--sp12) !important; + margin-right: calc(-1 * var(--sp12)); + margin-left: calc(-1 * var(--sp12)); +} + +.activeParentComment16 { padding-right: var(--sp16) !important; padding-left: var(--sp16) !important; margin-right: calc(-1 * var(--sp16)); diff --git a/src/components/Dialogs/MomentDetailDialog/Comments.tsx b/src/components/Dialogs/MomentDetailDialog/Comments.tsx index f179f102e8..8ac2900b46 100644 --- a/src/components/Dialogs/MomentDetailDialog/Comments.tsx +++ b/src/components/Dialogs/MomentDetailDialog/Comments.tsx @@ -76,7 +76,7 @@ const Comments = ({ moment, editing }: CommentsProps) => { } setTimeout( - () => highlightComment(targetElement as HTMLElement, true, true), + () => highlightComment(targetElement as HTMLElement, 12, true, true), 100 ) }, [newestCommentId]) diff --git a/src/components/Hook/useJumpToComment.ts b/src/components/Hook/useJumpToComment.ts index 684ac9f424..2b82b5ba66 100644 --- a/src/components/Hook/useJumpToComment.ts +++ b/src/components/Hook/useJumpToComment.ts @@ -38,6 +38,7 @@ export const useJumpToComment = ({ fullSpacing }: Props) => { () => highlightComment( targetElement as HTMLElement, + 16, isParentComment, fullSpacing ),