Help fund the development of Snort
Snort is an open source project built by passionate people in their free time
diff --git a/src/Pages/Layout.css b/src/Pages/Layout.css
index 76462f49..d8664c1a 100644
--- a/src/Pages/Layout.css
+++ b/src/Pages/Layout.css
@@ -1,20 +1,37 @@
.logo {
cursor: pointer;
+ font-weight: bold;
+ font-size: 29px;
}
-.unread-count {
- width: 20px;
- height: 20px;
- border: 1px solid;
- border-radius: 100%;
- position: relative;
- padding: 3px;
- line-height: 1.5em;
- top: -10px;
- left: -10px;
- font-size: var(--font-size-small);
- background-color: var(--error);
- color: var(--note-bg);
- font-weight: bold;
- text-align: center;
+header {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ height: 72px;
+ padding: 0 12px;
+}
+
+header .pfp .avatar-wrapper {
+ margin-right: 0;
+}
+
+.header-actions {
+ display: flex;
+ flex-direction: row;
+}
+
+.header-actions .btn-rnd {
+ position: relative;
+}
+
+.header-actions .btn-rnd .has-unread {
+ background: var(--highlight);
+ border-radius: 100%;
+ width: 9px;
+ height: 9px;
+ position: absolute;
+ top: 0;
+ right: 0;
}
diff --git a/src/Pages/Layout.tsx b/src/Pages/Layout.tsx
index dffdc48a..4243189e 100644
--- a/src/Pages/Layout.tsx
+++ b/src/Pages/Layout.tsx
@@ -2,8 +2,8 @@ import "./Layout.css";
import { useEffect } from "react"
import { useDispatch, useSelector } from "react-redux";
import { Outlet, useNavigate } from "react-router-dom";
-import { faBell, faMessage } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Envelope from "Icons/Envelope"
+import Bell from "Icons/Bell"
import { RootState } from "State/Store";
import { init, setPreferences, UserPreferences } from "State/Login";
@@ -84,21 +84,17 @@ export default function Layout() {
const unreadNotifications = notifications?.filter(a => (a.created_at * 1000) > readNotifications).length;
const unreadDms = key ? totalUnread(dms, key) : 0;
return (
- <>
+
navigate("/messages")}>
-
+
+ {unreadDms > 0 && ( )}
- {unreadDms > 0 && (
- {unreadDms > 100 ? ">99" : unreadDms}
- )}
goToNotifications(e)}>
-
+
+ {unreadNotifications > 0 && ( )}
- {unreadNotifications > 0 && (
- {unreadNotifications > 100 ? ">99" : unreadNotifications}
- )}
- >
+
)
}
@@ -108,14 +104,14 @@ export default function Layout() {
return (
diff --git a/src/Pages/Login.tsx b/src/Pages/Login.tsx
index cf117b86..0768af51 100644
--- a/src/Pages/Login.tsx
+++ b/src/Pages/Login.tsx
@@ -85,24 +85,24 @@ export default function LoginPage() {
<>
Other Login Methods
-
doNip07Login()}>Login with Extension (NIP-07)
+
doNip07Login()}>Login with Extension (NIP-07)
>
)
}
return (
- <>
+
Login
setKey(e.target.value)} />
{error.length > 0 ?
{error} : null}
-
doLogin()}>Login
-
makeRandomKey()}>Generate Key
+
doLogin()}>Login
+
makeRandomKey()}>Generate Key
{altLogins()}
- >
+
);
-}
\ No newline at end of file
+}
diff --git a/src/Pages/MessagesPage.tsx b/src/Pages/MessagesPage.tsx
index 5142f016..f0936fb4 100644
--- a/src/Pages/MessagesPage.tsx
+++ b/src/Pages/MessagesPage.tsx
@@ -51,17 +51,17 @@ export default function MessagesPage() {
}
return (
- <>
+
Messages
-
markAllRead()}>Mark All Read
+
markAllRead()}>Mark All Read
{chats.sort((a, b) => {
return a.pubkey === myPubKey ? -1 :
b.pubkey === myPubKey ? 1 :
b.newestMessage - a.newestMessage
}).map(person)}
- >
+
)
}
@@ -122,4 +122,4 @@ export function extractChats(dms: RawEvent[], myPubKey: HexKey) {
newestMessage: newestMessage(dms, myPubKey, a)
} as DmChat;
})
-}
\ No newline at end of file
+}
diff --git a/src/Pages/NewUserPage.tsx b/src/Pages/NewUserPage.tsx
index f268856f..fdd8c61e 100644
--- a/src/Pages/NewUserPage.tsx
+++ b/src/Pages/NewUserPage.tsx
@@ -67,9 +67,9 @@ export default function NewUserPage() {
}
return (
- <>
+
{importTwitterFollows()}
{followSomebody()}
- >
+
);
}
\ No newline at end of file
diff --git a/src/Pages/ProfilePage.css b/src/Pages/ProfilePage.css
index 5479f191..a97143c3 100644
--- a/src/Pages/ProfilePage.css
+++ b/src/Pages/ProfilePage.css
@@ -1,26 +1,29 @@
.profile {
+ display: flex;
flex-direction: column;
+ align-items: flex-start;
}
.profile .banner {
- width: 100%;
- height: 210px;
- margin-bottom: -80px;
- object-fit: cover;
- mask-image: linear-gradient(to bottom, var(--bg-color) 60%, rgba(0,0,0,0));
- -webkit-mask-image: linear-gradient(to bottom, var(--bg-color) 60%, rgba(0,0,0,0));
- z-index: 0;
+ width: 100%;
+ height: 160px;
+ object-fit: cover;
+ margin-bottom: -60px;
+ mask-image: linear-gradient(to bottom, var(--bg-color) 60%, rgba(0,0,0,0));
+ -webkit-mask-image: linear-gradient(to bottom, var(--bg-color) 60%, rgba(0,0,0,0));
+ z-index: 0;
}
-@media (min-width: 720px) {
- .profile .banner {
- width: 100%;
- max-width: 720px;
- height: 300px;
- margin-bottom: -120px;
- }
+.profile .profile-wrapper {
+ margin: 0 16px;
+ width: calc(100% - 32px);
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ position: relative;
}
+
.profile p {
white-space: pre-wrap;
}
@@ -29,35 +32,37 @@
margin: 0;
}
-@media (min-width: 720px) {
- .profile .banner {
- width: 100%;
- max-width: 720px;
- height: 300px;
- margin-bottom: -120px;
- }
+.profile .nip05 {
+ display: flex;
+ margin: 4px 0 12px 0;
+}
+
+.profile .nip05 .nick {
+ font-weight: normal;
+ color: var(--gray-light);
}
.profile .avatar-wrapper {
- align-self: flex-start;
- z-index: 1;
- margin-left: 4px;
+ z-index: 1;
+}
+
+.profile .avatar-wrapper .avatar {
+ width: 120px;
+ height: 120px;
}
.profile .name {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
-}
-
-.profile .name h2 {
- margin: 0;
+ display: flex;
+ flex-direction: column;
}
.profile .details {
- max-width: 680px;
width: 100%;
margin-top: 12px;
+ background-color: var(--note-bg);
+ padding: 12px 16px;
+ margin: 0 auto;
+ border-radius: 16px;
}
.profile .details p {
@@ -76,129 +81,63 @@
.profile .btn-icon {
color: var(--font-color);
padding: 6px;
- margin-left: 4px;
}
.profile .details-wrapper {
display: flex;
flex-direction: column;
- align-items: flex-start;
justify-content: space-between;
- position: relative;
- width: 100%;
- margin-left: 4px;
-}
-
-.profile .copy .body { font-size: 12px }
-
-@media (min-width: 360px) {
- .profile .copy .body { font-size: 14px }
- .profile .details-wrapper, .profile .avatar-wrapper { margin-left: 21px; }
- .profile .details { width: calc(100% - 21px); }
-}
-
-@media (min-width: 720px) {
- .profile .details-wrapper, .profile .avatar-wrapper { margin-left: 30px; }
- .profile .details { width: calc(100% - 30px); }
-}
-
-.profile .follow-button {
- position: absolute;
- top: -30px;
- right: 20px;
-}
-
-.profile .message-button {
- position: absolute;
- top: -30px;
- right: 74px;
-}
-
-.profile .no-banner .follow-button {
- right: 0px;
-}
-.profile .no-banner .message-button {
- right: 54px;
-}
-
-.tabs {
- display: flex;
- justify-content: flex-start;
- width: 100%;
- margin: 10px 0;
+ width: calc(100% - 32px);
}
.tabs > div {
margin-right: 0;
}
-.tab {
- margin: 0;
- padding: 8px 0;
- border-bottom: 3px solid var(--gray-secondary);
-}
-.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;
- max-width: 420px;
- }
-}
-
.profile .links {
- margin: 8px 12px;
+ margin-top: 4px;
+ margin-left: 2px;
+}
+
+.profile h3 {
+ color: var(--font-secondary-color);
+ font-size: 10px;
+ letter-spacing: .11em;
+ font-weight: 600;
+ line-height: 12px;
+ text-transform: uppercase;
+ margin-left: 16px;
}
.profile .website {
- color: var(--highlight);
- margin: 6px 0;
+ margin: 4px 0;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}
+
+.profile .website a {
+ color: var(--font-color);
}
.profile .website a {
text-decoration: none;
}
-.profile .website::before {
- content: '🔗 ';
+.profile .website a:hover {
+ text-decoration: underline;
}
.profile .lnurl {
- color: var(--highlight);
- margin: 6px 0;
cursor: pointer;
}
+.profile .ln-address {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}
+
.profile .lnurl:hover {
text-decoration: underline;
}
@@ -208,6 +147,42 @@
text-overflow: ellipsis;
}
-.profile .zap {
- margin-right: .3em;
+.profile .link-icon {
+ color: var(--highlight);
+ margin-right: 8px;
}
+
+.profile .link-icon svg {
+ width: 12px;
+ height: 12px;
+}
+
+.profile .profile-actions {
+ position: absolute;
+ top: 80px;
+ right: 0;
+}
+
+@media (min-width: 520px) {
+ .profile .profile-actions {
+ top: 120px;
+ }
+}
+
+.profile .profile-actions button:not(:last-child) {
+ margin-right: 8px;
+}
+
+@media (min-width: 520px) {
+ .profile .banner {
+ width: 100%;
+ max-width: 720px;
+ height: 300px;
+ margin-bottom: -100px;
+ }
+ .profile .avatar-wrapper .avatar {
+ width: 210px;
+ height: 210px;
+ }
+}
+
diff --git a/src/Pages/ProfilePage.tsx b/src/Pages/ProfilePage.tsx
index 8ad0e744..d92101fa 100644
--- a/src/Pages/ProfilePage.tsx
+++ b/src/Pages/ProfilePage.tsx
@@ -2,10 +2,10 @@ import "./ProfilePage.css";
import { useEffect, useMemo, useState } from "react";
import { useSelector } from "react-redux";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faGear, faEnvelope } from "@fortawesome/free-solid-svg-icons";
import { useNavigate, useParams } from "react-router-dom";
+import Link from "Icons/Link";
+import Zap from "Icons/Zap";
import useProfile from "Feed/ProfileFeed";
import FollowButton from "Element/FollowButton";
import { extractLnAddress, parseId, hexToBech32 } from "Util";
@@ -39,7 +39,9 @@ export default function ProfilePage() {
const isMe = loginPubKey === id;
const [showLnQr, setShowLnQr] = useState
(false);
const [tab, setTab] = useState(ProfileTab.Notes);
+ const aboutText = user?.about || ''
const about = Text({ content: user?.about || '', tags: [], users: new Map() })
+ const lnurl = extractLnAddress(user?.lud16 || user?.lud06 || "");
useEffect(() => {
setTab(ProfileTab.Notes);
@@ -52,36 +54,48 @@ export default function ProfilePage() {
{user?.display_name || user?.name || 'Nostrich'}
-
{user?.nip05 && }
+
+ {links()}
+ )
+ }
+
function bio() {
- const lnurl = extractLnAddress(user?.lud16 || user?.lud06 || "");
- return (
-
+ >
)
}
@@ -119,17 +133,20 @@ export default function ProfilePage() {
return (
)
@@ -138,18 +155,11 @@ export default function ProfilePage() {
return (
<>