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 (
+
+
+
+ );
+ }
+);