[UI] Welcome modal update

public/locales/en/translation.json

@@ -356,10 +356,11 @@
             "noThanks": "No Thanks"
         },
         "changeWallet": "Swap wallet account",
+        "compatibilityLayer": "Compatibility Layer (Beta)",
         "connectWallet": "Connect wallet",
         "copyUrl": "Copy URL",
         "currentWallet": "Current wallet",
-        "discordApp": "Discord",
+        "discordAppLink": "Discord Community.",
         "folder": "Folder",
         "gamecard": {
             "distributables": "Installing Distributables...",
@@ -396,7 +397,6 @@
                 "description": "Your wallet is connected. You are ready to game.",
                 "title": "Wallet connected!"
             },
-            "terms": "Terms of Service.",
             "walletSelection": {
                 "pleaseConnect": "Please connect your wallet, or download the Metamask mobile-app to get\n        started:",
                 "screens": {
@@ -436,13 +436,17 @@
             },
             "welcome": {
                 "text": {
-                    "bugs": "Please note that HyperPlay is a public alpha. Many features are still\n          in development, and there will be bugs.",
-                    "communityCTA_1": "We'd love your feedback and to have you join us in our",
-                    "communityCTA_2": "community. Together, let's shape the future of gaming!",
-                    "construction": "HyperPlay is under construction.",
-                    "description": "HyperPlay is a game launcher and game store aggregator from the\n          future. With HyperPlay, you can carry your wallet, tokens, and assets\n          into every game. HyperPlay supports the entire library of the Epic\n          Store, GOG, and our own HyperPlay store. By using HyperPlay, you agree\n          to our"
+                    "bulletPointFive": "Run Windows games on macOS, Linux, and SteamDeck using our\n              advanced",
+                    "bulletPointFour": "Install Steam (Windows version) on macOS with one easy click",
+                    "bulletPointOne": "Access a vast collection of 100+ on-chain enabled games",
+                    "bulletPointThree": "Play Epic and GOG games directly through HyperPlay",
+                    "bulletPointTwo": "Earn tokens, NFTs, and off-chain rewards by completing Quests",
+                    "lastParagraph": "Currently in Beta, we highly value your feedback and \n            encourage you to report any issues or suggestions in our",
+                    "paragraphOne": "At HyperPlay, we’re building the next-generation game store \n            for the future of gaming.",
+                    "paragraphThr": "Seamlessly bring your wallet, tokens, \n           and assets into every game while accessing \n           the extensive libraries of the Epic Store, \n           GOG, and our own HyperPlay Store-all in one place.",
+                    "TitleList": "With HyperPlay you can:"
                 },
-                "title": "Welcome to HyperPlay Early Access!"
+                "titleIntro": "Welcome to HyperPlay!"
             }
         },
         "otp": "One Time Passcode",

src/frontend/components/UI/LanguageSelector/index.tsx

