add missing state strings to post cards, use gray color

src/components/post/post.module.css

@@ -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;

src/components/post/post.tsx

@@ -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>

src/views/pending-post/pending-post.module.css

@@ -1,16 +0,0 @@
-.stateString {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: calc(100vw - 28px);
-  width: 100vw;
-  margin-top: 10px;
-  margin-left: 40px;
-}
-
-@media (max-width: 640px) {
-  .stateString {
-    margin-top: 0px;
-    margin-left: 10px;
-  }
-}

src/views/pending-post/pending-post.tsx

@@ -1,17 +1,13 @@
 import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useAccountComment } from '@plebbit/plebbit-react-hooks';
-import styles from './pending-post.module.css';
 import Post from '../../components/post';
-import useStateString from '../../hooks/use-state-string';
-import LoadingEllipsis from '../../components/loading-ellipsis';
 
 const PendingPost = () => {
   const { accountCommentIndex } = useParams<{ accountCommentIndex?: string }>();
   const commentIndex = accountCommentIndex ? parseInt(accountCommentIndex) : undefined;
   const post = useAccountComment({ commentIndex });
   const navigate = useNavigate();
-  const stateString = useStateString(post);
 
   useEffect(() => window.scrollTo(0, 0), []);
 
@@ -21,16 +17,7 @@ const PendingPost = () => {
     }
   }, [post, navigate]);
 
-  const loadingString = stateString && (
+  return <Post post={post} />;
-    <div className={`${styles.stateString} ${styles.ellipsis}`}>{stateString !== 'Failed' ? <LoadingEllipsis string={stateString} /> : stateString}</div>
-  );
-
-  return (
-    <div className={styles.container}>
-      <Post post={post} />
-      {loadingString}
-    </div>
-  );
 };
 
 export default PendingPost;