diff --git a/res/css/superhero/custom.css b/res/css/superhero/custom.css index c3b9d65ea72..86d44079047 100644 --- a/res/css/superhero/custom.css +++ b/res/css/superhero/custom.css @@ -347,83 +347,3 @@ 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/css/superhero/onboarding.css b/res/css/superhero/onboarding.css new file mode 100644 index 00000000000..030e993bf0e --- /dev/null +++ b/res/css/superhero/onboarding.css @@ -0,0 +1,178 @@ +/** + * Bot Icon + */ +.cpd-theme-dark .lightChatBot { + display: none !important; +} + +.cpd-theme-dark .darkChatBot { + display: block !important; +} + +.cpd-theme-light .darkChatBot { + display: none !important; +} + +.cpd-theme-light .lightChatBot { + display: block !important; +} + +.sh_userOnboarding_bot_art { + min-width: 150px; + max-width: 100%; +} + +.sh_userOnboarding { + flex: 1; + background: var(--cpd-color-gray-300); + border-radius: 16px; + max-width: 90%; +} + +.sh_userOnboarding_container { + flex: 1; + display: flex; + flex-direction: column; + padding-left: 32px; + border-radius: 16px; + background: linear-gradient(180deg, rgba(97, 71, 255, 0.15) 0%, transparent 100%); +} +.cpd-theme-light .sh_userOnboarding_container { + background: linear-gradient(180deg, rgba(37, 40, 45, 0.15) 0%, transparent 100%); +} + +.sh_userOnboarding_bot_art { + flex: 0.3; + display: flex; + margin-top: -180px; + border-top-right-radius: 16px; + background: transparent; +} + +.sh_userOnboarding_bot_art img { + width: 100%; + height: 100%; +} +.sh_userOnboarding_text { + display: flex; + flex-direction: column; + gap: 8px; + max-width: 70%; + margin-top: 32px; +} + +.sh_userOnboarding_content { + display: flex; + flex-direction: row-reverse; + flex-wrap: wrap; +} +.sh_userOnboarding h1 { + font-weight: clamp(510, 0.8rem + 2.5vw, 700); + font-size: clamp(1.375rem, 0.375rem + 2.5vw, 2.625rem); + line-height: clamp(1.5rem, 0.375rem + 2.5vw, 2.625rem); + margin: 0px; + padding: 0px; +} + +.sh_userOnboarding h3 { + font-size: clamp(1rem, 2.5vw, 2rem); + margin: 0px; + padding: 0px; +} + +.sh_userOnboarding p { + opacity: 70%; + font-weight: clamp(400, 0.8rem + 1.5vw, 510); + font-size: clamp(0.8rem, 0.6rem + 0.5vw, 1rem); + line-height: clamp(1.25rem, 0.8rem + 0.5vw, 1.5rem); + margin: 0px; + padding: 0px; +} + +.sh_userOnboarding_left { + flex: 0.7; + display: flex; + flex-direction: column; + gap: 8px; + margin-right: 20px; + /* margin-top: 20px; */ + padding-bottom: 32px; +} +.sh_userOnboarding_left_content { + display: flex; + flex-direction: column; + gap: 25px; +} + +.sh_userOnboarding_download { + display: flex; + flex-direction: column; + gap: 8px; +} + +.sh_userOnboarding_download_link { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 24px; +} + +.sh_userOnboarding_download_option { + display: flex; + flex-direction: row; + background-color: rgba(58, 61, 66, 1); + border-radius: 8px; + padding: 7px 18px; + align-items: center; + justify-content: center; + align-items: center; + gap: 8px; + font-weight: 510; + font-size: 16px; + line-height: 22px; + min-width: 248px; + max-width: 100%; +} + +.cpd-theme-light .sh_userOnboarding_download_option { + color: #fff; +} + +.sh_userOnboarding_btn { + border-radius: 8px; + padding: 7px 18px; + margin-top: 5px; +} + +@media (max-width: 1025px) { + .sh_userOnboarding_text { + max-width: 100%; + } + .sh_userOnboarding_bot_art { + background: linear-gradient(180deg, transparent 0%, rgba(97, 71, 255, 0.15) 100%); + border-bottom-right-radius: 16px; + border-top-right-radius: 0px; + } + + .sh_userOnboarding_container { + background: transparent; + } + .sh_userOnboarding_bot_art { + margin-top: -30px; + } +} + +@media (max-width: 960px) { + .sh_userOnboarding_text { + max-width: 70%; + } +} + +@media (max-width: 770px) { + .sh_userOnboarding_text { + max-width: 100%; + } + .sh_userOnboarding_bot_art { + margin-top: -30px; + } +} diff --git a/res/themes/superhero/img/arts/chat-bot-dark.png b/res/themes/superhero/img/arts/chat-bot-dark.png new file mode 100644 index 00000000000..dfe994be930 Binary files /dev/null and b/res/themes/superhero/img/arts/chat-bot-dark.png differ diff --git a/res/themes/superhero/img/arts/chat-bot.png b/res/themes/superhero/img/arts/chat-bot.png new file mode 100644 index 00000000000..1720fc0cb1f Binary files /dev/null and b/res/themes/superhero/img/arts/chat-bot.png differ diff --git a/res/themes/superhero/img/arts/welcome-ae-bot.svg b/res/themes/superhero/img/arts/welcome-ae-bot.svg deleted file mode 100644 index 6c45d894cbc..00000000000 --- a/res/themes/superhero/img/arts/welcome-ae-bot.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/components/views/user-onboarding/UserOnboardingHeader.tsx b/src/components/views/user-onboarding/UserOnboardingHeader.tsx index f9af9ada2de..b675e084975 100644 --- a/src/components/views/user-onboarding/UserOnboardingHeader.tsx +++ b/src/components/views/user-onboarding/UserOnboardingHeader.tsx @@ -22,10 +22,12 @@ import { DirectoryMember, startDmOnFirstMessage } from "matrix-react-sdk/src/uti import * as React from "react"; import { useAtom } from "jotai"; +//import { ChatBot } from require("../../../../res/themes/superhero/img/arts/chat-bot.png"); + 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"; +//import { Icon as WelcomeAeBot } from "../../../../res/themes/superhero/img/arts/welcome-ae-bot.svg"; export function UserOnboardingHeader(): JSX.Element { const cli = useMatrixClientContext(); @@ -36,68 +38,85 @@ export function UserOnboardingHeader(): JSX.Element { 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. -

+
+
+

{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
- +
+

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:

{ - window.open( - "https://addons.mozilla.org/en-US/firefox/addon/superhero-wallet/", - "_blank", - ); + startDmOnFirstMessage(cli, [ + new DirectoryMember({ + user_id: botAccounts?.superheroBot || "", + }), + ]); }} - className="sh_userOnboarding_download_option" + kind="primary" + className="sh_userOnboarding_btn" > - -
from Firefox Add-ons
+ Chat With Wallet Bot
- -
-

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 - -
diff --git a/src/vector/index.ts b/src/vector/index.ts index 294e1336c4a..227e2c4de69 100644 --- a/src/vector/index.ts +++ b/src/vector/index.ts @@ -34,6 +34,7 @@ import "setimmediate"; require("gfm.css/gfm.css"); require("katex/dist/katex.css"); require("../../res/css/superhero/custom.css"); +require("../../res/css/superhero/onboarding.css"); /** * This require is necessary only for purposes of CSS hot-reload, as otherwise