@@ -15,6 +15,7 @@ export enum FlagPosition {
 interface Props {
   flagPossition?: FlagPosition
   showWeblateLink?: boolean
+  extraClass?: string
 }
 
 const languageLabels: { [key: string]: string } = {
@@ -103,7 +104,8 @@ const languageFlags: { [key: string]: string } = {
 
 export default function LanguageSelector({
   flagPossition = FlagPosition.NONE,
-  showWeblateLink = false
+  showWeblateLink = false,
+  extraClass = 'languageSelector'
 }: Props) {
   const { t, i18n } = useTranslation()
   const { language, setLanguage } = useContext(ContextProvider)
@@ -162,7 +164,7 @@ export default function LanguageSelector({
         onChange={(event) => handleChangeLanguage(event.target.value)}
         value={currentLanguage}
         label={t('setting.language', 'Choose Language')}
-        extraClass="languageSelector"
+        extraClass={extraClass}
         afterSelect={afterSelect}
       >
         {Object.keys(languageLabels).map((lang) => renderOption(lang))}

src/frontend/screens/Onboarding/index.module.scss

@@ -4,10 +4,10 @@
   display: flex;
   flex-direction: column;
   align-items: left;
-  padding: 18px 32px;
+  padding: var(--space-xl-fixed);
 
   position: absolute;
-  top: 50%;
+  top: 50% !important;
   left: 50%;
   transform: translate(-50%, -50%);
 
@@ -17,6 +17,8 @@
   z-index: 2100;
 
   text-align: left;
+  max-height: calc(100% - var(--space-lg-fixed));
+  overflow-y: auto;
 }
 
 .welcomeModal body {
@@ -35,6 +37,11 @@
   width: 880px;
 }
 
+.firstWelcomeModal {
+  width: 650px;
+  top: 55%;
+}
+
 .blurBackground {
   position: absolute;
   top: 0%;
@@ -43,7 +50,7 @@
   height: 100%;
   background-color: rgba(0, 0, 0, 0.75);
   backdrop-filter: blur(2px);
-  z-index: 2100;
+  z-index: 100001;
 }
 
 .hpLogo {

src/frontend/screens/Onboarding/index.tsx

@@ -57,7 +57,9 @@ const Onboarding: React.FC<OnboardingProps> = function (props) {
           [`${OnboardingStyles.wideModal}`]:
             currentScreen === ONBOARDING_SCREEN.WALLET_SELECTION,
           [`${OnboardingStyles.regularModal}`]:
-            currentScreen !== ONBOARDING_SCREEN.WALLET_SELECTION
+            currentScreen !== ONBOARDING_SCREEN.WALLET_SELECTION,
+          [`${OnboardingStyles.firstWelcomeModal}`]:
+            currentScreen === ONBOARDING_SCREEN.WELCOME
         })}
       >
         {renderContent(currentScreen)}

src/frontend/screens/Onboarding/welcome/index.module.scss

@@ -1,9 +1,13 @@
 .languageSelector {
-  margin: var(--space-lg) auto;
+  margin: var(--space-sm) 0;
+
+  div {
+    width: auto;
+  }
 }
 
 .actionButton {
-  margin: 0px auto;
+  margin: var(--space-sm) 0;
 }
 .actionButton button {
   border-radius: var(--space-xs);
@@ -13,16 +17,19 @@
   margin-left: var(--space-xs);
 }
 
+.welcomeTitle {
+  color: var(--color-neutral-100);
+}
 .welcomeBody {
-  margin-bottom: var(--space-lg);
+  margin-bottom: var(--space-md);
 }
 
 .welcomeBodyTextContainer {
-  color: var(--color-neutral-100);
+  color: var(--color-neutral-400);
 }
 
 .welcomeBodyTextContainer > div {
-  margin: var(--space-md) 0px;
+  margin: var(--space-md) auto;
 }
 
 .welcomeBodyTextContainer a {
@@ -34,6 +41,31 @@
   transition: 0.2s;
 }
 
-.boldText {
+.text {
+  font-weight: var(--body-sm);
+}
+
+.textBold {
   font-weight: var(--bold);
+  color: var(--color-neutral-100);
+}
+
+.diamondBlue {
+  width: 10px;
+  height: 10px;
+  margin-right: var(--space-xs-fixed);
+}
+
+.bulletPointIcon {
+  list-style-type: none;
+}
+
+.bulletPointList {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  text-indent: -18px;
+  padding-left: 18px;
 }

src/frontend/screens/Onboarding/welcome/index.tsx

@@ -3,12 +3,11 @@ import { ONBOARDING_SCREEN } from '../types'
 import { t } from 'i18next'
 import { Button, Images } from '@hyperplay/ui'
 import { LanguageSelector } from 'frontend/components/UI'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faArrowRight } from '@fortawesome/free-solid-svg-icons'
 import { FlagPosition } from 'frontend/components/UI/LanguageSelector'
 import { onboardingStore } from 'frontend/helpers/electronStores'
 import WelcomeStyles from './index.module.scss'
 import OnboardingStyles from '../index.module.scss'
+import { ReactComponent as DiamondBlue } from '/src/frontend/assets/diamond.svg'
 
 interface WelcomeProps {
   setScreen: React.Dispatch<React.SetStateAction<ONBOARDING_SCREEN>>
@@ -18,78 +17,113 @@ const Welcome: React.FC<WelcomeProps> = function (props) {
   return (
     <>
       <Images.HyperPlayLogoColored className={OnboardingStyles.hpLogo} />
-      <h5>
-        {t(
-          'hyperplay.onboarding.welcome.title',
-          'Welcome to HyperPlay Early Access!'
-        )}
-      </h5>
+      <h6 className={WelcomeStyles.welcomeTitle}>
+        {t('hyperplay.onboarding.welcome.titleIntro', 'Welcome to HyperPlay!')}
+      </h6>
       <div className={`body ${WelcomeStyles.welcomeBodyTextContainer}`}>
-        <div className={WelcomeStyles.boldText}>
+        <div className={WelcomeStyles.text}>
           {t(
-            'hyperplay.onboarding.welcome.text.construction',
-            `HyperPlay is under construction.`
-          )}
+            'hyperplay.onboarding.welcome.text.paragraphOne',
+            `At HyperPlay, we’re building the next-generation game store 
+            for the future of gaming.`
+          )}{' '}
         </div>
-        <div>
+        <div className={WelcomeStyles.text}>
           {t(
-            'hyperplay.onboarding.welcome.text.description',
-            `HyperPlay is a game launcher and game store aggregator from the
-          future. With HyperPlay, you can carry your wallet, tokens, and assets
-          into every game. HyperPlay supports the entire library of the Epic
-          Store, GOG, and our own HyperPlay store. By using HyperPlay, you agree
-          to our`
-          )}{' '}
-          <a
-            onClick={() =>
-              window.api.openExternalUrl(
-                `https://www.hyperplay.xyz/terms-of-service`
-              )
-            }
-          >
-            {t('hyperplay.onboarding.terms', `Terms of Service.`)}
-          </a>
+            'hyperplay.onboarding.welcome.text.paragraphThr',
+            `Seamlessly bring your wallet, tokens, 
+           and assets into every game while accessing 
+           the extensive libraries of the Epic Store, 
+           GOG, and our own HyperPlay Store-all in one place.`
+          )}
         </div>
-        <div>
+        <div className={WelcomeStyles.textBold}>
           {t(
-            'hyperplay.onboarding.welcome.text.bugs',
-            `Please note that HyperPlay is a public alpha. Many features are still
-          in development, and there will be bugs.`
+            'hyperplay.onboarding.welcome.text.TitleList',
+            `With HyperPlay you can:`
           )}
         </div>
+        <div>
+          <ul
+            className={`${WelcomeStyles.bulletPointIcon} ${WelcomeStyles.bulletPointList}`}
+          >
+            <li>
+              <DiamondBlue className={WelcomeStyles.diamondBlue} />
+              {t(
+                'hyperplay.onboarding.welcome.text.bulletPointOne',
+                `Access a vast collection of 100+ on-chain enabled games`
+              )}
+            </li>
+            <li>
+              <DiamondBlue className={WelcomeStyles.diamondBlue} />
+              {t(
+                'hyperplay.onboarding.welcome.text.bulletPointTwo',
+                `Earn tokens, NFTs, and off-chain rewards by completing Quests`
+              )}
+            </li>
+            <li>
+              <DiamondBlue className={WelcomeStyles.diamondBlue} />
+              {t(
+                'hyperplay.onboarding.welcome.text.bulletPointThree',
+                `Play Epic and GOG games directly through HyperPlay`
+              )}
+            </li>
+            <li>
+              <DiamondBlue className={WelcomeStyles.diamondBlue} />
+              {t(
+                'hyperplay.onboarding.welcome.text.bulletPointFour',
+                `Install Steam (Windows version) on macOS with one easy click`
+              )}
+            </li>
+            <li>
+              <DiamondBlue className={WelcomeStyles.diamondBlue} />
+              {t(
+                'hyperplay.onboarding.welcome.text.bulletPointFive',
+                `Run Windows games on macOS, Linux, and SteamDeck using our
+              advanced`
+              )}{' '}
+              <a
+                onClick={() =>
+                  window.api.openExternalUrl(
+                    `https://paragraph.xyz/@hyperplay/how-to-play-your-windows-steam-library-on-macos`
+                  )
+                }
+              >
+                {t(
+                  'hyperplay.compatibilityLayer',
+                  `Compatibility Layer (Beta)`
+                )}
+              </a>
+            </li>
+          </ul>{' '}
+        </div>
         <div>
           {t(
-            'hyperplay.onboarding.welcome.text.communityCTA_1',
-            `We'd love your feedback and to have you join us in our`
+            'hyperplay.onboarding.welcome.text.lastParagraph',
+            `Currently in Beta, we highly value your feedback and 
+            encourage you to report any issues or suggestions in our`
           )}{' '}
           <a
             onClick={() =>
               window.api.openExternalUrl(`https://discord.gg/hyperplay`)
             }
           >
-            {t('hyperplay.discordApp', `Discord`)}
+            {t('hyperplay.discordAppLink', `Discord Community.`)}
           </a>{' '}
-          {t(
-            'hyperplay.onboarding.welcome.text.communityCTA_2',
-            `community. Together, let's shape the future of gaming!`
-          )}
         </div>
       </div>
       <div className={WelcomeStyles.languageSelector}>
-        <LanguageSelector flagPossition={FlagPosition.PREPEND} />
+        <LanguageSelector flagPossition={FlagPosition.PREPEND} extraClass="" />
       </div>
       <div className={WelcomeStyles.actionButton}>
         <Button
           onClick={() => {
             onboardingStore.set('completedEarlyAccess', true)
             props.setScreen(ONBOARDING_SCREEN.ANALYTICS)
           }}
+          type="secondary"
         >
           {t('button.continue', 'Continue')}{' '}
-          <FontAwesomeIcon
-            icon={faArrowRight}
-            className={WelcomeStyles.actionButtonArrow}
-          />
         </Button>
       </div>
     </>