From 89f1720b7ebd06edc744eb019c349c60e6da98ef Mon Sep 17 00:00:00 2001
From: Badi ifaoui <badi1wow@gmail.com>
Date: Thu, 18 Jan 2024 14:40:51 +0100
Subject: [PATCH] feat(#43): user info side panel message button

---
 res/themes/superhero/img/icons/send.svg       |  3 +++
 src/components/views/right_panel/UserInfo.tsx | 12 +++++++-----
 2 files changed, 10 insertions(+), 5 deletions(-)
 create mode 100644 res/themes/superhero/img/icons/send.svg

diff --git a/res/themes/superhero/img/icons/send.svg b/res/themes/superhero/img/icons/send.svg
new file mode 100644
index 0000000000..e938bf88aa
--- /dev/null
+++ b/res/themes/superhero/img/icons/send.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M13.9523 22C14.6396 22 15.1265 21.4081 15.4797 20.4916L21.7327 4.15752C21.9045 3.71838 22 3.32697 22 3.00239C22 2.38186 21.6181 2 20.9976 2C20.673 2 20.2816 2.09547 19.8424 2.2673L3.42243 8.55847C2.62052 8.86396 2 9.3508 2 10.0477C2 10.926 2.66826 11.2219 3.58472 11.4988L8.73985 13.0644C9.35083 13.2554 9.6945 13.2363 10.105 12.8544L20.5776 3.06921C20.7016 2.95466 20.8448 2.97374 20.9403 3.05966C21.0358 3.15513 21.0453 3.29833 20.9308 3.42243L11.1837 13.9331C10.8114 14.3246 10.7828 14.6491 10.9642 15.2888L12.4821 20.3293C12.7685 21.2935 13.0644 22 13.9523 22Z" fill="currentColor"/>
+</svg>
diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx
index de22f01331..a45214d0b5 100644
--- a/src/components/views/right_panel/UserInfo.tsx
+++ b/src/components/views/right_panel/UserInfo.tsx
@@ -84,6 +84,7 @@ import { asyncSome } from "matrix-react-sdk/src/utils/arrays";
 import UIStore from "matrix-react-sdk/src/stores/UIStore";
 
 import { UserVerifiedBadge } from "../elements/UserVerifiedBadge";
+import { Icon as SendMessage } from "../../../../res/themes/superhero/img/icons/send.svg";
 
 export interface IDevice extends Device {
     ambiguous?: boolean;
@@ -364,7 +365,7 @@ const MessageButton = ({ member }: { member: Member }): JSX.Element => {
 
     return (
         <AccessibleButton
-            kind="link"
+            kind="primary"
             onClick={async (): Promise<void> => {
                 if (busy) return;
                 setBusy(true);
@@ -374,7 +375,8 @@ const MessageButton = ({ member }: { member: Member }): JSX.Element => {
             className="mx_UserInfo_field"
             disabled={busy}
         >
-            {_t("common|message")}
+            <SendMessage width="16px" height="16px" />
+            <span style={{ marginLeft: "5px" }}>Send Message</span>
         </AccessibleButton>
     );
 };
@@ -523,13 +525,10 @@ export const UserOptionsSection: React.FC<{
         </AccessibleButton>
     );
 
-    const directMessageButton = isMe ? null : <MessageButton member={member} />;
-
     return (
         <div className="mx_UserInfo_container">
             <h3>{_t("common|options")}</h3>
             <div>
-                {directMessageButton}
                 {readReceiptButton}
                 {shareUserButton}
                 {insertPillButton}
@@ -1667,6 +1666,9 @@ export const UserInfoHeader: React.FC<{
                         })}
                     </div>
                     <div className="mx_UserInfo_profileStatus">{presenceLabel}</div>
+                    <div style={{ marginTop: "10px", marginBottom: "10px" }}>
+                        <MessageButton member={member} />
+                    </div>
                 </div>
             </div>
         </React.Fragment>