From 7c6483b991b060d77944588c4182d63d0eb748a6 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Fri, 13 Jan 2023 23:48:24 +0100
Subject: [PATCH] feat: display banner in profile

---
 src/element/FollowButton.js |   2 +-
 src/pages/ProfilePage.css   | 113 +++++++++++++++++++++++++-----------
 src/pages/ProfilePage.js    |  54 +++++++++--------
 3 files changed, 106 insertions(+), 63 deletions(-)

diff --git a/src/element/FollowButton.js b/src/element/FollowButton.js
index 1de67e5e..47b2036c 100644
--- a/src/element/FollowButton.js
+++ b/src/element/FollowButton.js
@@ -8,7 +8,7 @@ export default function FollowButton(props) {
     const publiser = useEventPublisher();
     const follows = useSelector(s => s.login.follows);
     let isFollowing = follows?.includes(pubkey) ?? false;
-    const baseClassName =  isFollowing ? `btn btn-warn` : `btn btn-success`
+    const baseClassName =  isFollowing ? `btn btn-warn follow-button` : `btn btn-success follow-button`
     const className = props.className ? `${baseClassName} ${props.className}` : `${baseClassName}`;
     
     async function follow(pubkey) {
diff --git a/src/pages/ProfilePage.css b/src/pages/ProfilePage.css
index de62dd28..1fdc7ff9 100644
--- a/src/pages/ProfilePage.css
+++ b/src/pages/ProfilePage.css
@@ -1,9 +1,24 @@
 .profile {
-    align-items: flex-start;
+  flex-direction: column;
 }
 
-.profile > div:last-child {
-    margin-left: 10px;
+.profile .banner {
+    width: 100%;
+    height: 210px;
+    margin-bottom: -110px;
+    object-fit: cover;
+    mask-image: linear-gradient(to bottom, var(--bg-color), rgba(0,0,0,0));
+    -webkit-mask-image: linear-gradient(to bottom, var(--bg-color), rgba(0,0,0,0));
+    z-index: 0;
+}
+
+@media (min-width: 720px) {
+  .profile .banner {
+      width: 100%;
+      max-width: 720px;
+      height: 300px;
+      margin-bottom: -120px;
+  }
 }
 
 .profile p {
@@ -14,14 +29,17 @@
     margin: 0;
 }
 
+
 .profile .avatar-wrapper {
-    margin: auto 10px;
+    align-self: flex-start;
+    z-index: 1;
+    margin-left: 4px;
 }
 
 .profile .avatar {
     border-radius: 50%;
-    height: 256px;
-    width: 256px;
+    height: 210px;
+    width: 210px;
     background-image: var(--img-url), var(--gray-gradient);
     border: 4px solid transparent;
     background-origin: border-box;
@@ -38,25 +56,42 @@
     background-image: var(--img-url), var(--nostrplebs-gradient);
 }
 
+.profile .name {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.profile .name h2 {
+    margin: 0;
+}
+
 .profile .details {
-    margin-top: auto;
-    margin-bottom: auto;
-    overflow: hidden;
+    max-width: 680px;
+    width: 100%;
+}
+
+.profile .details p {
+    word-break: break-word;
+}
+
+.profile .details a {
+    color: var(--highlight);
 }
 
 .profile .website {
-    padding-left: 0;
     color: var(--highlight);
-    margin-bottom: 2px;
+    margin-bottom: 4px;
 }
 
 .profile .lnurl {
-    padding-left: 0;
+    color: var(--highlight);
 }
 
 .profile .btn-icon {
-  padding: 6px;
-  margin-left: 4px;
+    color: var(--font-color);
+    padding: 6px;
+    margin-left: 4px;
 }
 
 .profile .website::before {
@@ -64,8 +99,9 @@
     font-size: 10px;
 }
 
-.profile a {
-    color: var(--highlight);
+.profile .lnurl {
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .profile .lnurl::before {
@@ -73,29 +109,38 @@
     font-size: 10px;
 }
 
-@media(max-width: 720px) {
-    .profile {
-        flex-direction: column;
-        align-items: center;
-    }
-    .profile > div:last-child { 
-        margin: 5px 0;
-        width: 100%;
-    }
+.profile .details-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: space-between;
+    position: relative;
+    width: 100%;
+    margin-left: 4px;
 }
 
-@media(max-width: 360px) {
-      .profile .name { flex-direction: column; }
-      .profile .name .btn {
-          margin-top: 5px;
-      }
+.profile .copy .body { font-size: 12px }
+
+@media (min-width: 360px) {
+  .profile .copy .body { font-size: 14px }
+  .profile .details-wrapper, .profile .avatar-wrapper { margin-left: 21px; }
+}
+
+@media (min-width: 720px) {
+  .profile .details-wrapper, .profile .avatar-wrapper { margin-left: 30px; }
+}
+
+.profile .follow-button {
+    position: absolute;
+    top: -30px;
+    right: 20px;
 }
 
 .tabs {
-  display: flex;
-  justify-content: flex-start;
-  width: 100%;
-  margin: 10px 0;
+    display: flex;
+    justify-content: flex-start;
+    width: 100%;
+    margin: 10px 0;
 }
 
 .tabs > div {
diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js
index fa8156e2..b233dd5f 100644
--- a/src/pages/ProfilePage.js
+++ b/src/pages/ProfilePage.js
@@ -45,35 +45,20 @@ export default function ProfilePage() {
         setTab(ProfileTab.Notes);
     }, [params]);
 
+    function username() {
+      return (
+          <div className="name">
+               <h2>{user?.display_name || user?.name}</h2>
+               <Copy text={params.id} />
+               {user?.nip05 && <Nip05 name={name} domain={domain} isVerified={isVerified} couldNotVerify={couldNotVerify} />}
+          </div>
+      )
+    }
+
     function details() {
         const lnurl = extractLnAddress(user?.lud16 || user?.lud06 || "");
         return (
-            <>
-                <div className="flex name">
-                    <div className="f-grow f-ellipsis">
-                        <h2>{user?.display_name || user?.name}</h2></div>
-                    <div className="flex">
-                        {isMe ? (
-                            <div className="btn btn-icon" onClick={() => navigate("/settings")}>
-                                <FontAwesomeIcon icon={faGear} size="lg" />
-                            </div>
-                        ) : <>
-                            <div className="btn mr5" onClick={() => navigate(`/messages/${hexToBech32("npub", id)}`)}>
-                                <FontAwesomeIcon icon={faEnvelope} size="lg" />
-                            </div>
-                            <FollowButton pubkey={id} />
-                        </>
-                        }
-                    </div>
-                </div>
-                <div className="flex">
-                    <div className="f-grow">
-
-                        <Copy text={params.id} />
-                        {user?.nip05 && <Nip05 name={name} domain={domain} isVerified={isVerified} couldNotVerify={couldNotVerify} />}
-                    </div>
-
-                </div>
+            <div className="details">
                 <p>{about}</p>
 
                 {user?.website && (
@@ -89,7 +74,7 @@ export default function ProfilePage() {
                     </div>
                 </div> : null}
                 <LNURLTip svc={lnurl} show={showLnQr} onClose={() => setShowLnQr(false)} />
-            </>
+            </div>
         )
     }
 
@@ -118,11 +103,24 @@ export default function ProfilePage() {
     return (
         <>
             <div className="profile flex">
+                <img className="banner" src={user?.banner ? user.banner : avatarUrl} />
                 <div className="avatar-wrapper">
                     <div style={{ '--img-url': backgroundImage }} className="avatar" data-domain={isVerified ? domain : ''}>
                     </div>
                 </div>
-                <div className="f-grow details">
+                <div className="details-wrapper">
+                    {username()}
+                    {isMe ? (
+                        <div className="btn btn-icon follow-button" onClick={() => navigate("/settings")}>
+                            <FontAwesomeIcon icon={faGear} size="lg" />
+                        </div>
+                    ) : <>
+                            <div className="btn mr5" onClick={() => navigate(`/messages/${hexToBech32("npub", id)}`)}>
+                                <FontAwesomeIcon icon={faEnvelope} size="lg" />
+                            </div>
+                            <FollowButton pubkey={id} />
+                        </>
+                    }
                     {details()}
                 </div>
             </div>