profile fixes

This commit is contained in:
Alejandro Gomez 2023-01-26 07:51:38 +01:00
parent 52ddac5ef5
commit 67772c099a
No known key found for this signature in database
GPG Key ID: 4DF39E566658C817
5 changed files with 34 additions and 15 deletions

View File

@ -17,7 +17,7 @@ export default function FollowListBase({ pubkeys, title }: FollowListBaseProps)
return ( return (
<div className="main-content"> <div className="main-content">
<div className="flex mt10"> <div className="flex mt10">
<div className="f-grow">{title}</div> <div className="f-grow bold">{title}</div>
<button type="button" onClick={() => followAll()}>Follow All</button> <button type="button" onClick={() => followAll()}>Follow All</button>
</div> </div>
{pubkeys?.map(a => <ProfilePreview pubkey={a} key={a} />)} {pubkeys?.map(a => <ProfilePreview pubkey={a} key={a} />)}

View File

@ -60,6 +60,9 @@
position: fixed; position: fixed;
bottom: 50px; bottom: 50px;
right: 16px; right: 16px;
display: flex;
align-items: center;
justify-content: center;
} }
@media (min-width: 520px) { @media (min-width: 520px) {

View File

@ -29,12 +29,16 @@
} }
.profile .name h2 { .profile .name h2 {
margin: 0; margin: 12px 0 0 0;
font-weight: 600;
font-size: 19px;
line-height: 23px;
} }
.profile .nip05 { .profile .nip05 {
display: flex; display: flex;
margin: 4px 0 12px 0; font-size: 16px;
margin: 0 0 12px 0;
} }
.profile .nip05 .nick { .profile .nip05 .nick {
@ -42,6 +46,10 @@
color: var(--gray-light); color: var(--gray-light);
} }
.profile .name .copy {
margin-bottom: 4px;
}
.profile .avatar-wrapper { .profile .avatar-wrapper {
z-index: 1; z-index: 1;
} }
@ -61,8 +69,9 @@
margin-top: 12px; margin-top: 12px;
background-color: var(--note-bg); background-color: var(--note-bg);
padding: 12px 16px; padding: 12px 16px;
margin: 0 auto;
border-radius: 16px; border-radius: 16px;
margin: 0 auto;
margin-bottom: 12px;
} }
.profile .details p { .profile .details p {
@ -90,6 +99,10 @@
width: calc(100% - 32px); width: calc(100% - 32px);
} }
.profile .details .text {
font-size: 14px;
}
.tabs > div { .tabs > div {
margin-right: 0; margin-right: 0;
} }
@ -97,6 +110,7 @@
.profile .links { .profile .links {
margin-top: 4px; margin-top: 4px;
margin-left: 2px; margin-left: 2px;
margin-bottom: 12px;
} }
.profile h3 { .profile h3 {
@ -106,7 +120,7 @@
font-weight: 600; font-weight: 600;
line-height: 12px; line-height: 12px;
text-transform: uppercase; text-transform: uppercase;
margin-left: 16px; margin-left: 12px;
} }
.profile .website { .profile .website {
@ -180,9 +194,5 @@
height: 300px; height: 300px;
margin-bottom: -100px; margin-bottom: -100px;
} }
.profile .avatar-wrapper .avatar {
width: 210px;
height: 210px;
}
} }

View File

@ -34,6 +34,7 @@ export default function ProfilePage() {
const navigate = useNavigate(); const navigate = useNavigate();
const id = useMemo(() => parseId(params.id!), [params]); const id = useMemo(() => parseId(params.id!), [params]);
const user = useProfile(id)?.get(id); const user = useProfile(id)?.get(id);
const loggedOut = useSelector<RootState, boolean | undefined>(s => s.login.loggedOut);
const loginPubKey = useSelector<RootState, HexKey | undefined>(s => s.login.publicKey); const loginPubKey = useSelector<RootState, HexKey | undefined>(s => s.login.publicKey);
const follows = useSelector<RootState, HexKey[]>(s => s.login.follows); const follows = useSelector<RootState, HexKey[]>(s => s.login.follows);
const isMe = loginPubKey === id; const isMe = loginPubKey === id;
@ -139,12 +140,14 @@ export default function ProfilePage() {
Settings Settings
</button> </button>
) : ( ) : (
!loggedOut && (
<> <>
<button type="button" onClick={() => navigate(`/messages/${hexToBech32("npub", id)}`)}> <button type="button" onClick={() => navigate(`/messages/${hexToBech32("npub", id)}`)}>
Message Message
</button> </button>
<FollowButton pubkey={id} /> <FollowButton pubkey={id} />
</> </>
)
)} )}
</div> </div>
{bio()} {bio()}

View File

@ -461,3 +461,6 @@ body.scroll-lock {
} }
} }
.bold {
font-weight: 700;
}