feat: onboarding home screen ui updates
Badi Ifaoui
parent
2ca1eada4c
commit
9818a87ef1
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,184 @@
|
|||
/**
|
||||
* 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;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 102 KiB |
|
|
@ -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,71 @@ export function UserOnboardingHeader(): JSX.Element {
|
|||
|
||||
return (
|
||||
<div className="sh_userOnboarding">
|
||||
<div className="sh_userOnboarding_bot_art">
|
||||
<WelcomeAeBot />
|
||||
</div>
|
||||
<div className="sh_userOnboarding_container">
|
||||
<div className="sh_userOnboarding_text">
|
||||
<h1>{title}</h1>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="sh_userOnboarding_content">
|
||||
<h1>{title}</h1>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<div className="sh_userOnboarding_content">
|
||||
<div className="sh_userOnboarding_bot_art">
|
||||
<img className="lightChatBot" src={require("../../../../res/themes/superhero/img/arts/chat-bot.png")} />
|
||||
<img className="darkChatBot" src={require("../../../../res/themes/superhero/img/arts/chat-bot-dark.png")} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="mx_Heading_h2">Let's get started!</div>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<p>Download and install Superhero Wallet browser extension:</p>
|
||||
<div className="sh_userOnboarding_download_link">
|
||||
<div className="sh_userOnboarding_left">
|
||||
<h3>Let's get started!</h3>
|
||||
<div className="sh_userOnboarding_left_content">
|
||||
<div className="sh_userOnboarding_download">
|
||||
<p>Download and install Superhero Wallet browser extension:</p>
|
||||
<div className="sh_userOnboarding_download_link">
|
||||
<AccessibleButton
|
||||
onClick={(): void => {
|
||||
window.open(
|
||||
"https://chromewebstore.google.com/detail/superhero/mnhmmkepfddpifjkamaligfeemcbhdne",
|
||||
"_blank",
|
||||
);
|
||||
}}
|
||||
className="sh_userOnboarding_download_option"
|
||||
>
|
||||
<ChromeIcon style={{ width: "22px", height: "22px", top: "7px", left: "18px" }} />
|
||||
<div className="sh_userOnboarding_download_option_label">from Chrome Web Store</div>
|
||||
</AccessibleButton>
|
||||
<AccessibleButton
|
||||
onClick={(): void => {
|
||||
window.open(
|
||||
"https://addons.mozilla.org/en-US/firefox/addon/superhero-wallet/",
|
||||
"_blank",
|
||||
);
|
||||
}}
|
||||
className="sh_userOnboarding_download_option"
|
||||
>
|
||||
<FirefoxIcon style={{ width: "22px", height: "22px", top: "7px", left: "18px" }} />
|
||||
<div className="sh_userOnboarding_download_option_label">from Firefox Add-ons</div>
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sh_userOnboarding_chat">
|
||||
<p>Say hello to Wallet Bot and connect your Superhero Wallet:</p>
|
||||
<AccessibleButton
|
||||
onClick={(): void => {
|
||||
window.open(
|
||||
"https://chromewebstore.google.com/detail/superhero/mnhmmkepfddpifjkamaligfeemcbhdne",
|
||||
"_blank",
|
||||
);
|
||||
startDmOnFirstMessage(cli, [
|
||||
new DirectoryMember({
|
||||
user_id: botAccounts?.superheroBot || "",
|
||||
}),
|
||||
]);
|
||||
}}
|
||||
className="sh_userOnboarding_download_option"
|
||||
kind="primary"
|
||||
className="sh_userOnboarding_btn"
|
||||
>
|
||||
<ChromeIcon style={{ width: "22px", height: "22px", top: "7px", left: "18px" }} />
|
||||
<div className="sh_userOnboarding_download_option_label">from Chrome Web Store</div>
|
||||
</AccessibleButton>
|
||||
<AccessibleButton
|
||||
onClick={(): void => {
|
||||
window.open(
|
||||
"https://addons.mozilla.org/en-US/firefox/addon/superhero-wallet/",
|
||||
"_blank",
|
||||
);
|
||||
}}
|
||||
className="sh_userOnboarding_download_option"
|
||||
>
|
||||
<FirefoxIcon style={{ width: "22px", height: "22px", top: "7px", left: "18px" }} />
|
||||
<div className="sh_userOnboarding_download_option_label">from Firefox Add-ons</div>
|
||||
Chat With Wallet Bot
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>Say hello to Wallet Bot and connect your Superhero Wallet:</p>
|
||||
<AccessibleButton
|
||||
onClick={(): void => {
|
||||
startDmOnFirstMessage(cli, [
|
||||
new DirectoryMember({
|
||||
user_id: botAccounts?.superheroBot || "",
|
||||
}),
|
||||
]);
|
||||
}}
|
||||
kind="primary"
|
||||
className="sh_userOnboarding_btn"
|
||||
>
|
||||
Chat With Wallet Bot
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue