refactor: use old style when no banner present

src/pages/ProfilePage.css

@@ -136,6 +136,19 @@
     right: 20px;
 }
 
+.profile .message-button {
+    position: absolute;
+    top: -30px;
+    right: 80px;
+}
+
+.profile .no-banner .follow-button {
+  right: 0px;
+}
+.profile .no-banner .message-button {
+  right: 60px;
+}
+
 .tabs {
     display: flex;
     justify-content: flex-start;
@@ -155,3 +168,37 @@
 .tab.active {
     border-bottom: 3px solid var(--highlight);
 }
+
+.profile .no-banner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+}
+
+.profile .no-banner .avatar {
+    height: 256px;
+    width: 256px;
+    margin-bottom: 30px;
+}
+
+.profile .no-banner .avatar-wrapper, .profile .no-banner .details-wrapper {
+  margin: 0 auto;
+}
+
+@media (min-width: 720px) {
+  .profile .no-banner {
+      width: 100%;
+      flex-direction: row;
+      justify-content: space-around;
+      margin-top: 21px;
+  }
+  .profile .no-banner .avatar-wrapper {
+      margin: auto 10px;
+  }
+  .profile .no-banner .details-wrapper {
+      margin-left: 10px;
+      margin-top: 21px;
+  }
+}

src/pages/ProfilePage.js

@@ -48,14 +48,14 @@ export default function ProfilePage() {
     function username() {
       return (
           <div className="name">
-               <h2>{user?.display_name || user?.name}</h2>
+               <h2>{user?.display_name || user?.name || 'Nostrich'}</h2>
                <Copy text={params.id} />
                {user?.nip05 && <Nip05 name={name} domain={domain} isVerified={isVerified} couldNotVerify={couldNotVerify} />}
           </div>
       )
     }
 
-    function details() {
+    function bio() {
         const lnurl = extractLnAddress(user?.lud16 || user?.lud06 || "");
         return (
             <div className="details">
@@ -100,29 +100,50 @@ export default function ProfilePage() {
         return null;
     }
 
+    function avatar() {
+      return (
+         <div className="avatar-wrapper">
+             <div style={{ '--img-url': backgroundImage }} className="avatar" data-domain={isVerified ? domain : ''}>
+             </div>
+         </div>
+      )
+    }
+
+    function userDetails() {
+      return (
+         <div className="details-wrapper">
+             {username()}
+             {isMe ? (
+                 <div className="btn btn-icon follow-button" onClick={() => navigate("/settings")}>
+                     <FontAwesomeIcon icon={faGear} size="lg" />
+                 </div>
+             ) : <>
+                     <div className="btn message-button" onClick={() => navigate(`/messages/${hexToBech32("npub", id)}`)}>
+                         <FontAwesomeIcon icon={faEnvelope} size="lg" />
+                     </div>
+                     <FollowButton pubkey={id} />
+                 </>
+             }
+             {bio()}
+         </div>
+      )
+    }
+
     return (
         <>
             <div className="profile flex">
-                <img alt="banner" className="banner" src={user?.banner ? user.banner : avatarUrl} />
+                {user?.banner && <img alt="banner" className="banner" src={user.banner} /> }
-                <div className="avatar-wrapper">
+                {user?.banner ? (
-                    <div style={{ '--img-url': backgroundImage }} className="avatar" data-domain={isVerified ? domain : ''}>
+                  <>
-                    </div>
+                     {avatar()}
-                </div>
+                     {userDetails()}
-                <div className="details-wrapper">
+                  </>
-                    {username()}
+                ) : (
-                    {isMe ? (
+                  <div className="no-banner">
-                        <div className="btn btn-icon follow-button" onClick={() => navigate("/settings")}>
+                     {avatar()}
-                            <FontAwesomeIcon icon={faGear} size="lg" />
+                     {userDetails()}
-                        </div>
+                  </div>
-                    ) : <>
+                )}
-                            <div className="btn mr5" onClick={() => navigate(`/messages/${hexToBech32("npub", id)}`)}>
-                                <FontAwesomeIcon icon={faEnvelope} size="lg" />
-                            </div>
-                            <FollowButton pubkey={id} />
-                        </>
-                    }
-                    {details()}
-                </div>
             </div>
             <div className="tabs">
                 {