feat(#43): user info side panel message button

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>

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>