NIP05 badge styling

src/components/Bech32Label.vue

@@ -47,7 +47,7 @@ export default {
     opacity: .9;
   }
   &-value {
-    font-weight: 500;
+    font-weight: 600;
   }
 }
 </style>

src/components/MainMenu/ProfilePopup.vue

@@ -7,7 +7,7 @@
       <div class="menu-profile-items">
         <div class="profile-info">
           <p>
-            <UserName :pubkey="pubkey" two-line />
+            <UserName :pubkey="pubkey" two-line show-verified />
           </p>
         </div>
         <div class="more">

src/components/Post/HeroPost.vue

@@ -8,7 +8,7 @@
         <UserAvatar :pubkey="note.author" clickable />
       </div>
       <div class="post-author-name">
-        <UserName :pubkey="note.author" clickable two-line />
+        <UserName :pubkey="note.author" clickable two-line show-verified />
       </div>
     </div>
     <div class="post-content">

src/components/Post/ListPost.vue

@@ -16,7 +16,7 @@
     <div class="post-content">
       <div class="post-content-header">
         <p>
-          <UserName :pubkey="note.author" clickable @click.stop />
+          <UserName :pubkey="note.author" clickable show-verified @click.stop />
           <span>&#183;</span>
           <span class="created-at">{{ formatPostDate(note.createdAt) }}</span>
         </p>

src/components/User/Nip05Badge.vue

@@ -40,7 +40,7 @@ export default {
       if (!this.profile?.nip05.url) return
       return this.profile.nip05.url
         .split('@')
-        .filter(part => part !== '_' && part !== this.profile.name)
+        .filter(part => part !== '_' && part?.toLowerCase() !== this.profile.name?.toLowerCase())
         .join('@')
     }
   },
@@ -58,6 +58,8 @@ export default {
 <style lang="scss" scoped>
 .nip05-badge {
   font-size: 12px;
+  display: inline-flex;
+  align-items: center;
   &-text {
     margin-left: 2px;
   }

src/components/User/UserCard.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="user-card">
     <UserAvatar :pubkey="pubkey" :clickable="clickable" />
-    <UserName :pubkey="pubkey" :clickable="clickable" class="username" two-line />
+    <UserName :pubkey="pubkey" :clickable="clickable" class="username" two-line show-verified />
     <FollowButton v-if="followButton" :pubkey="pubkey" />
   </div>
 </template>

src/components/User/UserName.vue

@@ -3,19 +3,17 @@
     class="username"
     :class="{'two-line': twoLine, clickable, header}"
   >
+    <span class="name">
       <a @click="clickable && goToProfile(pubkey)">
-      <span v-if="profile?.name" class="name">
+        <span v-if="profile?.name">
           {{ profile.name }}
         </span>
-<!--      <q-icon v-if="showFollowing && isFollow" name="visibility" color="secondary">-->
+        <Bech32Label v-else prefix="npub" :hex="pubkey" />
-<!--        <q-tooltip>-->
-<!--          following-->
-<!--        </q-tooltip>-->
-<!--      </q-icon>-->
-      <Bech32Label v-if="twoLine || !profile?.name" prefix="npub" :hex="pubkey" class="pubkey" />
       </a>
+      <Nip05Badge v-if="showVerified" :pubkey="pubkey" :size="header ? '18px' : '14px'" class="verified-badge" />
+    </span>
 
-    <Nip05Badge :pubkey="pubkey" />
+    <Bech32Label v-if="twoLine && profile?.name" prefix="npub" :hex="pubkey" class="pubkey" />
   </span>
 </template>
 
@@ -48,13 +46,9 @@ export default {
       type: Boolean,
       default: false,
     },
-    showFollowing: {
-      type: Boolean,
-      default: false
-    },
     showVerified: {
       type: Boolean,
-      default: true
+      default: false
     },
   },
   setup() {
@@ -66,10 +60,6 @@ export default {
     profile() {
       return this.nostr.getProfile(this.pubkey)
     },
-    isFollow() {
-      // FIXME
-      return false
-    },
   },
 }
 </script>
@@ -79,35 +69,30 @@ export default {
 
 .username {
   .name {
-    font-weight: bold;
+    display: inline-flex;
+    align-items: center;
+    a {
+      font-weight: 600;
     }
-  > span + span {
+    .verified-badge {
-    margin-left: 8px;
+      margin-left: 4px;
+    }
+  }
+  .pubkey {
+    color: $color-dark-gray;
+    display: block;
   }
   &.two-line {
     display: block;
-    > a > span {
-      display: block;
-      margin-left: 0;
-    }
-    .pubkey:not(:first-child) {
-      color: $color-dark-gray;
-      .pubkey-value {
-        font-weight: normal;
-      }
-    }
   }
   &.clickable {
     cursor: pointer;
-    .name:hover {
+    .name a:hover {
-      text-decoration: underline;
-    }
-    .pubkey:first-child:hover {
       text-decoration: underline;
     }
   }
   &.header {
-    .name, .pubkey:first-child {
+    .name {
       font-size: 1.5rem;
     }
   }

src/pages/profile/Profile.vue

@@ -15,7 +15,7 @@
             <strong>{{ contacts?.length || 0 }}</strong> Following
           </a>
           <a @click="goToFollowers('followers')">
-            <strong>{{ `${followers?.length}+` || 0 }}</strong> Followers
+            <strong>{{ followers?.length ? `${followers?.length}+` : 0 }}</strong> Followers
           </a>
         </p>
       </div>
@@ -176,7 +176,7 @@ export default defineComponent({
     }
     &-content {
       flex-grow: 1;
-      .username {
+      > p.username {
         display: flex;
         > span:first-child {
           flex-grow: 1;