Thread modifications

src/components/Note/Note.module.scss

@@ -71,7 +71,7 @@
       .message {
         color: var(--text-primary);
         word-break: break-word;
-        font-size: 15px;
+        font-size: 16px;
         font-weight: 400px;
         line-height: 20px;
         margin-top: 4px;

src/components/Note/NoteHeader/NoteHeader.module.scss

@@ -57,6 +57,10 @@
         max-width: 460px;
         color: var(--text-primary);
         margin-right: 2px;
+
+        &.primary {
+          font-weight: 700;
+        }
       }
       .time{
         margin: 0px;

src/components/Note/NoteHeader/NoteHeader.tsx

@@ -2,7 +2,7 @@ import { Component, createEffect, createSignal, Show } from 'solid-js';
 import { MenuItem, NostrRelaySignedEvent, PrimalNote } from '../../../types/primal';
 
 import styles from './NoteHeader.module.scss';
-import { date } from '../../../lib/dates';
+import { date, longDate, shortDate } from '../../../lib/dates';
 import { nip05Verification, truncateNpub, userName } from '../../../stores/profile';
 import { useIntl } from '@cookbook/solid-intl';
 import { useToastContext } from '../../Toaster/Toaster';
@@ -20,7 +20,12 @@ import ConfirmModal from '../../ConfirmModal/ConfirmModal';
 import { hexToNpub } from '../../../lib/keys';
 import { hookForDev } from '../../../lib/devTools';
 
-const NoteHeader: Component<{ note: PrimalNote, openCustomZap?: () => void, id?: string }> = (props) => {
+const NoteHeader: Component<{
+  note: PrimalNote,
+  openCustomZap?: () => void,
+  id?: string,
+  primary?: boolean,
+}> = (props) => {
 
   const intl = useIntl();
   const toaster = useToastContext();
@@ -211,7 +216,7 @@ const NoteHeader: Component<{ note: PrimalNote, openCustomZap?: () => void, id?:
         <div class={styles.postInfo}>
           <div class={styles.userInfo}>
 
-            <span class={styles.userName}>
+            <span class={`${styles.userName} ${props.primary ? styles.primary : ''}`}>
               {authorName()}
             </span>
 
@@ -224,7 +229,9 @@ const NoteHeader: Component<{ note: PrimalNote, openCustomZap?: () => void, id?:
               class={styles.time}
               title={date(props.note.post?.created_at).date.toLocaleString()}
             >
-              {date(props.note.post?.created_at).label}
+              {props.primary ?
+                longDate(props.note.post?.created_at) :
+                date(props.note.post?.created_at).label}
             </span>
           </div>
           <Show

src/components/Note/NotePrimary/NotePrimary.module.scss

@@ -12,7 +12,6 @@
     grid-area: content;
     display: flex;
     flex-direction: column;
-    margin-top: 12px;
     margin-left: 2px;
     cursor: text;
 
@@ -22,9 +21,9 @@
       grid-area: message;
       color: var(--text-primary);
       word-break: break-word;
-      font-size: 16px;
+      font-size: 18px;
       font-weight: 400;
-      line-height: 20px;
+      line-height: 24px;
       width: 100%;
       margin-bottom: 17px;
 

src/components/Note/NotePrimary/NotePrimary.tsx

@@ -18,7 +18,7 @@ const NotePrimary: Component<{ note: PrimalNote, id?: string }> = (props) => {
       data-event-bech32={props.note.post.noteId}
     >
       <div class={styles.border}></div>
-      <NoteHeader note={props.note} />
+      <NoteHeader note={props.note} primary={true} />
       <div class={styles.content}>
 
         <div class={styles.message}>

src/index.scss

@@ -191,6 +191,11 @@ a {
   overflow: hidden !important;
 }
 
+.noteimage {
+  margin-block: 12px !important;
+  display: block !important;
+}
+
 .imageGrid {
   margin-block: 12px !important;
   display: grid;

src/lib/dates.ts

@@ -8,6 +8,16 @@ export const shortDate = (timestamp: number | undefined) => {
   return dtf.format(date);
 };
 
+export const longDate = (timestamp: number | undefined) => {
+  if (!timestamp || timestamp < 0) {
+    return '';
+  }
+  const date = new Date(timestamp * 1000);
+  const dtf = new Intl.DateTimeFormat('en-US', { dateStyle: 'full', timeStyle: 'short'});
+
+  return dtf.format(date);
+};
+
 export const date = (postTimestamp: number, style: Intl.RelativeTimeFormatStyle = 'short', since?: number) => {
   const today = since ?? Math.floor((new Date()).getTime() / 1000);
   const date = new Date(postTimestamp * 1000);