fix: profile page styling

This commit is contained in:
Davinci 2024-05-22 11:09:41 +02:00
parent 2c60e2962f
commit 67e5c19870
2 changed files with 43 additions and 24 deletions

View File

@ -189,7 +189,7 @@ export const ProfilePage = () => {
component={Link}
to={`https://njump.me/${nostrJoiningBlock?.encodedEventPointer || ''}`}
target="_blank"
sx={{ color: '#7b7b7b', marginTop: '15px', display: 'block' }}
className={`${styles.nostrSince} ${styles.link}`}
variant="caption"
>
{nostrJoiningBlock
@ -208,7 +208,7 @@ export const ProfilePage = () => {
</Box>
</Box>
<Box className={styles.head}>
<Box className={styles.npubNip}>
<Box sx={{lineHeight: 1}} className={styles.npubNip}>
<Box
sx={{
display: 'flex'
@ -216,7 +216,7 @@ export const ProfilePage = () => {
>
{profileMetadata && (
<Typography
sx={{ marginRight: 1 }}
sx={{ margin: '5px 0 5px 0'}}
variant="h6"
className={styles.bold}
>
@ -234,21 +234,17 @@ export const ProfilePage = () => {
<Box>
{textElementWithCopyIcon(
hexToNpub(pubkey) || '',
{ color: '#5e5e5e' },
5
undefined,
15
)}
</Box>
<Box>
{profileMetadata?.nip05 &&
textElementWithCopyIcon(profileMetadata.nip05, {
color: '#5e5e5e'
})}
textElementWithCopyIcon(profileMetadata.nip05, undefined, 15)}
</Box>
<Box>
{profileMetadata?.lud16 &&
textElementWithCopyIcon(profileMetadata.lud16, {
color: '#5e5e5e'
})}
textElementWithCopyIcon(profileMetadata.lud16, undefined, 15)}
</Box>
</Box>
@ -257,16 +253,12 @@ export const ProfilePage = () => {
<Typography
sx={{ marginTop: '10px' }}
variant="caption"
className={`${styles.website} ${styles.captionWrapper}`}
component={Link}
to={profileMetadata.website}
target="_blank"
className={`${styles.website} ${styles.link} ${styles.captionWrapper}`}
>
<Typography
variant="caption"
sx={{ color: '#5e5e5e' }}
className={styles.npubNipItem}
>
{profileMetadata.website}
</Typography>
<LinkIcon className={styles.captionIcon} />
{profileMetadata.website}
</Typography>
)}
</Box>

View File

@ -54,13 +54,27 @@
width: 150px;
}
.copyIcon {
font-size: 1.1rem !important;
margin-left: 5px;
.link {
&:hover {
color: #3a3a3a;
}
}
.nostrSince {
color: #5c5c5c;
margin-top: 15px !important;
display: inline-block;
&:hover {
color: #3a3a3a;
}
}
.website {
margin-bottom: 15px 0 !important;
margin-top: 8px !important;
text-decoration: underline;
text-decoration-color: #3e3e3e;
color: #3e3e3e;
}
.captionWrapper {
@ -72,4 +86,17 @@
color: #15999b;
margin-left: 5px;
font-size: 12px;
}
.npubNipItem {
display: inline-flex;
justify-content: space-between;
color: #3e3e3e;
line-height: 1.3;
.copyIcon {
font-size: 0.9rem !important;
margin-left: 5px;
margin-top: 2px;
}
}