diff --git a/src/components/Comments/ToggleCommentButton.tsx b/src/components/Comments/ToggleCommentButton.tsx index 92be495ac..650607b96 100644 --- a/src/components/Comments/ToggleCommentButton.tsx +++ b/src/components/Comments/ToggleCommentButton.tsx @@ -1,6 +1,6 @@ import { useQuery } from '@apollo/client'; -import { Comment } from '@mui/icons-material'; -import { Badge, Tooltip } from '@mui/material'; +import { Badge, SvgIcon, SvgIconProps, Tooltip } from '@mui/material'; +import { forwardRef } from 'react'; import { Except } from 'type-fest'; import { Feature } from '../Feature'; import { IconButton, IconButtonProps } from '../IconButton'; @@ -22,15 +22,38 @@ export const ToggleCommentsButton = ({ }); const total = data?.commentable.commentThreads.total ?? 0; + const Icon = total === 0 ? NewCommentIcon : CommentIcon; + return ( toggleCommentsBar()} {...rest}> - + ); }; + +const NewCommentIcon = forwardRef( + function NewCommentIcon(props, ref) { + return ( + + + + + ); + } +); + +const CommentIcon = forwardRef( + function CommentIcon(props, ref) { + return ( + + + + ); + } +);