add missing state strings to post cards, use gray color

This commit is contained in:
plebeius.eth
2024-05-06 17:02:31 +02:00
parent bcad722bcb
commit cbc9230ead
4 changed files with 27 additions and 30 deletions
+4
View File
@@ -191,6 +191,10 @@
color: var(--post-mobile-abbr-text-color);
}
.stateString {
color: var(--post-mobile-abbr-text-color);
}
.postDesktop .summary .expandButtonWrapper {
position: absolute;
top: 8px;
+22
View File
@@ -61,6 +61,11 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
const account = useAccount();
const accountShortAddress = account?.author?.shortAddress;
const stateString = useStateString(post);
const loadingString = stateString && (
<div className={`${styles.stateString} ${styles.ellipsis}`}>{stateString !== 'Failed' ? <LoadingEllipsis string={stateString} /> : stateString}</div>
);
return (
<div className={styles.postDesktop}>
<div className={styles.hrWrapper}>
@@ -181,6 +186,12 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
<Trans i18nKey={'comment_too_long'} shouldUnescape={true} components={{ 1: <Link to={`/p/${subplebbitAddress}/c/${cid}`} /> }} />
</span>
)}
{!cid && state === 'pending' && (
<>
<br />
{loadingString}
</>
)}
</blockquote>
)}
{(replies.length > 5 || (pinned && replies.length > 0)) && !isInPostPage && (
@@ -375,6 +386,11 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
const account = useAccount();
const accountShortAddress = account?.author?.shortAddress;
const stateString = useStateString(post);
const loadingString = stateString && (
<div className={`${styles.stateString} ${styles.ellipsis}`}>{stateString !== 'Failed' ? <LoadingEllipsis string={stateString} /> : stateString}</div>
);
return (
<div className={styles.postMobile}>
<div className={styles.hrWrapper}>
@@ -448,6 +464,12 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
<Trans i18nKey={'comment_too_long'} shouldUnescape={true} components={{ 1: <Link to={`/p/${subplebbitAddress}/c/${cid}`} /> }} />
</span>
)}
{!cid && state === 'pending' && (
<>
<br />
{loadingString}
</>
)}
</blockquote>
)}
</div>