fix: profile page styling

src/pages/profile/index.tsx

@@ -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>

src/pages/profile/style.module.scss

@@ -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;
+  }
 }