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 className={styles.postMessage}>
-          <blockquote>
+          <Markdown content={displayContent} />
-            <Markdown content={content} />
+          {content.length > 1000 && (
-          </blockquote>
+            <span className={styles.abbr}>
-        </div>
+              <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}>
+            {content && (
-              <Markdown content={content} />
+              <blockquote className={`${styles.postMessage} ${styles.clampLines}`}>
-            </blockquote>
+                <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}>

src/index.css

@@ -39,6 +39,11 @@ hr {
     user-select: none;
     display: inline-block;
   }
+
+  .button:hover {
+    color: var(--button-text-color-hover-mobile);
+    cursor: pointer;
+  }
 }
 
 @media (min-width: 640px) {

src/themes.css

@@ -65,6 +65,8 @@
   --post-link-text-decoration: underline;
   --post-link-text-color-hover: red;
   --post-link-text-decoration-hover: underline;
+  --post-content-link-text-decoration: none;
+  --post-content-link-text-decoration-hover: none;
 
   /* post */
   --post-subject-text-color: #cc1105;
@@ -85,6 +87,9 @@
   --post-mobile-link-background-color: #ead6ca;
   --post-mobile-link-border-top: 1px solid #d9bfb7;
   --post-mobile-link-info-text-color: #800;
+  --post-mobile-abbr-text-color: #707070;
+  --post-mobile-abbr-font-size: 10pt;
+  --post-mobile-content-font-size: 11pt;
 
   /* post form */
   --post-form-toggle-font-size: 22px;
@@ -159,6 +164,8 @@
   --post-link-text-decoration: underline;
   --post-link-text-color-hover: #d00;
   --post-link-text-decoration-hover: underline;
+  --post-content-link-text-decoration: none;
+  --post-content-link-text-decoration-hover: none;
 
   /* post */
   --post-subject-text-color: #0f0c5d;
@@ -179,6 +186,9 @@
   --post-mobile-link-background-color: #c9cde8;
   --post-mobile-link-border-top: 1px solid #b7c5d9;
   --post-mobile-link-info-text-color: #34345c;
+  --post-mobile-abbr-text-color: #707070;
+  --post-mobile-abbr-font-size: 10pt;
+  --post-mobile-content-font-size: 11pt;
 
   /* post form */
   --post-form-toggle-font-size: 22px;
@@ -215,12 +225,15 @@
   --button-text-decoration: underline;
 
   /* mobile buttons */
-  --button-font-size-mobile: 11pt;
+  --button-font-size-mobile: 12pt;
-  --button-font-weight-mobile: 700;
+  --button-font-weight-mobile: unset;
-  --button-text-color-mobile: #800;
+  --button-text-color-mobile: #00e;
-  --button-background-image-mobile: url("/public/assets/buttons/button-fade.png");
+  --button-background-image-mobile: none;
-  --button-background-color-mobile: #f0e0d6;
+  --button-background-color-mobile: none;
-  --button-border-mobile: 1px solid #c0a69d;
+  --button-border-mobile: none;
+  --button-text-decoration-mobile: underline;
+  --button-text-color-hover-mobile: red;
+  --button-text-decoration-hover-mobile: underline;
 
   /* footer */
   --footer-item-background-color-desktop: #fed;
@@ -230,6 +243,8 @@
   --post-link-text-decoration: underline;
   --post-link-text-color-hover: red;
   --post-link-text-decoration-hover: underline;
+  --post-content-link-text-decoration: underline;
+  --post-content-link-text-decoration-hover: underline;
 
   /* post */
   --post-subject-text-color: #cc1105;
@@ -239,6 +254,20 @@
   --post-menu-button-color: #000080;
   --post-menu-button-color-hover: red;
   --post-greentext-color: #789922;
+  --post-mobile-background-color: #f5e9e1;
+  --post-mobile-info-border-bottom: 1px solid #d9bfb7;
+  --post-mobile-info-background-color: #ead6ca;
+  --post-mobile-menu-button-color: #00e;
+  --post-mobile-name-text-color: #117743;
+  --post-mobile-name-font-weight: 700;
+  --post-mobile-subject-text-color: #cc1105;
+  --post-mobile-subject-font-weight: 700;
+  --post-mobile-link-background-color: #ead6ca;
+  --post-mobile-link-border-top: 1px solid #d9bfb7;
+  --post-mobile-link-info-text-color: #800;
+  --post-mobile-abbr-text-color: #707070;
+  --post-mobile-abbr-font-size: 12pt;
+  --post-mobile-content-font-size: 13pt;
 
   /* post form */
   --post-form-toggle-font-size: 22px;
@@ -295,6 +324,8 @@
   --button-background-image-mobile: url("/public/assets/buttons/button-fade-blue.png");
   --button-background-color-mobile: #d6daf0;
   --button-border-mobile: 1px solid #b7c5d9;
+  --button-text-color-hover-mobile: red;
+  --button-text-decoration-hover-mobile: underline;
 
   /* footer */
   --footer-item-background-color-desktop: #eef2ff;
@@ -304,6 +335,8 @@
   --post-link-text-decoration: underline;
   --post-link-text-color-hover: #d00;
   --post-link-text-decoration-hover: underline;
+  --post-content-link-text-decoration: none;
+  --post-content-link-text-decoration-hover: none;
 
   /* post */
   --post-subject-text-color: #0f0c5d;
@@ -376,6 +409,8 @@
   --post-link-text-decoration: underline;
   --post-link-text-color-hover: #5f89ac;
   --post-link-text-decoration-hover: underline;
+  --post-content-link-text-decoration: none;
+  --post-content-link-text-decoration-hover: none;
 
   /* post */
   --post-subject-text-color: #b294bb;
@@ -443,6 +478,8 @@
   --post-link-text-decoration: underline;
   --post-link-text-color-hover: #f30;
   --post-link-text-decoration-hover: underline;
+  --post-content-link-text-decoration: none;
+  --post-content-link-text-decoration-hover: none;
 
   /* post */
   --post-subject-text-color: #111;