update themes, limit post content length, fix undefined

src/components/board-nav/board-nav.module.css

@@ -28,6 +28,16 @@
   font-size: var(--boardnav-mobile-font-size);
 }
 
+.boardNavMobile .pageJump a {
+  color: var(--button-text-color-mobile);
+  text-decoration: var(--button-text-decoration-mobile);
+}
+
+.boardNavMobile .pageJump a:hover {
+  color: var(--button-text-color-hover-mobile);
+  text-decoration: var(--button-text-decoration-hover-mobile);
+}
+
 .boardNavMobile strong {
   text-transform: capitalize;
   padding-right: 5px;

src/components/board-nav/board-nav.tsx

@@ -43,7 +43,7 @@ const BoardNavMobile = ({ subplebbits, currentSubplebbit }: BoardNavProps) => {
   const navigate = useNavigate();
   const displaySubplebbitAddress = currentSubplebbit && currentSubplebbit.length > 30 ? currentSubplebbit.slice(0, 30).concat('...') : currentSubplebbit;
 
-  const currentSubplebbitIsInList = subplebbits.some((subplebbit: any) => subplebbit.address === currentSubplebbit);
+  const currentSubplebbitIsInList = subplebbits.some((subplebbit: any) => subplebbit?.address === currentSubplebbit);
 
   const boardSelect = (
     <select value={currentSubplebbit || 'all'} onChange={(e) => navigate(`/p/${e.target.value}`)}>

src/components/markdown/markdown.module.css

@@ -1,11 +1,11 @@
 .markdown a {
   color: var(--post-link-text-color);
-  text-decoration: none;
+  text-decoration: var(--post-content-link-text-decoration);
 }
 
 .markdown a:hover {
   color: var(--post-link-text-color-hover);
-  text-decoration: none;
+  text-decoration: var(--post-content-link-text-decoration-hover);
 }
 
 .markdown ol {

src/components/post/post.module.css

@@ -74,12 +74,12 @@
   color: var(--button-desktop-text-color-hover);
 }
 
-.postMenuBtn {
+.postDesktop .postMenuBtn {
   padding-left: 5px;
   color: var(--post-menu-button-color);
 }
 
-.postMenuBtn:hover {
+.postDesktop .postMenuBtn:hover {
   cursor: pointer;
   color: var(--post-menu-button-color-hover);
 }
@@ -88,6 +88,21 @@
   padding: 1em 40px;
 }
 
+.postDesktop .abbr {
+  color: var(--post-mobile-abbr-text-color);
+  font-size: var(--post-mobile-abbr-font-size);
+}
+
+.postDesktop .abbr a {
+  color: var(--post-link-text-color);
+  text-decoration: var(--post-content-link-text-decoration);
+}
+
+.postDesktop .abbr a:hover {
+  color: var(--post-link-text-color-hover);
+  text-decoration: var(--post-content-link-text-decoration-hover);
+}
+
 .postMobile hr {
   padding-bottom: 30px;
 }
@@ -154,7 +169,7 @@
 
 .postMobile .postMessage {
   padding: 10px;
-  font-size: 11pt;
+  font-size: var(--post-mobile-content-font-size);
 }
 
 .postMobile .postLink {
@@ -172,6 +187,22 @@
   color: var(--post-mobile-link-info-text-color);
 }
 
+.postMobile .abbr {
+  color: var(--post-mobile-abbr-text-color);
+  font-size: var(--post-mobile-abbr-font-size);
+}
+
+.postMobile .abbr a {
+  color: var(--post-link-text-color);
+  text-decoration: var(--post-content-link-text-decoration);
+
+}
+
+.postMobile .abbr a:hover {
+  color: var(--post-link-text-color-hover);
+  text-decoration: var(--post-content-link-text-decoration-hover);
+}
+
 @media (max-width: 640px) {
   .postDesktop {
     display: none;

src/components/post/post.tsx

@@ -15,6 +15,7 @@ const PostDesktop = ({ post }: Comment) => {
   const replies = useReplies(post);
   const linkMediaInfo = getLinkMediaInfoMemoized(link);
   const displayTitle = title && title.length > 75 ? title.slice(0, 75) + '...' : title;
+  const displayContent = content && content.length > 1000 ? content.slice(0, 1000) + '(...)' : content;
 
   return (
     <div className={styles.postDesktop}>
@@ -63,11 +64,15 @@ const PostDesktop = ({ post }: Comment) => {
         <span className={styles.postMenuBtn}>▶</span>
       </div>
       {content && (
-        <div className={styles.postMessage}>
-          <blockquote>
-            <Markdown content={content} />
-          </blockquote>
-        </div>
+        <blockquote className={styles.postMessage}>
+          <Markdown content={displayContent} />
+          {content.length > 1000 && (
+            <span className={styles.abbr}>
+              <br />
+              Comment too long. <Link to={`/p/${subplebbitAddress}/c/${cid}`}>Click here</Link> to view the full text.
+            </span>
+          )}
+        </blockquote>
       )}
     </div>
   );
@@ -78,6 +83,7 @@ const PostMobile = ({ post }: Comment) => {
   const { address, displayName, shortAddress } = author || {};
   const linkCount = countLinksInCommentReplies(post);
   const displayTitle = title && title.length > 30 ? title.slice(0, 30) + '(...)' : title;
+  const displayContent = content && content.length > 1000 ? content.slice(0, 1000) : content;
 
   return (
     <div className={styles.postMobile}>
@@ -106,9 +112,17 @@ const PostMobile = ({ post }: Comment) => {
                 <span className={styles.replyToPost}>{shortCid}</span>
               </span>
             </div>
-            <blockquote className={styles.postMessage}>
-              <Markdown content={content} />
-            </blockquote>
+            {content && (
+              <blockquote className={`${styles.postMessage} ${styles.clampLines}`}>
+                <Markdown content={displayContent} />
+                {content.length > 1000 && (
+                  <span className={styles.abbr}>
+                    <br />
+                    Comment too long. <Link to={`/p/${subplebbitAddress}/c/${cid}`}>Click here</Link> to view the full text.
+                  </span>
+                )}
+              </blockquote>
+            )}
           </div>
           <div className={styles.postLink}>
             <span className={styles.info}>