profile improvements

src/element/ProfileImage.js

@@ -6,9 +6,7 @@ import { Link, useNavigate } from "react-router-dom";
 import useProfile from "../feed/ProfileFeed";
 import { profileLink } from "../Util";
 
-export default function ProfileImage(props) {
-    const pubkey = props.pubkey;
-    const subHeader = props.subHeader;
+export default function ProfileImage({ pubkey, subHeader, showUsername = true }) {
     const navigate = useNavigate();
     const user = useProfile(pubkey);
 
@@ -25,10 +23,12 @@ export default function ProfileImage(props) {
     return (
         <div className="pfp">
             <img src={hasImage ? user.picture : Nostrich} onClick={() => navigate(profileLink(pubkey))} />
-            <div>
+            {showUsername && (
+              <div>
                 <Link key={pubkey} to={profileLink(pubkey)}>{name}</Link>
                 {subHeader ? <div>{subHeader}</div> : null}
-            </div>
+              </div>
+            )}
         </div>
     )
 }

src/pages/Layout.css

@@ -1,3 +1,7 @@
 .notifications {
     margin-right: 10px;
-}
+}
+
+.unread-count {
+  margin-left: .2em;
+}

src/pages/Layout.js

@@ -54,14 +54,18 @@ export default function Layout(props) {
     }
 
     function accountHeader() {
-        const unreadNotifications = notifications?.filter(a => (a.created_at * 1000) > readNotifications).length ?? 0;
+        const unreadNotifications = notifications?.filter(a => (a.created_at * 1000) > readNotifications).length;
         return (
             <>
                 <div className="btn btn-rnd notifications" onClick={(e) => goToNotifications(e)}>
                     <FontAwesomeIcon icon={faBell} size="xl" />
-                    {unreadNotifications}
+                    {unreadNotifications !== 0 && (
+                      <span className="unread-count">
+                        {unreadNotifications}
+                      </span>
+                    )}
                 </div>
-                <ProfileImage pubkey={key} />
+                <ProfileImage pubkey={key} showUsername={false} />
             </>
         )
     }

src/pages/ProfilePage.css

@@ -18,6 +18,10 @@
     margin: 0;
 }
 
+.profile .avatar-wrapper {
+  margin: 10px;
+}
+
 .profile .avatar {
     width: 256px;
     height: 256px;
@@ -25,6 +29,20 @@
     border-radius: 100%;
 }
 
+.profile .details {
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
+.profile .website {
+    margin-bottom: 10px;
+}
+
+.profile .website::before {
+    content: '🔗 ';
+    font-size: 10px;
+}
+
 @media(max-width: 720px) {
     .profile {
         flex-direction: column;

src/pages/ProfilePage.js

@@ -40,7 +40,12 @@ export default function ProfilePage() {
                 </div>
                 {user?.nip05 && <Nip05 nip05={user.nip05} pubkey={user.pubkey} />}
                 <p>{extractLinks([user?.about])}</p>
-                {user?.website ? <a href={user?.website} target="_blank" rel="noreferrer">{user?.website}</a> : null}
+
+                {user?.website && (
+                  <div className="website">
+                    <a href={user.website} target="_blank" rel="noreferrer">{user.website}</a>
+                  </div>
+                )}
 
                 {lnurl ? <div className="flex">
                     <div className="btn" onClick={(e) => setShowLnQr(true)}>
@@ -56,12 +61,12 @@ export default function ProfilePage() {
     return (
         <>
             <div className="profile flex">
-                <div>
+                <div className="avatar-wrapper">
                     <div style={{ backgroundImage: `url(${(user?.picture?.length ?? 0) === 0 ? Nostrich : user?.picture})` }} className="avatar">
                     </div>
                 </div>
-                <div className="f-grow">
-                    {details()}
+                <div className="f-grow details">
+                  {details()}
                 </div>
             </div>
             <div className="tabs">

src/pages/SettingsPage.css

@@ -3,8 +3,9 @@
     width: 256px;
     height: 256px;
     background-size: cover;
-    border-radius: 10px;
+    border-radius: 100%;
     cursor: pointer;
+    margin-bottom: 20px;
 }
 
 .settings .avatar .edit {