From 75badd2845e471cf54c34d11a2a43dee87df414a Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Sun, 15 Jan 2023 13:46:35 +0100
Subject: [PATCH] display name and nip05

---
 src/element/ProfileImage.css | 14 +++++++++-----
 src/element/ProfileImage.js  | 13 +++++++------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/element/ProfileImage.css b/src/element/ProfileImage.css
index 85268363..31b24614 100644
--- a/src/element/ProfileImage.css
+++ b/src/element/ProfileImage.css
@@ -17,14 +17,18 @@
 
 .pfp a:hover {
     text-decoration: underline;
+    text-decoration-color: var(--gray-superlight);
+}
+
+.pfp .profile-name {
+  display: flex;
+  flex-direction: column;
+  font-weight: bold;
+  margin-bottom: .2em;
 }
 
 .pfp .nip05 {
   font-size: 16px;
   margin: 0;
-}
-
-.pfp .profile-name {
-  display: flex;
-  flex-direction: row;
+  margin-top: -.2em;
 }
diff --git a/src/element/ProfileImage.js b/src/element/ProfileImage.js
index b86f796c..e4feeb77 100644
--- a/src/element/ProfileImage.js
+++ b/src/element/ProfileImage.js
@@ -27,17 +27,18 @@ export default function ProfileImage({ pubkey, subHeader, showUsername = true, c
         <div className={`pfp ${className}`}>
             <LazyImage src={hasImage ? user.picture : Nostrich} onClick={() => navigate(link ?? profileLink(pubkey))} />
             {showUsername && (<div className="f-grow">
-                <div className="profile-name">
-                  <Link key={pubkey} to={link ?? profileLink(pubkey)}>
-                    {user?.nip05 ? (
+                <Link key={pubkey} to={link ?? profileLink(pubkey)}>
+                  <div className="profile-name">
+                    <div>{name}</div>
+                    {user?.nip05 && (
                         <Nip05
                           nip05={user.nip05}
                           pubkey={user.pubkey}
                           defaultUsername={user.display_name || user.name}
                         />
-                      ): name}
-                  </Link>
-                </div>
+                      )}
+                  </div>
+                </Link>
                 {subHeader ? <>{subHeader}</> : null}
             </div>
             )}