feat: added profile banner

src/index.css

@@ -71,7 +71,7 @@ button {
 }
 
 .main {
-  padding: 64px 0;
+  padding: 60px 0;
 }
 
 .hide-mobile {

src/pages/profile/index.tsx

@@ -16,12 +16,11 @@ import { NostrJoiningBlock, ProfileMetadata } from '../../types'
 import styles from './style.module.scss'
 import { useSelector } from 'react-redux'
 import { State } from '../../store/rootReducer'
-import { getRoboHashPicture, shorten } from '../../utils'
+import { getRoboHashPicture, hexToNpub, shorten } from '../../utils'
 import { truncate } from 'lodash'
 import { getProfileSettingsRoute } from '../../routes'
 import EditIcon from '@mui/icons-material/Edit';
 import LinkIcon from '@mui/icons-material/Link';
-import RestoreIcon from '@mui/icons-material/Restore';
 import { LoadingSpinner } from '../../components/LoadingSpinner'
 
 export const ProfilePage = () => {
@@ -107,7 +106,13 @@ export const ProfilePage = () => {
     }
   }, [isUsersOwnProfile, metadataState, pubkey, metadataController])
 
-  const textElementWithCopyIcon = (text: string) => {
+  /**
+   * Rendering text with button which copies the provided text
+   * @param text to be visible
+   * @param sx props (MUI) to customize style
+   * @returns HTML rendered text
+   */
+  const textElementWithCopyIcon = (text: string, sx?: SxProps<Theme>, shortenOffset?: number) => {
     const onClick = () => {
       navigator.clipboard.writeText(text)
 
@@ -118,19 +123,13 @@ export const ProfilePage = () => {
     }
 
     return (
-      <Typography variant="caption" className={styles.npubNipItem}>
+      <Typography variant="caption" sx={sx} className={styles.npubNipItem}>
-        <span onClick={onClick}>{shorten(text)}</span>
+        <span onClick={onClick}>{shorten(text, shortenOffset)}</span>
         <ContentCopyIcon onClick={onClick} className={styles.copyIcon} />
       </Typography>
     )
   }
 
-  const titleElement = (text: string, sx?: SxProps<Theme>) => (
-    <Typography sx={sx} variant="h6" className={styles.bold}>
-      {text}
-    </Typography>
-  )
-
   /**
    * Handles the logic for Image URL.
    * If no picture in kind 0 found - use robohash avatar
@@ -154,6 +153,11 @@ export const ProfilePage = () => {
       {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
       {pubkey && (
         <Box className={styles.container}>
+          <Box className={`${styles.banner} ${!profileMetadata || !profileMetadata.banner ? styles.noImage : ''}`}>
+            {profileMetadata && profileMetadata.banner ? <img src={profileMetadata.banner}/> : ''}
+          </Box>
+
+          <Box className={styles.belowBanner}>
             <Box className={styles.upper}>
               <Box className={styles.left}>
                 <div
@@ -170,7 +174,24 @@ export const ProfilePage = () => {
                   />
                 </div>
               </Box>
-            <Box>
+              <Box className={styles.middle}>
+                <Typography 
+                  component={Link}
+                  to={`https://njump.me/${nostrJoiningBlock?.encodedEventPointer || ''}`}
+                  target="_blank" 
+                  sx={{ color: '#7b7b7b', marginTop: '15px', display: 'block' }} 
+                  variant='caption'>
+                    {nostrJoiningBlock ? `On nostr since ${nostrJoiningBlock.block.toLocaleString()}` : 'On nostr since: unknown'}
+                </Typography>
+              </Box>
+              <Box className={styles.right}>
+                {isUsersOwnProfile && (
+                  <IconButton onClick={() => navigate(getProfileSettingsRoute(pubkey))}>
+                    <EditIcon/>
+                  </IconButton>
+                )}
+              </Box>
+            </Box>
             <Box className={styles.head}>
                   <Box className={styles.npubNip}>
                     <Box
@@ -179,64 +200,38 @@ export const ProfilePage = () => {
                       }}
                     >
                       {profileMetadata &&
-                      titleElement(
+                        <Typography sx={{ marginRight: 1 }} variant="h6" className={styles.bold}>
-                        truncate(
+                          {truncate(
                             profileMetadata.display_name ||
                               profileMetadata.name ||
-                            pubkey,
+                              hexToNpub(pubkey),
                             {
                               length: 16
                             }
-                        ),
-                        { marginRight: 1 }
                           )}
+                        </Typography>}
                     </Box>
                     <Box>
-                    {textElementWithCopyIcon(pubkey || '')}
+                      {textElementWithCopyIcon(hexToNpub(pubkey) || '', { color: '#5e5e5e' }, 5)}
                     </Box>
                     <Box>
                       {profileMetadata?.nip05 &&
-                      textElementWithCopyIcon(profileMetadata.nip05)}
+                        textElementWithCopyIcon(profileMetadata.nip05, { color: '#5e5e5e' })}
+                    </Box>
+                    <Box>
+                      {profileMetadata?.lud16 &&
+                        textElementWithCopyIcon(profileMetadata.lud16, { color: '#5e5e5e' })}
                     </Box>
                   </Box>
 
                   <Box>
                     {profileMetadata?.website && (
                       <Typography sx={{ marginTop: '10px' }} variant='caption' className={`${styles.website} ${styles.captionWrapper}`}>
+                        <Typography variant="caption" sx={{color: '#5e5e5e'}} className={styles.npubNipItem}>{profileMetadata.website}</Typography>
                         <LinkIcon className={styles.captionIcon}/>
-                      {profileMetadata.website}
                       </Typography>
                     )}
                   </Box>
-
-                <Box>
-                  {nostrJoiningBlock && (
-                    <Typography
-                      variant='caption'
-                      sx={{
-                        color: theme.palette.getContrastText(
-                          theme.palette.background.paper
-                        )
-                      }}
-                      className={styles.captionWrapper}
-                      component={Link}
-                      to={`https://njump.me/${nostrJoiningBlock.encodedEventPointer}`}
-                      target="_blank"
-                    >
-                      <RestoreIcon className={styles.captionIcon}/>
-                      On nostr since {nostrJoiningBlock.block.toLocaleString()}
-                    </Typography>
-                  )}
-                </Box>
-              </Box>
-            </Box>
-            <Box className={styles.right}>
-              {isUsersOwnProfile && (
-                <IconButton onClick={() => navigate(getProfileSettingsRoute(pubkey))}>
-                  <EditIcon/>
-                </IconButton>
-              )}
-            </Box>
                 </Box>
             <Box>
               {profileMetadata?.about && (
@@ -246,6 +241,7 @@ export const ProfilePage = () => {
               )}
             </Box>
           </Box>
+        </Box>
       )}
     </>
   )

src/pages/profile/style.module.scss

@@ -1,6 +1,26 @@
-.upper {
+.banner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 210px;
+
+  img {
+    width: 100%;
+  }
+
+  &.noImage {
+    background-color: rgb(219, 219, 219);
+  }
+}
+
+.belowBanner {
+  padding: 0 15px;
+}
+
+.upper {
+  width: 100%;
   display: flex;
-  padding-top: 15px;
 }
 
 .container {
@@ -9,6 +29,11 @@
 
 .left {
   margin-right: 10px;
+  margin-top: -35px;
+}
+
+.middle {
+  flex: 1;
 }
 
 .right {
@@ -35,7 +60,6 @@
 }
 
 .website {
-  // margin-top: 10px !important;
   margin-bottom: 15px 0 !important;
 }
 
@@ -46,6 +70,6 @@
 
 .captionIcon {
   color: #15999b;
-  margin-right: 10px;
+  margin-left: 5px;
   font-size: 12px;
 }

src/pages/settings/profile/index.tsx

@@ -1,5 +1,6 @@
 import ContentCopyIcon from '@mui/icons-material/ContentCopy'
 import {
+  Box,
   IconButton,
   InputProps,
   List,
@@ -283,6 +284,24 @@ export const ProfileSettingsPage = () => {
         >
           {profileMetadata && (
             <div>
+              <ListItem
+                sx={{
+                  marginTop: 1,
+                  display: 'flex',
+                  flexDirection: 'column'
+                }}
+              >
+                {profileMetadata.banner ? (
+                  <img
+                    className={styles.bannerImg}
+                    src={profileMetadata.banner}
+                    alt="Banner Image"
+                  />
+                ): <Box className={styles.noBanner}> No banner found </Box>}
+              </ListItem>
+
+              {editItem('banner', 'Banner URL', undefined, undefined)}
+
               <ListItem
                 sx={{
                   marginTop: 1,

src/pages/settings/profile/style.module.scss

@@ -21,3 +21,17 @@
   margin-left: 10px;
   color: #34495e;
 }
+
+.noBanner {
+  width: 100%;
+  height: 180px;
+  background: rgb(219, 219, 219);
+  color: rgb(88, 88, 88);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.bannerImg {
+  width: 100%;
+}

src/types/profile.ts

@@ -2,6 +2,7 @@ export interface ProfileMetadata {
   name?: string
   display_name?: string
   picture?: string
+  banner?: string
   about?: string
   website?: string
   nip05?: string

src/utils/string.ts

@@ -1,3 +1,10 @@
+/**
+ * Function will replace the middle of the string with 3 dots if length greater then
+ * offset value
+ * @param str string to shorten
+ * @param offset of how many chars to keep in the beginning and the end
+ * eg. 3 will keep first 3 chars and last 3 chars between the dots
+ */
 export const shorten = (str: string, offset = 9) => {
   // return original string if it is not long enough
   if (str.length < offset * 2 + 4) return str