From c847f355b9c8cf32547d0ec1dab3df17d9df6ee1 Mon Sep 17 00:00:00 2001
From: Bojan Mojsilovic <bmojsilovic@itekako.com>
Date: Mon, 15 Jan 2024 15:49:43 +0100
Subject: [PATCH] New thread primary note styling

---
 src/components/Note/Note.module.scss          |  2 +-
 .../Note/NoteFooter/NoteFooter.module.scss    |  6 +-
 .../Note/NoteHeader/NoteHeader.module.scss    | 20 ++++--
 src/components/Note/NoteHeader/NoteHeader.tsx | 66 +++++--------------
 .../Note/NotePrimary/NotePrimary.module.scss  | 13 ++--
 .../Note/NotePrimary/NotePrimary.tsx          |  2 +-
 .../VerificationCheck/VerificationCheck.tsx   |  5 +-
 src/lib/profile.ts                            |  2 +
 src/pages/Thread.tsx                          |  2 +-
 9 files changed, 46 insertions(+), 72 deletions(-)

diff --git a/src/components/Note/Note.module.scss b/src/components/Note/Note.module.scss
index 5cb2217..4c017df 100644
--- a/src/components/Note/Note.module.scss
+++ b/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;
diff --git a/src/components/Note/NoteFooter/NoteFooter.module.scss b/src/components/Note/NoteFooter/NoteFooter.module.scss
index 18f1818..8b145a9 100644
--- a/src/components/Note/NoteFooter/NoteFooter.module.scss
+++ b/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;
     }
 
diff --git a/src/components/Note/NoteHeader/NoteHeader.module.scss b/src/components/Note/NoteHeader/NoteHeader.module.scss
index c77eec1..1e36780 100644
--- a/src/components/Note/NoteHeader/NoteHeader.module.scss
+++ b/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);
diff --git a/src/components/Note/NoteHeader/NoteHeader.tsx b/src/components/Note/NoteHeader/NoteHeader.tsx
index a041a75..9830be4 100644
--- a/src/components/Note/NoteHeader/NoteHeader.tsx
+++ b/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,18 +215,10 @@ const NoteHeader: Component<{ note: PrimalNote, openCustomZap?: () => void, id?:
               {authorName()}
             </span>
 
-            <VerificationCheck user={props.note.user} />
-
-            <Show
-              when={props.note.user?.nip05}
-            >
-              <span
-                class={styles.verification}
-                title={props.note.user?.nip05}
-              >
-                {nip05Verification(props.note.user)}
-              </span>
-            </Show>
+            <VerificationCheck
+              user={props.note.user}
+              fallback={<div class={styles.ellipsisIcon}></div>}
+            />
 
             <span
               class={styles.time}
@@ -235,43 +227,19 @@ const NoteHeader: Component<{ note: PrimalNote, openCustomZap?: () => void, id?:
               {date(props.note.post?.created_at).label}
             </span>
           </div>
-
+          <Show
+            when={props.note.user?.nip05}
+          >
+            <span
+              class={styles.verification}
+              title={props.note.user?.nip05}
+            >
+              {nip05Verification(props.note.user)}
+            </span>
+          </Show>
         </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>
   )
 }
diff --git a/src/components/Note/NotePrimary/NotePrimary.module.scss b/src/components/Note/NotePrimary/NotePrimary.module.scss
index 04075c1..316acd0 100644
--- a/src/components/Note/NotePrimary/NotePrimary.module.scss
+++ b/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-top: none;
-  border-bottom: none;
+  border: none;
 
   .content {
     grid-area: content;
     display: flex;
     flex-direction: column;
-    margin-top: 21px;
-    margin-left: 60px;
+    margin-top: 12px;
+    margin-left: 12px;
 
 
     .message {
@@ -23,8 +21,9 @@
       grid-area: message;
       color: var(--text-primary);
       word-break: break-word;
-      font-size: 16px;
-      line-height: 24px;
+      font-size: 17px;
+      font-weight: 300;
+      line-height: 20px;
       width: 100%;
       margin-bottom: 17px;
 
diff --git a/src/components/Note/NotePrimary/NotePrimary.tsx b/src/components/Note/NotePrimary/NotePrimary.tsx
index 95372dc..e6b51df 100644
--- a/src/components/Note/NotePrimary/NotePrimary.tsx
+++ b/src/components/Note/NotePrimary/NotePrimary.tsx
@@ -25,7 +25,7 @@ const NotePrimary: Component<{ note: PrimalNote, id?: string }> = (props) => {
           <ParsedNote note={props.note} />
         </div>
 
-        <NoteFooter note={props.note}/>
+        <NoteFooter note={props.note} />
       </div>
     </div>
   )
diff --git a/src/components/VerificationCheck/VerificationCheck.tsx b/src/components/VerificationCheck/VerificationCheck.tsx
index 561be2e..b065db7 100644
--- a/src/components/VerificationCheck/VerificationCheck.tsx
+++ b/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}
diff --git a/src/lib/profile.ts b/src/lib/profile.ts
index 467cbac..d364524 100644
--- a/src/lib/profile.ts
+++ b/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);
 
diff --git a/src/pages/Thread.tsx b/src/pages/Thread.tsx
index 77890fa..49dfdaa 100644
--- a/src/pages/Thread.tsx
+++ b/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()}>