Add verification check to avatars

src/components/Avatar/Avatar.module.scss

@@ -31,7 +31,6 @@
   bottom: 0px;
   width: 15px;
   height: 15px;
-  background-color: var(--background-site);
   border-radius: 50%;
 }
 
@@ -98,8 +97,6 @@
 
   .iconBackground {
     @include iconBackground;
-    bottom: 0px;
-    right: 0px;
   }
 }
 
@@ -115,8 +112,6 @@
 
   .iconBackground {
     @include iconBackground;
-    bottom: 0px;
-    right: 0px;
   }
 }
 
@@ -132,8 +127,6 @@
 
   .iconBackground {
     @include iconBackground;
-    bottom: 0px;
-    right: 0px;
   }
 }
 

src/components/Avatar/Avatar.tsx

@@ -2,14 +2,15 @@ import { Component, createMemo, createSignal, Show } from 'solid-js';
 import defaultAvatar from '../../assets/icons/default_nostrich.svg';
 import { useMediaContext } from '../../contexts/MediaContext';
 import { getMediaUrl } from '../../lib/media';
-import { MediaSize } from '../../types/primal';
+import { MediaSize, PrimalUser } from '../../types/primal';
+import VerificationCheck from '../VerificationCheck/VerificationCheck';
 
 import styles from './Avatar.module.scss';
 
 const Avatar: Component<{
   src: string | undefined,
   size?: "xxs" | "xss" | "xs" | "vs" | "sm" | "md" | "lg" | "xl" | "xxl",
-  verified?: string,
+  user?: PrimalUser,
   highlightBorder?: boolean,
 }> = (props) => {
 
@@ -109,9 +110,9 @@ const Avatar: Component<{
           <img src={imageSrc()} alt="avatar" onerror={imgError}/>
         </div>
       </Show>
-      <Show when={props.verified}>
+      <Show when={props.user}>
         <div class={styles.iconBackground}>
-          <div class={styles.verifiedIcon}></div>
+          <VerificationCheck user={props.user} />
         </div>
       </Show>
     </div>

src/components/NewNote/NewNote.tsx

@@ -20,7 +20,7 @@ const NewNote: Component<{ onSuccess: (note: SendNoteResult) => void}> = (props)
               <Avatar
                 src={activeUser()?.picture}
                 size="md"
-                verified={activeUser()?.nip05}
+                user={activeUser()}
               />
             </div>
             <div class={styles.rightSide}>

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

@@ -55,6 +55,7 @@
         overflow: hidden;
         max-width: 360px;
         color: var(--text-primary);
+        margin-right: 2px;
       }
       .time{
         margin: 0px 2px;

src/components/PeopleList/PeopleList.tsx

@@ -23,7 +23,7 @@ const PeopleList: Component<{ people: PrimalUser[], label: string}> = (props) =>
                   <Avatar
                     src={person?.picture}
                     size="md"
-                    verified={person?.nip05}
+                    user={person}
                   />
                 </div>
                 <div class={styles.content}>

src/components/ProfileWidget/ProfileWidget.tsx

@@ -21,7 +21,7 @@ const ProfileWidget: Component = () => {
             <Avatar
               size="vs"
               src={activeUser()?.picture}
-              verified={activeUser()?.nip05}
+              user={activeUser()}
             />
           </div>
           <div class={styles.userInfo}>

src/components/ReplyToNote/ReplyToNote.tsx

@@ -89,7 +89,7 @@ const ReplyToNote: Component<{ note: PrimalNote, onNotePosted?: (note: SendNoteR
             <Avatar
               src={activeUser()?.picture}
               size="md"
-              verified={activeUser()?.nip05}
+              user={activeUser()}
             />
           </div>
           <div class={styles.rightSideClosed}>
@@ -117,7 +117,7 @@ const ReplyToNote: Component<{ note: PrimalNote, onNotePosted?: (note: SendNoteR
             <Avatar
               src={activeUser()?.picture}
               size="md"
-              verified={activeUser()?.nip05}
+              user={activeUser()}
             />
           </div>
           <div class={styles.rightSide}>

src/components/VerificationCheck/VerificationCheck.module.scss

@@ -3,7 +3,6 @@
   width: 100%;
   height: 100%;
   display: inline-block;
-  margin-inline: 2px;
   background-color: var(--text-tertiary-2);
   -webkit-mask: url(../../assets/icons/verified.svg) no-repeat 0 / 100%;
   mask: url(../../assets/icons/verified.svg) no-repeat 0 / 100%;
@@ -12,15 +11,15 @@
 .verificationIcon {
   width: 15px;
   height: 15px;
-  display: inline-block;
   position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .verifiedIconPrimal {
   width: 100%;
   height: 100%;
-  display: inline-block;
-  margin-inline: 2px;
   background: var(--brand-gradient);
   -webkit-mask: url(../../assets/icons/verified.svg) no-repeat 0 / 100%;
   mask: url(../../assets/icons/verified.svg) no-repeat 0 / 100%;
@@ -31,7 +30,8 @@
   height: 11px;
   position: absolute;
   top: 2px;
-  left: 4px;
+  left: 2px;
   border-radius: 50%;
   background-color: white;
+  position: absolute;
 }

src/components/VerificationCheck/VerificationCheck.tsx

@@ -32,7 +32,13 @@ const VerificationCheck: Component<{ user: PrimalUser | undefined }> = (props) =
   })
 
   return (
-    <Show when={isVerified()}>
+    <Show
+      when={isVerified()}
+      fallback={
+        <div class={styles.verificationIcon}>
+        </div>
+      }
+    >
       <Show
         when={isVerifiedByPrimal()}
         fallback={