feat(post): add post info row, update themes

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

@@ -5,13 +5,13 @@
 }
 
 .boardNavDesktop a {
-  color: var(--button-desktop-text-color);
+  color: var(--boardnav-desktop-link-text-color);
-  text-decoration: var(--button-desktop-text-color-decoration);
+  text-decoration: var(--boardnav-desktop-link-text-decoration);
 }
 
 .boardNavDesktop a:hover {
-  color: var(--button-desktop-text-color-hover);
+  color: var(--boardnav-desktop-link-text-color-hover);
-  text-decoration: var(--button-desktop-text-color-hover);
+  text-decoration: var(--boardnav-desktop-link-text-decoration-hover);
 }
 
 .navTopRight {

src/components/post/post.module.css

@@ -2,12 +2,32 @@
   clear: both;
 }
 
-.link a {
+.postDesktop .link a {
   color: var(--post-link-text-color);
   text-decoration: var(--post-link-text-decoration);
 }
 
-.link a:hover {
+.postDesktop .link a:hover {
   color: var(--post-link-text-color-hover);
   text-decoration: var(--post-link-text-decoration-hover);
+}
+
+.postDesktop .postInfo {
+  width: 100%;
+}
+
+.postDesktop .subject {
+  color: var(--post-subject-text-color);
+  font-weight: var(--post-subject-font-weight);
+}
+
+.postDesktop .name {
+  color: var(--post-name-text-color);
+  font-weight: var(--post-name-font-weight);
+}
+
+@media (max-width: 640px) {
+  .postDesktop {
+    display: none;
+  }
 }

src/components/post/post.tsx

@@ -4,14 +4,15 @@ import useReplies from '../../hooks/use-replies';
 import { getLinkMediaInfoMemoized } from '../../lib/utils/media-utils';
 
 const Post = ({ post }: Comment) => {
-  const { content, link, title } = post;
+  const { author, content, link, title } = post || {};
+  const { displayName, shortAddress } = author || {};
   const replies = useReplies(post);
   const linkMediaInfo = getLinkMediaInfoMemoized(link);
   return (
     <div className={styles.thread}>
-      <hr />
       <div className={styles.postContainer}>
         <div className={styles.postDesktop}>
+          <hr />
           {linkMediaInfo?.url && (
             <div className={styles.link}>
               Link:{' '}
@@ -21,7 +22,14 @@ const Post = ({ post }: Comment) => {
               ({linkMediaInfo?.type})
             </div>
           )}
-          <div className={styles.postInfo}></div>
+          <div className={styles.postInfo}>
+            {title && <span className={styles.subject}>{title.length > 75 ? title.slice(0, 75) + '...' : title}</span>}{' '}
+            <span className={styles.nameBlock}>
+              <span className={styles.name}>{displayName || 'Anonymous'} </span>
+              <span className={styles.userAddress}>(u/{shortAddress})</span>
+            </span>
+            <span className={styles.dateTime}></span>
+          </div>
           <div className={styles.postMessage}></div>
         </div>
       </div>

src/themes.css

@@ -8,6 +8,10 @@
   /* board nav */
   --boardnav-font-size: 9pt;
   --boardnav-separator-color: #b86;
+  --boardnav-desktop-link-text-color: #800;
+  --boardnav-desktop-link-text-color-hover: #e00;
+  --boardnav-desktop-link-text-decoration: none;
+  --boardnav-desktop-link-text-decoration-hover: underline;
   --boardnav-mobile-background-color: #f0e0d6;
   --boardnav-mobile-border-bottom: 2px solid #d9c5b7;
   --boardnav-mobile-font-size: 10px;
@@ -62,6 +66,12 @@
   --post-link-text-color-hover: red;
   --post-link-text-decoration-hover: underline;
 
+  /* post */
+  --post-subject-text-color: #cc1105;
+  --post-subject-font-weight: 700;
+  --post-name-text-color: #117743;
+  --post-name-font-weight: 700;
+
   /* post form */
   --post-form-toggle-font-size: 22px;
   --post-form-toggle-font-weight: 700;
@@ -79,6 +89,10 @@
   /* board nav */
   --boardnav-font-size: 9pt;
   --boardnav-separator-color: #89a;
+  --boardnav-desktop-link-text-color: #34345c;
+  --boardnav-desktop-link-text-color-hover: #d00;
+  --boardnav-desktop-link-text-decoration: none;
+  --boardnav-desktop-link-text-decoration-hover: underline;
   --boardnav-mobile-background-color: #d6daf0;
   --boardnav-mobile-border-bottom: 2px solid #b7c5d9;
   --boardnav-mobile-font-size: 10px;
@@ -132,6 +146,12 @@
   --post-link-text-color-hover: #d00;
   --post-link-text-decoration-hover: underline;
 
+  /* post */
+  --post-subject-text-color: #0f0c5d;
+  --post-subject-font-weight: 700;
+  --post-name-text-color: #117743;
+  --post-name-font-weight: 700;
+
   /* post form */
   --post-form-toggle-font-size: 22px;
   --post-form-toggle-font-weight: 700;
@@ -148,6 +168,10 @@
   /* board nav */
   --boardnav-font-size: 11pt;
   --boardnav-separator-color: none;
+  --boardnav-desktop-link-text-color: #00e;
+  --boardnav-desktop-link-text-color-hover: red;
+  --boardnav-desktop-link-text-decoration: underline;
+  --boardnav-desktop-link-text-decoration-hover: underline;
   --boardnav-mobile-background-color: #f0e0d6;
   --boardnav-mobile-border-bottom: 2px solid #d9c5b7;
   --boardnav-mobile-font-size: 11pt;
@@ -179,6 +203,12 @@
   --post-link-text-color-hover: red;
   --post-link-text-decoration-hover: underline;
 
+  /* post */
+  --post-subject-text-color: #cc1105;
+  --post-subject-font-weight: 700;
+  --post-name-text-color: #117743;
+  --post-name-font-weight: 700;
+
   /* post form */
   --post-form-toggle-font-size: 22px;
   --post-form-toggle-font-weight: 700;
@@ -189,13 +219,17 @@
   --banner-image-border: 1px solid #000;
   --board-title-font-size: 32px;
   --board-title-text-color: #af0a0f;
-  --board-title-font-family: Tahoma, sans-serif;
+  --board-title-font-family: times new roman, serif;
   --board-address-font-size: 10pt;
   --board-address-text-color: #af0a0f;
 
   /* board nav */
   --boardnav-font-size: 11pt;
   --boardnav-separator-color: none;
+  --boardnav-desktop-link-text-color: #34345c;
+  --boardnav-desktop-link-text-color-hover: #d00;
+  --boardnav-desktop-link-text-decoration: underline;
+  --boardnav-desktop-link-text-decoration-hover: underline;
   --boardnav-mobile-background-color: #d6daf0;
   --boardnav-mobile-border-bottom: 2px solid #b7c5d9;
   --boardnav-mobile-font-size: 11pt;
@@ -240,6 +274,12 @@
   --post-link-text-color-hover: #d00;
   --post-link-text-decoration-hover: underline;
 
+  /* post */
+  --post-subject-text-color: #0f0c5d;
+  --post-subject-font-weight: 700;
+  --post-name-text-color: #117743;
+  --post-name-font-weight: 700;
+  
   /* post form */
   --post-form-toggle-font-size: 22px;
   --post-form-toggle-font-weight: 700;
@@ -266,6 +306,10 @@
   /* board nav */
   --boardnav-font-size: 9pt;
   --boardnav-separator-color: #c5c8c6;
+  --boardnav-desktop-link-text-color: #81a2be;
+  --boardnav-desktop-link-text-color-hover: #5f89ac;
+  --boardnav-desktop-link-text-decoration: none;
+  --boardnav-desktop-link-text-decoration-hover: none;
   --boardnav-mobile-background-color: #1d1f21;
   --boardnav-mobile-border-bottom: 2px solid #282a2e;
   --boardnav-mobile-font-size: 10px;
@@ -299,6 +343,12 @@
   --post-link-text-color-hover: #5f89ac;
   --post-link-text-decoration-hover: underline;
 
+  /* post */
+  --post-subject-text-color: #b294bb;
+  --post-subject-font-weight: 700;
+  --post-name-text-color: #c5c8c6;
+  --post-name-font-weight: 700;
+
   /* post form */
   --post-form-toggle-font-size: 22px;
   --post-form-toggle-font-weight: 700;
@@ -320,6 +370,10 @@
   /* board nav */
   --boardnav-font-size: 9pt;
   --boardnav-separator-color: #333;
+  --boardnav-desktop-link-text-color: #f60;
+  --boardnav-desktop-link-text-color-hover: #f30;
+  --boardnav-desktop-link-text-decoration: none;
+  --boardnav-desktop-link-text-decoration-hover: none;
   --boardnav-mobile-background-color: #ddd;
   --boardnav-mobile-border-bottom: 2px solid #ccc;
   --boardnav-mobile-font-size: 10px;
@@ -353,6 +407,12 @@
   --post-link-text-color-hover: #f30;
   --post-link-text-decoration-hover: underline;
 
+  /* post */
+  --post-subject-text-color: #111;
+  --post-subject-font-weight: 700;
+  --post-name-text-color: #004a99;
+  --post-name-font-weight: 700;
+
   /* post form */
   --post-form-toggle-font-size: 22px;
   --post-form-toggle-font-weight: 700;