add missing state strings to post cards, use gray color

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 && (
-    <div className={`${styles.stateString} ${styles.ellipsis}`}>{stateString !== 'Failed' ? <LoadingEllipsis string={stateString} /> : stateString}</div>
-  );
-
-  return (
-    <div className={styles.container}>
-      <Post post={post} />
-      {loadingString}
-    </div>
-  );
+  return <Post post={post} />;
 };
 
 export default PendingPost;