feat: add avatar borders with color gradients to partner nip05 providers
This commit is contained in:
parent
d7149a295e
commit
5624e6560c
@ -7,13 +7,63 @@
|
|||||||
|
|
||||||
.nip05 .nick {
|
.nip05 .nick {
|
||||||
color: var(--gray-light);
|
color: var(--gray-light);
|
||||||
|
font-weight: bold;
|
||||||
|
margin-right: .2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nip05 .domain {
|
.nip05 .domain {
|
||||||
color: var(--gray-superlight);
|
color: var(--gray-superlight);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nip05 .domain[data-domain="snort.social"] {
|
||||||
|
background: linear-gradient(to bottom right, var(--highlight-light), var(--highlight), var(--success));
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nip05 .domain[data-domain="nostrplebs.com"] {
|
||||||
|
background: linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nip05 .domain[data-domain="nostrpurple.com"] {
|
||||||
|
background: linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nip05 .domain[data-domain="nostr.fan"] {
|
||||||
|
background: linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nip05 .domain[data-domain="nostrich.zone"] {
|
||||||
|
background: linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nip05 .domain[data-domain="nostriches.net"] {
|
||||||
|
background: linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
text-fill-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nip05 .badge {
|
.nip05 .badge {
|
||||||
margin-left: .2em;
|
margin: .1em .2em;
|
||||||
margin-top: .1em;
|
|
||||||
}
|
}
|
||||||
|
@ -30,8 +30,7 @@ const Nip05 = ({ nip05, pubkey }) => {
|
|||||||
return (
|
return (
|
||||||
<div className="flex nip05" onClick={(ev) => ev.stopPropagation()}>
|
<div className="flex nip05" onClick={(ev) => ev.stopPropagation()}>
|
||||||
{!isDefaultUser && <div className="nick">{name}</div>}
|
{!isDefaultUser && <div className="nick">{name}</div>}
|
||||||
<div className="domain">
|
<div className="domain" data-domain={domain}>
|
||||||
{!isDefaultUser && '@'}
|
|
||||||
{domain}
|
{domain}
|
||||||
</div>
|
</div>
|
||||||
<span className="badge">
|
<span className="badge">
|
||||||
|
@ -10,7 +10,8 @@
|
|||||||
--gray: #333;
|
--gray: #333;
|
||||||
--gray-secondary: #222;
|
--gray-secondary: #222;
|
||||||
--gray-tertiary: #444;
|
--gray-tertiary: #444;
|
||||||
--highlight: #A9E000;
|
--highlight-light: #E8FF52;
|
||||||
|
--highlight: #CCFF00;
|
||||||
--error: #FF6053;
|
--error: #FF6053;
|
||||||
--success: #2AD544;
|
--success: #2AD544;
|
||||||
}
|
}
|
||||||
@ -19,6 +20,7 @@
|
|||||||
:root {
|
:root {
|
||||||
--font-color: #000;
|
--font-color: #000;
|
||||||
--bg-color: #FFF;
|
--bg-color: #FFF;
|
||||||
|
--highlight-light: #FFC852;
|
||||||
--highlight: #FF9B00;
|
--highlight: #FF9B00;
|
||||||
--modal-bg-color: rgba(240, 240, 240, 0.8);
|
--modal-bg-color: rgba(240, 240, 240, 0.8);
|
||||||
--gray: #CCC;
|
--gray: #CCC;
|
||||||
|
@ -23,10 +23,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.profile .avatar {
|
.profile .avatar {
|
||||||
width: 256px;
|
border-radius: 50%;
|
||||||
height: 256px;
|
height: 256px;
|
||||||
|
width: 256px;
|
||||||
|
border: 4px solid transparent;
|
||||||
|
background-origin: border-box;
|
||||||
|
background-clip: content-box, border-box;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
border-radius: 100%;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile .details {
|
.profile .details {
|
||||||
|
@ -26,6 +26,15 @@ const ProfileTab = {
|
|||||||
Follows: 3
|
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() {
|
export default function ProfilePage() {
|
||||||
const params = useParams();
|
const params = useParams();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
@ -37,6 +46,10 @@ export default function ProfilePage() {
|
|||||||
const [showLnQr, setShowLnQr] = useState(false);
|
const [showLnQr, setShowLnQr] = useState(false);
|
||||||
const [tab, setTab] = useState(ProfileTab.Notes);
|
const [tab, setTab] = useState(ProfileTab.Notes);
|
||||||
const about = extractHashtags(extractLinks([user?.about]))
|
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
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setTab(ProfileTab.Notes);
|
setTab(ProfileTab.Notes);
|
||||||
@ -106,7 +119,7 @@ export default function ProfilePage() {
|
|||||||
<>
|
<>
|
||||||
<div className="profile flex">
|
<div className="profile flex">
|
||||||
<div className="avatar-wrapper">
|
<div className="avatar-wrapper">
|
||||||
<div style={{ backgroundImage: `url(${(user?.picture?.length ?? 0) === 0 ? Nostrich : user?.picture})` }} className="avatar">
|
<div style={{ backgroundImage }} className="avatar" data-domain={nip05domain}>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="f-grow details">
|
<div className="f-grow details">
|
||||||
|
Loading…
Reference in New Issue
Block a user