Kieran/snort
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: put gradients on css

Browse Source
This commit is contained in:
Alejandro Gomez
2023-01-13 16:25:58 +01:00
parent 5624e6560c
commit 8bffd3bd4c
5 changed files with 56 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/pages/ProfilePage.js
View File

@ -13,7 +13,7 @@ import { extractLnAddress, parseId } from "../Util";
import Timeline from "../element/Timeline";
import { extractLinks, extractHashtags } from '../Text'
import LNURLTip from "../element/LNURLTip";
import Nip05 from "../element/Nip05";
import Nip05, { useIsVerified } from "../element/Nip05";
import Copy from "../element/Copy";
import ProfilePreview from "../element/ProfilePreview";
import FollowersList from "../element/FollowersList";
@ -26,15 +26,6 @@ const ProfileTab = {
Follows: 3
};
const gradients = {
"snort.social": "linear-gradient(to bottom right, var(--highlight-light), var(--highlight), var(--success))",
"nostrplebs.com": "linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5)",
"nostrpurple.com": "linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5)",
"nostr.fan": "linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5)",
"nostrich.zone": "linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5)",
"nostriches.net": "linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5)",
}
export default function ProfilePage() {
const params = useParams();
const navigate = useNavigate();
@ -46,10 +37,9 @@ export default function ProfilePage() {
const [showLnQr, setShowLnQr] = useState(false);
const [tab, setTab] = useState(ProfileTab.Notes);
const about = extractHashtags(extractLinks([user?.about]))
const nip05domain = user?.nip05 && user?.nip05.split('@').slice(-1)
const gradient = nip05domain && gradients[nip05domain]
const avatarUrl = `url(${(user?.picture?.length ?? 0) === 0 ? Nostrich : user?.picture})`
const backgroundImage = gradient ? `${avatarUrl}, ${gradient}` : avatarUrl
const { name, domain, isVerified, couldNotVerify } = useIsVerified(user?.nip05, user?.pubkey)
const avatarUrl = (user?.picture?.length ?? 0) === 0 ? Nostrich : user?.picture
const backgroundImage = `url(${avatarUrl})`
useEffect(() => {
setTab(ProfileTab.Notes);
@ -63,7 +53,7 @@ export default function ProfilePage() {
<div className="f-grow">
<h2>{user?.display_name || user?.name}</h2>
<Copy text={params.id} />
{user?.nip05 && <Nip05 nip05={user.nip05} pubkey={user.pubkey} />}
{user?.nip05 && <Nip05 name={name} domain={domain} isVerified={isVerified} couldNotVerify={couldNotVerify} />}
</div>
<div>
{isMe ? (
@ -119,7 +109,7 @@ export default function ProfilePage() {
<>
<div className="profile flex">
<div className="avatar-wrapper">
<div style={{ backgroundImage }} className="avatar" data-domain={nip05domain}>
<div style={{ '--img-url': backgroundImage }} className="avatar" data-domain={isVerified ? domain : ''}>
</div>
</div>
<div className="f-grow details">