Merge pull request #41 from superhero-com/features/onboarding-screen-updates

feat: onboarding screen start chat with walletbot

res/css/superhero/custom.css

@@ -848,7 +848,7 @@ h2 .sh_VerifiedIcon {
 }
 
 .mx_HomePage_default_buttons_title {
-    font-size: 32px;
+    font-size: 30px;
 }
 .cpd-theme-dark .mx_HomePage_default_buttons_title {
     opacity: 0.7;

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/structures/HomePage.tsx

@@ -19,6 +19,7 @@ import AutoHideScrollbar from "matrix-react-sdk/src/components/structures/AutoHi
 import EmbeddedPage from "matrix-react-sdk/src/components/structures/EmbeddedPage";
 import AccessibleButton from "matrix-react-sdk/src/components/views/elements/AccessibleButton";
 import { useMatrixClientContext } from "matrix-react-sdk/src/contexts/MatrixClientContext";
+import { DirectoryMember, startDmOnFirstMessage } from "matrix-react-sdk/src/utils/direct-messages";
 import { getHomePageUrl } from "matrix-react-sdk/src/utils/pages";
 import * as React from "react";
 
@@ -48,7 +49,9 @@ const HomePage: React.FC<IProps> = () => {
                     <SuperheroLogo />
                     <div>is so much better with our Wallet</div>
                 </div>
-                <div className="mx_HomePage_default_buttons_title">Download extension for your browser</div>
+                <div className="mx_HomePage_default_buttons_title">
+                    <span style={{ fontWeight: "bold" }}>1. </span>Download extension for your browser
+                </div>
                 <div className="mx_HomePage_default_buttons">
                     <AccessibleButton
                         onClick={(): void => {
@@ -72,6 +75,19 @@ const HomePage: React.FC<IProps> = () => {
                         from Chrome Web Store
                     </AccessibleButton>
                 </div>
+                <div className="mx_HomePage_default_buttons_title">
+                    <span style={{ fontWeight: "bold" }}>2.</span>Connect your wallet with $uperhero Bot
+                </div>
+                <div className="mx_HomePage_default_buttons">
+                    <AccessibleButton
+                        onClick={(): void => {
+                            startDmOnFirstMessage(cli, [new DirectoryMember({ user_id: "@walletbot:superhero.com" })]);
+                        }}
+                        className="mx_HomePage_button_custom"
+                    >
+                        Chat with $uperhero Bot
+                    </AccessibleButton>
+                </div>
             </div>
         </AutoHideScrollbar>
     );

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>