From 1c987096fd3bc979eb7342c2fd4c6ff82be6bd61 Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Sat, 14 Jan 2023 12:25:08 +0000
Subject: [PATCH] DM button on profile

---
 src/index.css             |  4 ++++
 src/pages/ProfilePage.css |  4 ----
 src/pages/ProfilePage.js  | 28 +++++++++++++++++++---------
 3 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/index.css b/src/index.css
index ab52710..6232ab9 100644
--- a/src/index.css
+++ b/src/index.css
@@ -273,6 +273,10 @@ body.scroll-lock {
   margin-right: 10px;
 }
 
+.mr5 {
+  margin-right: 5px;
+}
+
 .ml5 {
   margin-left: 5px;
 }
diff --git a/src/pages/ProfilePage.css b/src/pages/ProfilePage.css
index b2ca33e..de62dd2 100644
--- a/src/pages/ProfilePage.css
+++ b/src/pages/ProfilePage.css
@@ -10,10 +10,6 @@
     white-space: pre-wrap;
 }
 
-.profile .name {
-  align-items: flex-start;
-}
-
 .profile .name h2 {
     margin: 0;
 }
diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js
index 8bc303f..fa8156e 100644
--- a/src/pages/ProfilePage.js
+++ b/src/pages/ProfilePage.js
@@ -4,12 +4,12 @@ import Nostrich from "../nostrich.jpg";
 import { useEffect, useMemo, useState } from "react";
 import { useSelector } from "react-redux";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faQrcode, faGear } from "@fortawesome/free-solid-svg-icons";
+import { faQrcode, faGear, faEnvelope } from "@fortawesome/free-solid-svg-icons";
 import { useNavigate, useParams } from "react-router-dom";
 
 import useProfile from "../feed/ProfileFeed";
 import FollowButton from "../element/FollowButton";
-import { extractLnAddress, parseId } from "../Util";
+import { extractLnAddress, parseId, hexToBech32 } from "../Util";
 import Timeline from "../element/Timeline";
 import { extractLinks, extractHashtags } from '../Text'
 import LNURLTip from "../element/LNURLTip";
@@ -50,20 +50,30 @@ export default function ProfilePage() {
         return (
             <>
                 <div className="flex name">
-                    <div className="f-grow">
-                        <h2>{user?.display_name || user?.name}</h2>
-                        <Copy text={params.id} />
-                        {user?.nip05 && <Nip05 name={name} domain={domain} isVerified={isVerified} couldNotVerify={couldNotVerify} />}
-                    </div>
-                    <div>
+                    <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>
-                        ) : <FollowButton pubkey={id} />
+                        ) : <>
+                            <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>
                 <p>{about}</p>
 
                 {user?.website && (