diff --git a/src/element/ProfileImage.js b/src/element/ProfileImage.js
index 977d574bf..b75c84278 100644
--- a/src/element/ProfileImage.js
+++ b/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 (
navigate(profileLink(pubkey))} />
-
+ {showUsername && (
+
{name}
{subHeader ?
{subHeader}
: null}
-
+
+ )}
)
}
\ No newline at end of file
diff --git a/src/pages/Layout.css b/src/pages/Layout.css
index 20ef3ef7c..e4f7bfa9a 100644
--- a/src/pages/Layout.css
+++ b/src/pages/Layout.css
@@ -1,3 +1,7 @@
.notifications {
margin-right: 10px;
-}
\ No newline at end of file
+}
+
+.unread-count {
+ margin-left: .2em;
+}
diff --git a/src/pages/Layout.js b/src/pages/Layout.js
index 21eb82224..c7d5fee85 100644
--- a/src/pages/Layout.js
+++ b/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 (
<>
goToNotifications(e)}>
- {unreadNotifications}
+ {unreadNotifications !== 0 && (
+
+ {unreadNotifications}
+
+ )}
-
+
>
)
}
diff --git a/src/pages/ProfilePage.css b/src/pages/ProfilePage.css
index 87241966d..de0b09187 100644
--- a/src/pages/ProfilePage.css
+++ b/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;
diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js
index c27fae3ba..13810a61e 100644
--- a/src/pages/ProfilePage.js
+++ b/src/pages/ProfilePage.js
@@ -40,7 +40,12 @@ export default function ProfilePage() {
{user?.nip05 && }
{extractLinks([user?.about])}
- {user?.website ? {user?.website} : null}
+
+ {user?.website && (
+
+ )}
{lnurl ?
setShowLnQr(true)}>
@@ -56,12 +61,12 @@ export default function ProfilePage() {
return (
<>
-
+
-
- {details()}
+
+ {details()}
diff --git a/src/pages/SettingsPage.css b/src/pages/SettingsPage.css
index a78f5c574..b747e050b 100644
--- a/src/pages/SettingsPage.css
+++ b/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 {