diff --git a/src/components/post/post.module.css b/src/components/post/post.module.css index ce4f01c7..59688e80 100644 --- a/src/components/post/post.module.css +++ b/src/components/post/post.module.css @@ -93,6 +93,15 @@ color: var(--link-visited); } +.pinnedLink { + color: var(--text-secondary) !important; + font-weight: bold !important; +} + +.announcement { + color: var(--text-secondary) !important; +} + .domain { color: var(--text-info); font-size: x-small; diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx index 77f62700..0f34fe7e 100644 --- a/src/components/post/post.tsx +++ b/src/components/post/post.tsx @@ -22,7 +22,7 @@ interface PostProps { } const Post = ({ post, index }: PostProps) => { - const { cid, content, downvoteCount, flair, link, linkHeight, linkWidth, replyCount, state, subplebbitAddress, timestamp, title, upvoteCount } = post || {}; + const { cid, content, downvoteCount, flair, link, linkHeight, linkWidth, pinned, replyCount, state, subplebbitAddress, timestamp, title, upvoteCount } = post || {}; const { shortAuthorAddress, authorAddressChanged } = useAuthorAddress({ comment: post }); const subplebbit = useSubplebbit({ subplebbitAddress }); const { t } = useTranslation(); @@ -48,7 +48,7 @@ const Post = ({ post, index }: PostProps) => { const pendingReplyCount = usePendingReplyCount({ parentCommentCid: cid }); const totalReplyCount = replyCount + pendingReplyCount; - const linkClass = isInPostView ? (link ? styles.externalLink : styles.internalLink) : styles.link; + const linkClass = `${isInPostView ? (link ? styles.externalLink : styles.internalLink) : styles.link} ${pinned ? styles.pinnedLink : ''}`; return (
@@ -128,6 +128,9 @@ const Post = ({ post, index }: PostProps) => { )} + {pinned && ( + - {t('announcement')} + )}