New thread primary note styling

src/components/Note/Note.module.scss

@@ -198,7 +198,7 @@
     outline: none;
     display: flex;
     justify-content: center;
-    align-items: flex-start;
+    align-items: center;
 
     &:focus {
       outline: none;

src/components/Note/NoteFooter/NoteFooter.module.scss

@@ -11,14 +11,11 @@
 
 .footer {
   display: grid;
-  grid-template-columns: 128px 128px 128px 128px;
+  grid-template-columns: 128px 128px 128px 128px 1fr;
   position: relative;
   width: 100%;
 
   .context {
-    position: absolute;
-    top: 0;
-    right: 0;
     background: none;
     display: flex;
     justify-content: flex-end;
@@ -154,6 +151,7 @@
 
     .stat{
       min-width: 0px;
+      padding-right: 12px;
       margin-right: 0;
     }
 

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

@@ -14,7 +14,7 @@
   }
 
   .avatar {
-    margin-right: 12px;
+    margin-right: 8px;
 
     >a {
       text-decoration: none;
@@ -28,11 +28,13 @@
   }
   .postInfo {
     display: flex;
+    flex-direction: column;
     font-size: 14px;
     line-height: 16px;
     font-weight: 400;
     height: 48px;
-    justify-content: space-around;
+    align-items: flex-start;
+    justify-content: center;
 
     .verification {
       max-width: 470px;
@@ -57,12 +59,8 @@
         margin-right: 2px;
       }
       .time{
-        margin: 0px 2px;
+        margin: 0px;
         min-width: 80px;
-        &::before {
-          content: "|";
-          padding: 0px 2px;
-        }
       }
     }
     .replyingTo {
@@ -128,6 +126,14 @@
 
 }
 
+.ellipsisIcon {
+  width: 11px;
+  height: 14px;
+  background-color: var(--text-tertiary);
+  -webkit-mask: url(../../../assets/icons/ellipsis.svg) no-repeat center;
+  mask: url(../../../assets/icons/ellipsis.svg) no-repeat center;
+}
+
 @media only screen and (max-width: 720px) {
   .header {
     width: calc(100vw - 160px);

src/components/Note/NoteHeader/NoteHeader.tsx

@@ -14,7 +14,7 @@ import PrimalMenu from '../../PrimalMenu/PrimalMenu';
 import CustomZap from '../../CustomZap/CustomZap';
 import { broadcastEvent, sendNote } from '../../../lib/notes';
 import { useAccountContext } from '../../../contexts/AccountContext';
-import { reportUser } from '../../../lib/profile';
+import { isAccountVerified, reportUser } from '../../../lib/profile';
 import { APP_ID } from '../../../App';
 import ConfirmModal from '../../ConfirmModal/ConfirmModal';
 import { hexToNpub } from '../../../lib/keys';
@@ -203,7 +203,7 @@ const NoteHeader: Component<{ note: PrimalNote, openCustomZap?: () => void, id?:
             >
               <Avatar
                 user={props.note?.user}
-                size="sm"
+                size="vs"
                 highlightBorder={isVerifiedByPrimal()}
               />
             </A>
@@ -215,8 +215,18 @@ const NoteHeader: Component<{ note: PrimalNote, openCustomZap?: () => void, id?:
               {authorName()}
             </span>
 
-            <VerificationCheck user={props.note.user} />
+            <VerificationCheck
+              user={props.note.user}
+              fallback={<div class={styles.ellipsisIcon}></div>}
+            />
 
+            <span
+              class={styles.time}
+              title={date(props.note.post?.created_at).date.toLocaleString()}
+            >
+              {date(props.note.post?.created_at).label}
+            </span>
+          </div>
           <Show
             when={props.note.user?.nip05}
           >
@@ -227,52 +237,10 @@ const NoteHeader: Component<{ note: PrimalNote, openCustomZap?: () => void, id?:
               {nip05Verification(props.note.user)}
             </span>
           </Show>
-
-            <span
-              class={styles.time}
-              title={date(props.note.post?.created_at).date.toLocaleString()}
-            >
-              {date(props.note.post?.created_at).label}
-            </span>
         </div>
 
       </div>
     </div>
-
-      <div class={styles.contextMenu}>
-        <button
-          class={styles.contextButton}
-          onClick={openContextMenu}
-        >
-          <div class={styles.contextIcon} ></div>
-        </button>
-          <PrimalMenu
-            id={`note_context_${props.note.post.id}`}
-            items={noteContext}
-            hidden={!showContext()}
-          />
-      </div>
-
-      <ConfirmModal
-        open={confirmReportUser()}
-        description={intl.formatMessage(tActions.reportUserConfirm, { name: authorName() })}
-        onConfirm={() => {
-          doReportUser();
-          setConfirmReportUser(false);
-        }}
-        onAbort={() => setConfirmReportUser(false)}
-      />
-
-      <ConfirmModal
-        open={confirmMuteUser()}
-        description={intl.formatMessage(tActions.muteUserConfirm, { name: authorName() })}
-        onConfirm={() => {
-          doMuteUser();
-          setConfirmMuteUser(false);
-        }}
-        onAbort={() => setConfirmMuteUser(false)}
-      />
-    </div>
   )
 }
 

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

@@ -6,16 +6,14 @@
   padding: 12px;
   padding-top: 0;
   border-radius: 0;
-  border: 1px solid var(--devider);
+  border: none;
-  border-top: none;
-  border-bottom: none;
 
   .content {
     grid-area: content;
     display: flex;
     flex-direction: column;
-    margin-top: 21px;
+    margin-top: 12px;
-    margin-left: 60px;
+    margin-left: 12px;
 
 
     .message {
@@ -23,8 +21,9 @@
       grid-area: message;
       color: var(--text-primary);
       word-break: break-word;
-      font-size: 16px;
+      font-size: 17px;
-      line-height: 24px;
+      font-weight: 300;
+      line-height: 20px;
       width: 100%;
       margin-bottom: 17px;
 

src/components/VerificationCheck/VerificationCheck.tsx

@@ -1,6 +1,6 @@
 import styles from  "./VerificationCheck.module.scss";
 
-import { Component, createSignal, onMount, Show } from "solid-js";
+import { Component, createSignal, JSXElement, onMount, Show } from "solid-js";
 import { PrimalUser } from "../../types/primal";
 import { isAccountVerified } from "../../lib/profile";
 import { hookForDev } from "../../lib/devTools";
@@ -9,6 +9,7 @@ import { hookForDev } from "../../lib/devTools";
 const VerificationCheck: Component<{
   user: PrimalUser | undefined,
   large?: boolean,
+  fallback?: JSXElement,
   id?: string,
 }> = (props) => {
 
@@ -40,7 +41,7 @@ const VerificationCheck: Component<{
   return (
     <Show
       when={isVerified()}
-      fallback={<div class={styles.verificationFailed}></div>}
+      fallback={props.fallback}
     >
       <Show
         when={props.large}

src/lib/profile.ts

@@ -212,6 +212,8 @@ export const fetchKnownProfiles: (vanityName: string) => Promise<VanityProfiles>
 };
 
 export const isAccountVerified: (domain: string | undefined) => Promise<nip19.ProfilePointer | null> = async (domain: string | undefined) => {
+  if (!domain) return null;
+
   try {
     const profile = await nip05.queryProfile(domain);
 

src/pages/Thread.tsx

@@ -185,7 +185,7 @@ const Thread: Component = () => {
 
         <Show when={primaryNote()}>
           <div id="primary_note">
-            <Note
+            <NotePrimary
               note={primaryNote() as PrimalNote}
             />
             <Show when={account?.hasPublicKey()}>