diff --git a/components.json b/components.json index 2a54e08e9a5..5adfb105645 100644 --- a/components.json +++ b/components.json @@ -22,5 +22,6 @@ "src/components/structures/LeftPanel.tsx": "src/components/structures/LeftPanel.tsx", "src/components/views/rooms/RoomList.tsx": "src/components/views/rooms/RoomList.tsx", "src/components/views/rooms/RoomSublist.tsx": "src/components/views/rooms/RoomSublist.tsx", - "src/components/views/dialogs/FeedbackDialog.tsx": "src/components/views/dialogs/FeedbackDialog.tsx" + "src/components/views/dialogs/FeedbackDialog.tsx": "src/components/views/dialogs/FeedbackDialog.tsx", + "src/components/views/user-onboarding/UserOnboardingHeader.tsx": "src/components/views/user-onboarding/UserOnboardingHeader.tsx" } diff --git a/res/css/superhero/custom.css b/res/css/superhero/custom.css index 86d44079047..7cad0c8f70e 100644 --- a/res/css/superhero/custom.css +++ b/res/css/superhero/custom.css @@ -347,3 +347,83 @@ h2 .sh_VerifiedIcon { .cpd-theme-light svg.light_logo { display: block !important; } + +.sh_userOnboarding { + display: flex; + flex-direction: row-reverse; + align-items: flex-start; + gap: 20px; + padding-left: 32px; + width: 100%; + background-color: var(--cpd-color-gray-300); + border-radius: 16px; +} + +.sh_userOnboarding_bot_art { + flex: 0.3; + display: flex; + height: 100%; + border-top-right-radius: 16px; + /** gradiant background */ + background: linear-gradient(180deg, rgba(97, 71, 255, 0.15) 0%, rgba(37, 40, 45, 0.15) 100%); +} + +.cpd-theme-light .sh_userOnboarding_bot_art { + background: linear-gradient(180deg, rgba(97, 71, 255, 0.15) 0%, rgba(240, 240, 245, 0.15) 100%); +} + +.sh_userOnboarding_bot_art svg { + margin-right: -18px; +} + +.sh_userOnboarding_content { + flex: 0.7; + padding-top: 32px; + padding-bottom: 32px; +} + +.sh_userOnboarding_content h1 { + font-weight: 700; + font-size: 42px; + line-height: 50.4px; +} + +.sh_userOnboarding_content p { + opacity: 70%; + font-weight: 400; + font-size: 20px; + line-height: 24px; +} + +.sh_userOnboarding_download_link { + display: flex; + flex-direction: row; + margin-bottom: 20px; + margin-top: 8px; +} + +.sh_userOnboarding_download_option { + display: flex; + flex-direction: row; + background-color: var(--cpd-color-theme-bg); + margin-right: 10px; + border-radius: 8px; + padding: 7px 18px 7px 18px; + justify-content: center; + align-items: center; +} + +.sh_userOnboarding_download_option_label { + padding: 0px 4px 0px 4px; + font-weight: 510; + font-size: 16px; + line-height: 22px; + text-align: center; +} + +.sh_userOnboarding_btn { + border-radius: 8px; + padding: 7px 18px 7px 18px; + margin-top: 8px; + margin-bottom: 20px; +} diff --git a/res/themes/superhero/img/arts/welcome-ae-bot.svg b/res/themes/superhero/img/arts/welcome-ae-bot.svg new file mode 100644 index 00000000000..6c45d894cbc --- /dev/null +++ b/res/themes/superhero/img/arts/welcome-ae-bot.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/structures/HomePage.tsx b/src/components/structures/HomePage.tsx index ac572521be4..343148599cd 100644 --- a/src/components/structures/HomePage.tsx +++ b/src/components/structures/HomePage.tsx @@ -17,18 +17,16 @@ limitations under the License. import SdkConfig from "matrix-react-sdk/src/SdkConfig"; import AutoHideScrollbar from "matrix-react-sdk/src/components/structures/AutoHideScrollbar"; 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 { useUserOnboardingTasks } from "matrix-react-sdk/src/hooks/useUserOnboardingTasks"; +import { UserOnboardingList } from "matrix-react-sdk/src/components/views/user-onboarding/UserOnboardingList"; +import { useUserOnboardingContext } from "matrix-react-sdk/src/hooks/useUserOnboardingContext"; import * as React from "react"; -import { useAtom } from "jotai"; -import { Icon as ChatScreenShot } from "../../../res/themes/superhero/img/arts/chat-screenshot.svg"; -import { Icon as ChromeIcon } from "../../../res/themes/superhero/img/icons/chrome.svg"; -import { Icon as FirefoxIcon } from "../../../res/themes/superhero/img/icons/firefox.svg"; -import { Icon as SuperheroLogo } from "../../../res/themes/superhero/img/logos/superhero-logo.svg"; -import { botAccountsAtom } from "../../atoms"; +import { UserOnboardingHeader } from "../views/user-onboarding/UserOnboardingHeader"; + + interface IProps { justRegistered?: boolean; @@ -38,64 +36,18 @@ const HomePage: React.FC = () => { const cli = useMatrixClientContext(); const config: any = SdkConfig.get(); const pageUrl = getHomePageUrl(config, cli); - const [botAccounts] = useAtom(botAccountsAtom); + + const context = useUserOnboardingContext(); + const tasks = useUserOnboardingTasks(context); if (pageUrl) { return ; } return ( - -
- -
- -
is so much better with our Wallet
-
-
- 1. Download extension for your browser -
-
- { - window.open("https://addons.mozilla.org/en-US/firefox/addon/superhero-wallet/", "_blank"); - }} - className="mx_HomePage_button_custom" - > - - from Firefox Add-ons - - { - window.open( - "https://chromewebstore.google.com/detail/superhero/mnhmmkepfddpifjkamaligfeemcbhdne", - "_blank", - ); - }} - className="mx_HomePage_button_custom" - > - - from Chrome Web Store - -
-
- 2.Connect your wallet with $uperhero Bot -
-
- { - startDmOnFirstMessage(cli, [ - new DirectoryMember({ - user_id: botAccounts?.superheroBot || "", - }), - ]); - }} - className="mx_HomePage_button_custom" - > - Chat with $uperhero Bot - -
-
+ + + ); }; diff --git a/src/components/views/user-onboarding/UserOnboardingHeader.tsx b/src/components/views/user-onboarding/UserOnboardingHeader.tsx new file mode 100644 index 00000000000..f9af9ada2de --- /dev/null +++ b/src/components/views/user-onboarding/UserOnboardingHeader.tsx @@ -0,0 +1,106 @@ +/* +Copyright 2022 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import SdkConfig from "matrix-react-sdk/src/SdkConfig"; +import AccessibleButton from "matrix-react-sdk/src/components/views/elements/AccessibleButton"; +import { useMatrixClientContext } from "matrix-react-sdk/src/contexts/MatrixClientContext"; +import { _t } from "matrix-react-sdk/src/languageHandler"; +import { DirectoryMember, startDmOnFirstMessage } from "matrix-react-sdk/src/utils/direct-messages"; +import * as React from "react"; +import { useAtom } from "jotai"; + +import { botAccountsAtom } from "../../../atoms"; +import { Icon as ChromeIcon } from "../../../../res/themes/superhero/img/icons/chrome.svg"; +import { Icon as FirefoxIcon } from "../../../../res/themes/superhero/img/icons/firefox.svg"; +import { Icon as WelcomeAeBot } from "../../../../res/themes/superhero/img/arts/welcome-ae-bot.svg"; + +export function UserOnboardingHeader(): JSX.Element { + const cli = useMatrixClientContext(); + const [botAccounts] = useAtom(botAccountsAtom); + const title = _t("onboarding|welcome_to_brand", { + brand: SdkConfig.get("brand"), + }); + + return ( +
+
+ +
+ +
+

{title}

+

+ With free end-to-end encrypted messaging, and unlimited voice and video calls, Superhero is a great + way to stay in touch. But that's not all! With Superhero Chat you will be able to access token-gated + chat rooms and create your own communities. +

+ +
+
Let's get started!
+ +
+
+

Download and install Superhero Wallet browser extension:

+
+ { + window.open( + "https://chromewebstore.google.com/detail/superhero/mnhmmkepfddpifjkamaligfeemcbhdne", + "_blank", + ); + }} + className="sh_userOnboarding_download_option" + > + +
from Chrome Web Store
+ + { + window.open( + "https://addons.mozilla.org/en-US/firefox/addon/superhero-wallet/", + "_blank", + ); + }} + className="sh_userOnboarding_download_option" + > + +
from Firefox Add-ons
+ +
+
+ +
+

Say hello to Wallet Bot and connect your Superhero Wallet:

+ { + startDmOnFirstMessage(cli, [ + new DirectoryMember({ + user_id: botAccounts?.superheroBot || "", + }), + ]); + }} + kind="primary" + className="sh_userOnboarding_btn" + > + Chat With Wallet Bot + +
+
+
+
+
+ ); +}