add replies on mobile

src/components/markdown/markdown.module.css

@@ -22,4 +22,4 @@
 
 .hrWrapper hr {
   margin: 0;
-}
+}

src/components/post/post.module.css

@@ -171,7 +171,7 @@
 .postMobile .postMenuBtn {
   color: var(--post-mobile-menu-button-color);
   line-height: 1em;
-  width: 10px;
+  width: 1em;
   text-align: center;
   transition: transform 0.1s;
   transform: rotate(90deg);
@@ -264,8 +264,8 @@
 }
 
 .replyDesktop .reply {
-  background-color: #f0e0d6;
-  border: 1px solid #d9bfb7;
+  background-color: var(--reply-desktop-background-color);
+  border: var(--reply-desktop-border);
   border-left: none;
   border-top: none;
   display: table;
@@ -276,6 +276,34 @@
   padding: 3px 3px 0 0;
 }
 
+.replyMobile {
+  padding-top: 7px;
+}
+
+.replyMobile .reply {
+  background-color: var(--post-mobile-background-color);
+}
+
+.replyMobile .postInfo {
+  padding: 5px;
+  border-bottom: var(--post-mobile-info-border-bottom);
+  background-color: var(--post-mobile-info-background-color);
+}
+
+.replyMobile .postInfo .postMenuBtn {
+  width: 1em;
+}
+
+.replyMobile .nameBlock {
+  display: inline;
+  float: left;
+}
+
+.replyMobile .dateTimePostNum {
+  float: right;
+  text-align: right;
+}
+
 @media (max-width: 640px) {
   .postDesktop {
     display: none;

src/components/post/post.tsx

@@ -149,8 +149,36 @@ const PostDesktop = ({ post }: Comment) => {
   );
 };
 
+const ReplyMobile = ({ index, reply }: { index: number; reply: Comment }) => {
+  const { author, content, link, linkHeight, linkWidth, pinned, shortCid, subplebbitAddress, timestamp } = reply || {};
+  const { displayName, shortAddress } = author || {};
+
+  return (
+    index < 5 && (
+      <div className={styles.replyMobile}>
+        <div className={styles.reply}>
+          <div className={styles.postInfo}>
+            <span className={styles.postMenuBtn}>...</span>
+            <span className={styles.nameBlock}>
+              <span className={styles.name}>{displayName || 'Anonymous'} </span>
+              <span className={styles.address}>(u/{shortAddress})</span>
+            </span>
+            <span className={styles.dateTimePostNum}>
+              {getFormattedDate(timestamp)} <span className={styles.linkToPost}>c/</span>
+              <span className={styles.replyToPost}>{shortCid}</span>
+            </span>
+          </div>
+          <blockquote className={styles.postMessage}>
+            <Markdown content={content} />
+          </blockquote>
+        </div>
+      </div>
+    )
+  );
+};
+
 const PostMobile = ({ post }: Comment) => {
-  const { author, cid, content, link, linkHeight, linkWidth, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {};
+  const { author, cid, content, link, linkHeight, linkWidth, pinned, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {};
   const { address, displayName, shortAddress } = author || {};
   const linkCount = countLinksInCommentReplies(post);
   const displayTitle = title && title.length > 30 ? title.slice(0, 30) + '(...)' : title;
@@ -159,6 +187,8 @@ const PostMobile = ({ post }: Comment) => {
   const commentMediaInfo = getCommentMediaInfoMemoized(post);
   const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
 
+  const replies = useReplies(post);
+
   return (
     <div className={styles.postMobile}>
       <div className={styles.hrWrapper}>
@@ -214,6 +244,12 @@ const PostMobile = ({ post }: Comment) => {
             </Link>
           </div>
         </div>
+        {!pinned &&
+          replies.map((reply, index) => (
+            <div key={reply.cid} className={styles.replyContainer}>
+              <ReplyMobile index={index} reply={reply} />
+            </div>
+          ))}
       </div>
     </div>
   );

src/themes.css

@@ -100,6 +100,8 @@
 
   /* reply desktop */
   --side-arrows-color: #e0bfb7;
+  --reply-desktop-background-color: #f0e0d6;
+  --reply-desktop-border: 1px solid #d9bfb7;
 
   /* post form */
   --post-form-toggle-font-size: 22px;
@@ -201,8 +203,14 @@
   --post-mobile-abbr-text-color: #707070;
   --post-mobile-abbr-font-size: 10pt;
   --post-mobile-content-font-size: 11pt;
+
   --post-thumbnail-background-color: rgba(0, 0, 0, 0.05);
 
+  /* reply desktop */
+  --side-arrows-color: #b7c5d9;
+  --reply-desktop-background-color: #d6daf0;
+  --reply-desktop-border: 1px solid #b7c5d9;
+
   /* post form */
   --post-form-toggle-font-size: 22px;
   --post-form-toggle-font-weight: 700;
@@ -281,8 +289,14 @@
   --post-mobile-abbr-text-color: #707070;
   --post-mobile-abbr-font-size: 12pt;
   --post-mobile-content-font-size: 13pt;
+
   --post-thumbnail-background-color: rgba(0, 0, 0, 0.05);
 
+  /* reply desktop */
+  --side-arrows-color: #e0bfb7;
+  --reply-desktop-background-color: #f0e0d6;
+  --reply-desktop-border: 1px solid #d9bfb7;
+
   /* post form */
   --post-form-toggle-font-size: 22px;
   --post-form-toggle-font-weight: 700;
@@ -360,7 +374,13 @@
   --post-menu-button-color: #34345c;
   --post-menu-button-color-hover: #d00;
   --post-greentext-color: #789922;
+
   --post-thumbnail-background-color: rgba(0, 0, 0, 0.05);
+
+  /* reply desktop */
+  --side-arrows-color: #b7c5d9;
+  --reply-desktop-background-color: #d6daf0;
+  --reply-desktop-border: 1px solid #b7c5d9;
   
   /* post form */
   --post-form-toggle-font-size: 22px;
@@ -435,8 +455,14 @@
   --post-menu-button-color: #5F89AC;
   --post-menu-button-color-hover: #81a2be;
   --post-greentext-color: #b5bd68;
+
   --post-thumbnail-background-color: rgba(255, 255, 255, 0.01);
 
+  /* reply desktop */
+  --side-arrows-color: #c5c8c6;
+  --reply-desktop-background-color: #282a2e;
+  --reply-desktop-border: 1px solid #282a2e;
+
   /* post form */
   --post-form-toggle-font-size: 22px;
   --post-form-toggle-font-weight: 700;
@@ -505,8 +531,14 @@
   --post-menu-button-color: #FF6600;
   --post-menu-button-color-hover: #FF3300;
   --post-greentext-color: #789922;
+
   --post-thumbnail-background-color: rgba(0, 0, 0, 0.05);
 
+  /* reply desktop */
+  --side-arrows-color: #333;
+  --reply-desktop-background-color: #ddd;
+  --reply-desktop-border: 1px solid #ccc;
+
   /* post form */
   --post-form-toggle-font-size: 22px;
   --post-form-toggle-font-weight: 700;