diff --git a/packages/app/src/Element/NoteCreator.tsx b/packages/app/src/Element/NoteCreator.tsx
index 9c49a168..fd65f20c 100644
--- a/packages/app/src/Element/NoteCreator.tsx
+++ b/packages/app/src/Element/NoteCreator.tsx
@@ -293,7 +293,7 @@ export function NoteCreator() {
ev.stopPropagation = true;
LoginStore.switchAccount(a);
}}>
-
+
));
}
diff --git a/packages/app/src/Element/ProfileImage.css b/packages/app/src/Element/ProfileImage.css
index e8493226..5a586fe6 100644
--- a/packages/app/src/Element/ProfileImage.css
+++ b/packages/app/src/Element/ProfileImage.css
@@ -1,6 +1,10 @@
.pfp {
- display: flex;
+ display: grid;
+ grid-template-columns: min-content auto;
align-items: center;
+ text-decoration: none;
+ user-select: none;
+ min-width: 0;
}
.pfp .avatar-wrapper {
@@ -14,7 +18,7 @@
cursor: pointer;
}
-.pfp a {
+a.pfp {
text-decoration: none;
}
@@ -25,6 +29,10 @@
font-weight: 600;
}
-.pfp .subheader .about {
- max-width: calc(100vw - 140px);
+.pfp .profile-name {
+ max-width: stretch;
+}
+
+.pfp a {
+ text-decoration: none;
}
diff --git a/packages/app/src/Element/ProfileImage.tsx b/packages/app/src/Element/ProfileImage.tsx
index 89ca564e..20182b7a 100644
--- a/packages/app/src/Element/ProfileImage.tsx
+++ b/packages/app/src/Element/ProfileImage.tsx
@@ -1,7 +1,6 @@
import "./ProfileImage.css";
import { useMemo } from "react";
-import { useNavigate } from "react-router-dom";
import { HexKey, NostrPrefix } from "@snort/nostr";
import { useUserProfile } from "Hooks/useUserProfile";
@@ -9,7 +8,7 @@ import { hexToBech32, profileLink } from "Util";
import Avatar from "Element/Avatar";
import Nip05 from "Element/Nip05";
import { MetadataCache } from "Cache";
-import usePageWidth from "Hooks/usePageWidth";
+import { Link } from "react-router-dom";
export interface ProfileImageProps {
pubkey: HexKey;
@@ -17,10 +16,8 @@ export interface ProfileImageProps {
showUsername?: boolean;
className?: string;
link?: string;
- autoWidth?: boolean;
defaultNip?: string;
verifyNip?: boolean;
- linkToProfile?: boolean;
overrideUsername?: string;
}
@@ -30,50 +27,32 @@ export default function ProfileImage({
showUsername = true,
className,
link,
- autoWidth = true,
defaultNip,
verifyNip,
- linkToProfile = true,
overrideUsername,
}: ProfileImageProps) {
- const navigate = useNavigate();
const user = useUserProfile(pubkey);
const nip05 = defaultNip ? defaultNip : user?.nip05;
- const width = usePageWidth();
const name = useMemo(() => {
return overrideUsername ?? getDisplayName(user, pubkey);
}, [user, pubkey, overrideUsername]);
- if (!pubkey && !link) {
- link = "#";
- }
-
- const onAvatarClick = () => {
- if (linkToProfile) {
- navigate(link ?? profileLink(pubkey));
- }
- };
-
return (
-
+
{showUsername && (
-
+
-
-
{name.trim()}
- {nip05 &&
}
-
-
-
- {subHeader}
+
{name.trim()}
+ {nip05 &&
}
+
{subHeader}
)}
-
+
);
}
diff --git a/packages/app/src/Element/Reactions.css b/packages/app/src/Element/Reactions.css
index f43cb7d3..aabedff5 100644
--- a/packages/app/src/Element/Reactions.css
+++ b/packages/app/src/Element/Reactions.css
@@ -1,28 +1,23 @@
.reactions-modal .modal-body {
- padding: 0;
- max-width: 586px;
-}
-
-.reactions-view {
padding: 24px 32px;
background-color: #1b1b1b;
border-radius: 16px;
position: relative;
+ min-height: 33vh;
}
-.light .reactions-view {
+.light .reactions-modal .modal-body {
background-color: var(--note-bg);
}
@media (max-width: 720px) {
- .reactions-view {
+ .reactions-modal .modal-body {
padding: 12px 16px;
- margin-top: -160px;
max-width: calc(100vw - 32px);
}
}
-.reactions-view .close {
+.reactions-modal .modal-body .close {
position: absolute;
top: 12px;
right: 16px;
@@ -30,18 +25,18 @@
cursor: pointer;
}
-.reactions-view .close:hover {
+.reactions-modal .modal-body .close:hover {
color: var(--font-tertiary-color);
}
-.reactions-view .reactions-header {
+.reactions-modal .modal-body .reactions-header {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 32px;
}
-.reactions-view .reactions-header h2 {
+.reactions-modal .modal-body .reactions-header h2 {
margin: 0;
flex-grow: 1;
font-weight: 600;
@@ -49,26 +44,25 @@
line-height: 19px;
}
-.reactions-view .body {
+.reactions-modal .modal-body .body {
overflow: scroll;
- height: 320px;
+ height: 40vh;
-ms-overflow-style: none; /* for Internet Explorer, Edge */
scrollbar-width: none; /* Firefox */
}
-.reactions-view .body::-webkit-scrollbar {
+.reactions-modal .modal-body .body::-webkit-scrollbar {
display: none;
}
.reactions-item {
- display: flex;
- flex-direction: row;
+ display: grid;
+ grid-template-columns: 52px auto;
align-items: center;
margin-bottom: 24px;
}
.reactions-item .reaction-icon {
- width: 52px;
display: flex;
align-items: center;
justify-content: center;
@@ -93,12 +87,8 @@
line-height: 17px;
}
-.reactions-item .zap-comment {
- width: 332px;
-}
-
@media (max-width: 520px) {
- .reactions-view .tab.disabled {
+ .reactions-modal .modal-body .tab.disabled {
display: none;
}
}
diff --git a/packages/app/src/Element/Reactions.tsx b/packages/app/src/Element/Reactions.tsx
index 60c9d090..ab8340f7 100644
--- a/packages/app/src/Element/Reactions.tsx
+++ b/packages/app/src/Element/Reactions.tsx
@@ -2,7 +2,6 @@ import "./Reactions.css";
import { useState, useMemo, useEffect } from "react";
import { useIntl, FormattedMessage } from "react-intl";
-
import { TaggedRawEvent } from "@snort/nostr";
import { formatShort } from "Number";
@@ -75,72 +74,66 @@ const Reactions = ({ show, setShow, positive, negative, reposts, zaps }: Reactio
return show ? (
-
-
-
-
-
-
-
-
-
-
-
- {tab.value === 0 &&
- likes.map(ev => {
- return (
-
-
{ev.content === "+" ? : ev.content}
-
-
- );
- })}
- {tab.value === 1 &&
- zaps.map(z => {
- return (
- z.sender && (
-
-
-
- {formatShort(z.amount)}
-
-
- {z.content}
-
- }
- overrideUsername={z.anonZap ? formatMessage({ defaultMessage: "Anonymous" }) : undefined}
- />
+
+
+
+
+
+
+
+
+
+
+ {tab.value === 0 &&
+ likes.map(ev => {
+ return (
+
+
{ev.content === "+" ? : ev.content}
+
+
+ );
+ })}
+ {tab.value === 1 &&
+ zaps.map(z => {
+ return (
+ z.sender && (
+
+
+
+ {formatShort(z.amount)}
- )
- );
- })}
- {tab.value === 2 &&
- reposts.map(ev => {
- return (
-
}
+ link={z.anonZap ? "" : undefined}
+ overrideUsername={z.anonZap ? formatMessage({ defaultMessage: "Anonymous" }) : undefined}
+ />
- );
- })}
- {tab.value === 3 &&
- dislikes.map(ev => {
- return (
-
-
-
-
-
+ )
+ );
+ })}
+ {tab.value === 2 &&
+ reposts.map(ev => {
+ return (
+
+
+
+ );
+ })}
+ {tab.value === 3 &&
+ dislikes.map(ev => {
+ return (
+
+ );
+ })}
) : null;
diff --git a/packages/app/src/Element/Timeline.tsx b/packages/app/src/Element/Timeline.tsx
index 29660183..3545a958 100644
--- a/packages/app/src/Element/Timeline.tsx
+++ b/packages/app/src/Element/Timeline.tsx
@@ -119,7 +119,7 @@ const Timeline = (props: TimelineProps) => {
<>
onShowLatest()} ref={ref}>
{latestAuthors.slice(0, 3).map(p => {
- return
;
+ return
;
})}
{
{!inView && (
onShowLatest(true)}>
{latestAuthors.slice(0, 3).map(p => {
- return
;
+ return
;
})}
-
- {receiver !== pubKey && showZapped &&
}
+
+ {receiver !== pubKey && showZapped &&
}
@@ -151,7 +151,6 @@ export const ZapsSummary = ({ zaps }: ZapsSummaryProps) => {
{sender && (
diff --git a/packages/app/src/index.css b/packages/app/src/index.css
index f9e3a792..d5be3289 100644
--- a/packages/app/src/index.css
+++ b/packages/app/src/index.css
@@ -42,6 +42,7 @@
html {
scroll-behavior: smooth;
+ -webkit-tap-highlight-color: transparent;
}
html.light {