sigit/sigit.io
6
2
Fork 0
Code Issues 41 Pull Requests 2 Actions Packages Projects 1 Releases Wiki Activity

fix: profile page styling

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/pages/profile/index.tsx
View File

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

35
src/pages/profile/style.module.scss
View File

@ -54,13 +54,27 @@
width: 150px; width: 150px;
} }
.copyIcon { .link {
font-size: 1.1rem !important; &:hover {
margin-left: 5px; color: #3a3a3a;
}
}
.nostrSince {
color: #5c5c5c;
margin-top: 15px !important;
display: inline-block;
&:hover {
color: #3a3a3a;
}
} }
.website { .website {
margin-bottom: 15px 0 !important; margin-top: 8px !important;
text-decoration: underline;
text-decoration-color: #3e3e3e;
color: #3e3e3e;
} }
.captionWrapper { .captionWrapper {
@ -72,4 +86,17 @@
color: #15999b; color: #15999b;
margin-left: 5px; margin-left: 5px;
font-size: 12px; 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;
}
} }