diff --git a/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabContainer.tsx b/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabContainer.tsx index 920de4394..6453c48e3 100644 --- a/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabContainer.tsx +++ b/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabContainer.tsx @@ -18,7 +18,7 @@ import { AllCommentsTabContainer_viewer } from "coral-stream/__generated__/AllCo import { AllCommentsTabContainerLocal } from "coral-stream/__generated__/AllCommentsTabContainerLocal.graphql"; import { AllCommentsTabContainerPaginationQueryVariables } from "coral-stream/__generated__/AllCommentsTabContainerPaginationQuery.graphql"; import CLASSES from "coral-stream/classes"; -import { Box, Button, HorizontalGutter } from "coral-ui/components"; +import { Box, Button, CallOut, HorizontalGutter } from "coral-ui/components"; import { CommentContainer } from "../../Comment"; import IgnoredTombstoneOrHideContainer from "../../IgnoredTombstoneOrHideContainer"; @@ -128,30 +128,38 @@ export const AllCommentsTabContainer: FunctionComponent = props => { size="oneAndAHalf" className={styles.stream} > - {comments.map(comment => ( - - - - - - - - - ))} + {comments.length <= 0 ? ( + + + There are no comments yet. Why don't you write one? + + + ) : ( + comments.map(comment => ( + + + + + + + + + )) + )} {props.relay.hasMore() && (