feat(feed post): add expandos for posts text content and related buttons

src/components/feed-post/feed-post.module.css

@@ -13,7 +13,7 @@
 }
 
 .arrowUp {
-  background-image: url("/public/assets/upvote.png");
+  background-image: url("/public/assets/buttons/upvote.png");
   margin: 2px 0px 0px 0px;
   width: 15px;
   height: 14px;
@@ -22,7 +22,7 @@
 }
 
 .arrowDown {
-  background-image: url("/public/assets/downvote.png");
+  background-image: url("/public/assets/buttons/downvote.png");
   margin: 2px 0px 0px 0px;
   width: 15px;
   height: 14px;
@@ -124,4 +124,77 @@
       cursor: pointer;
     }
   }
+}
+
+.textButton {
+  background-image: url("/public/assets/buttons/text-button.png");
+  background-size: cover;
+  float: left;
+  height: 23px;
+  width: 23px;
+  display: block;
+  margin: 2px 5px 2px 0;
+  cursor: pointer;
+}
+
+.textButton:hover {
+  background-image: url("/public/assets/buttons/text-button-hover.png");
+}
+
+.playButton {
+  background-image: url("/public/assets/buttons/play-button.png");
+  background-size: cover;
+  float: left;
+  height: 23px;
+  width: 23px;
+  display: block;
+  margin: 2px 5px 2px 0;
+  cursor: pointer;
+}
+
+.playButton:hover {
+  background-image: url("/public/assets/buttons/play-button-hover.png");
+}
+
+.closeButton {
+  background-image: url("/public/assets/buttons/close-button.png");
+  background-size: cover;
+  float: left;
+  height: 23px;
+  width: 23px;
+  display: block;
+  margin: 2px 5px 2px 0;
+  cursor: pointer;
+}
+
+.closeButton:hover {
+  background-image: url("/public/assets/buttons/close-button-hover.png");
+}
+
+.expandoHidden {
+  display: none;
+}
+
+.expando {
+  display: block;
+  margin: 5px 0 5px 0;
+  clear: left;
+  position: relative;
+}
+
+.usertext {
+  unicode-bidi: isolate;
+  font-size: small;
+}
+
+.markdown {
+  background-color: #fafafa;
+  border: 1px solid var(--text1);
+  border-radius: 7px;
+  padding: 5px 10px;
+  font-weight: 400;
+  color: #222222;
+  max-width: 60em;
+  word-wrap: break-word;
+  font-size: 1em;
 }

src/components/feed-post/feed-post.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, useState } from 'react';
 import styles from './feed-post.module.css';
 import { Link } from 'react-router-dom';
 import utils from '../../lib/utils';
@@ -13,6 +13,14 @@ interface FeedPostProps {
 const FeedPost: FC<FeedPostProps> = ({ post, index }) => {
   const subplebbitAddress = post?.subplebbitAddress;
   const { t } = useTranslation();
+  const [expandoVisible, setExpandoVisible] = useState(false);
+  const initialButtonType = post?.link ? 'playButton' : 'textButton';
+  const [buttonType, setButtonType] = useState<'textButton' | 'playButton' | 'closeButton'>(initialButtonType);
+
+  const toggleExpando = () => {
+    setExpandoVisible(!expandoVisible);
+    setButtonType(buttonType === 'closeButton' ? 'textButton' : 'closeButton');
+  };
 
   return (
     <div className={styles.wrapper} key={index}>
@@ -25,7 +33,8 @@ const FeedPost: FC<FeedPostProps> = ({ post, index }) => {
         <div className={styles.topMatter}>
           <p className={styles.title}>
             <Link className={styles.link} to={`p/${subplebbitAddress}/c/${post?.cid}`} onClick={(e) => e.preventDefault()}>
-              {post?.title || post?.content?.slice(0, 80) + '...'}
+              {(post?.title?.length > 90 ? post?.title?.slice(0, 90) + '...' : post?.title) ||
+                (post?.content?.length > 90 ? post?.content?.slice(0, 90) + '...' : post?.content)}
             </Link>
             &nbsp;
             {post?.link && (
@@ -38,6 +47,8 @@ const FeedPost: FC<FeedPostProps> = ({ post, index }) => {
               </span>
             )}
           </p>
+          {post?.content && !post?.link && <div className={styles[buttonType]} onClick={toggleExpando} />}
+          {post?.link && <div className={styles[buttonType]} onClick={toggleExpando} />}
           <p className={styles.tagline}>
             {t('feed_post_submitted')} {utils.getFormattedTime(post?.timestamp, t)} {t('feed_post_by')}&nbsp;
             <Link className={styles.author} to={`u/${post?.author.shortAddress}`} onClick={(e) => e.preventDefault()}>
@@ -71,6 +82,11 @@ const FeedPost: FC<FeedPostProps> = ({ post, index }) => {
             </li>
           </ul>
         </div>
+        <div className={expandoVisible ? styles.expando : styles.expandoHidden}>
+          <div className={styles.usertext}>
+            <div className={styles.markdown}>{post?.content}</div>
+          </div>
+        </div>
       </div>
     </div>
   );

src/components/topbar/topbar.module.css

@@ -55,7 +55,7 @@
 .selectedTitle {
   background: none no-repeat scroll center right;
   background-image: none;
-  background-image: url("/public/assets/droparrowgray.gif");
+  background-image: url("/public/assets/buttons/droparrowgray.gif");
   display: inline-block;
   vertical-align: bottom;
   padding-right: 21px;