diff --git a/src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.css b/src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.css new file mode 100644 index 000000000..1822f207f --- /dev/null +++ b/src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.css @@ -0,0 +1,7 @@ +.emptyHistoryIcon { + margin: 0 0 var(--spacing-3) 0; +} + +.emptyHistory { + padding: var(--spacing-2) 0 0 0 !important; +} \ No newline at end of file diff --git a/src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.tsx b/src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.tsx index e3e4961c2..7d8545d88 100644 --- a/src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.tsx +++ b/src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.tsx @@ -2,10 +2,18 @@ import { Localized } from "fluent-react/compat"; import React, { FunctionComponent } from "react"; import { PropTypesOf } from "coral-framework/types"; -import { Button, HorizontalGutter, Typography } from "coral-ui/components"; +import { + Button, + Flex, + HorizontalGutter, + Icon, + Typography, +} from "coral-ui/components"; import HistoryCommentContainer from "./HistoryCommentContainer"; +import styles from "./CommentHistory.css"; + interface CommentHistoryProps { story: PropTypesOf["story"]; comments: Array< @@ -19,9 +27,30 @@ interface CommentHistoryProps { const CommentHistory: FunctionComponent = props => { return ( - - Comment History - + {props.comments.length > 0 && ( + + Comment History + + )} + {props.comments.length < 1 && ( + +
+ chat_bubble_outline +
+ + + You have not written any comments + + + + A history of your comments will appear here + +
+ )} {props.comments.map(comment => (