Skip to content

Commit 642ee3e

Browse files
biliesilvaBrettCleary
biliesilva
and
BrettCleary
authored
[UI] Welcome modal update (#1163)
* feat(onboarding): modify welcome to HyperPlay modal * feat(onboarding): update styles for welcome modal * feat(assets): add diamond SVG to the assets folder * feat(localization): update translations for the welcome modal * feat(localization): remove outdated community call-to-action from translations * fix(onboarding): removed numbers from they translation keys * fix(localization): updated keys running yarn i18n again * fix(onboarding): add new style condition to onboard modal * fix(onboarding): add compatibility layer translation key for one item missing * fix(onboarding): increase width and add top do the modal component * fix(onboarding): adjust margins and font weights to use var from our lib * fix(translations): add compatibility layer translation key * [UI] Update welcome modal to be responsive (#1166) * update welcome modal to be responsive * update modal padding * rm global class from weclome modal lang selector (#1170) * fix(translations): update translation keys after test * fix(onboarding): adjust text indentation and padding in welcome modal * fix(onboarding): fixed some pontuations in the text content to match design * [fix] yarn conflicts * update(onboarding): update compatibility layer external URL * fix(lint): remove unused imports --------- Co-authored-by: Brett <[email protected]>
1 parent a484891 commit 642ee3e

File tree

7 files changed

+149
-65
lines changed

7 files changed

+149
-65
lines changed

‎public/locales/en/translation.json‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -356,10 +356,11 @@
356356
"noThanks": "No Thanks"
357357
},
358358
"changeWallet": "Swap wallet account",
359+
"compatibilityLayer": "Compatibility Layer (Beta)",
359360
"connectWallet": "Connect wallet",
360361
"copyUrl": "Copy URL",
361362
"currentWallet": "Current wallet",
362-
"discordApp": "Discord",
363+
"discordAppLink": "Discord Community.",
363364
"folder": "Folder",
364365
"gamecard": {
365366
"distributables": "Installing Distributables...",
@@ -396,7 +397,6 @@
396397
"description": "Your wallet is connected. You are ready to game.",
397398
"title": "Wallet connected!"
398399
},
399-
"terms": "Terms of Service.",
400400
"walletSelection": {
401401
"pleaseConnect": "Please connect your wallet, or download the Metamask mobile-app to get\n started:",
402402
"screens": {
@@ -436,13 +436,17 @@
436436
},
437437
"welcome": {
438438
"text": {
439-
"bugs": "Please note that HyperPlay is a public alpha. Many features are still\n in development, and there will be bugs.",
440-
"communityCTA_1": "We'd love your feedback and to have you join us in our",
441-
"communityCTA_2": "community. Together, let's shape the future of gaming!",
442-
"construction": "HyperPlay is under construction.",
443-
"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"
439+
"bulletPointFive": "Run Windows games on macOS, Linux, and SteamDeck using our\n advanced",
440+
"bulletPointFour": "Install Steam (Windows version) on macOS with one easy click",
441+
"bulletPointOne": "Access a vast collection of 100+ on-chain enabled games",
442+
"bulletPointThree": "Play Epic and GOG games directly through HyperPlay",
443+
"bulletPointTwo": "Earn tokens, NFTs, and off-chain rewards by completing Quests",
444+
"lastParagraph": "Currently in Beta, we highly value your feedback and \n encourage you to report any issues or suggestions in our",
445+
"paragraphOne": "At HyperPlay, we’re building the next-generation game store \n for the future of gaming.",
446+
"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.",
447+
"TitleList": "With HyperPlay you can:"
444448
},
445-
"title": "Welcome to HyperPlay Early Access!"
449+
"titleIntro": "Welcome to HyperPlay!"
446450
}
447451
},
448452
"otp": "One Time Passcode",

‎src/frontend/assets/diamond.svg‎

Lines changed: 3 additions & 0 deletions
Loading

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export enum FlagPosition {
1515
interface Props {
1616
flagPossition?: FlagPosition
1717
showWeblateLink?: boolean
18+
extraClass?: string
1819
}
1920

2021
const languageLabels: { [key: string]: string } = {
@@ -103,7 +104,8 @@ const languageFlags: { [key: string]: string } = {
103104

104105
export default function LanguageSelector({
105106
flagPossition = FlagPosition.NONE,
106-
showWeblateLink = false
107+
showWeblateLink = false,
108+
extraClass = 'languageSelector'
107109
}: Props) {
108110
const { t, i18n } = useTranslation()
109111
const { language, setLanguage } = useContext(ContextProvider)
@@ -162,7 +164,7 @@ export default function LanguageSelector({
162164
onChange={(event) => handleChangeLanguage(event.target.value)}
163165
value={currentLanguage}
164166
label={t('setting.language', 'Choose Language')}
165-
extraClass="languageSelector"
167+
extraClass={extraClass}
166168
afterSelect={afterSelect}
167169
>
168170
{Object.keys(languageLabels).map((lang) => renderOption(lang))}

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

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44
display: flex;
55
flex-direction: column;
66
align-items: left;
7-
padding: 18px 32px;
7+
padding: var(--space-xl-fixed);
88

99
position: absolute;
10-
top: 50%;
10+
top: 50% !important;
1111
left: 50%;
1212
transform: translate(-50%, -50%);
1313

@@ -17,6 +17,8 @@
1717
z-index: 2100;
1818

1919
text-align: left;
20+
max-height: calc(100% - var(--space-lg-fixed));
21+
overflow-y: auto;
2022
}
2123

2224
.welcomeModal body {
@@ -35,6 +37,11 @@
3537
width: 880px;
3638
}
3739

40+
.firstWelcomeModal {
41+
width: 650px;
42+
top: 55%;
43+
}
44+
3845
.blurBackground {
3946
position: absolute;
4047
top: 0%;
@@ -43,7 +50,7 @@
4350
height: 100%;
4451
background-color: rgba(0, 0, 0, 0.75);
4552
backdrop-filter: blur(2px);
46-
z-index: 2100;
53+
z-index: 100001;
4754
}
4855

4956
.hpLogo {

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,9 @@ const Onboarding: React.FC<OnboardingProps> = function (props) {
5757
[`${OnboardingStyles.wideModal}`]:
5858
currentScreen === ONBOARDING_SCREEN.WALLET_SELECTION,
5959
[`${OnboardingStyles.regularModal}`]:
60-
currentScreen !== ONBOARDING_SCREEN.WALLET_SELECTION
60+
currentScreen !== ONBOARDING_SCREEN.WALLET_SELECTION,
61+
[`${OnboardingStyles.firstWelcomeModal}`]:
62+
currentScreen === ONBOARDING_SCREEN.WELCOME
6163
})}
6264
>
6365
{renderContent(currentScreen)}

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

Lines changed: 38 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
.languageSelector {
2-
margin: var(--space-lg) auto;
2+
margin: var(--space-sm) 0;
3+
4+
div {
5+
width: auto;
6+
}
37
}
48

59
.actionButton {
6-
margin: 0px auto;
10+
margin: var(--space-sm) 0;
711
}
812
.actionButton button {
913
border-radius: var(--space-xs);
@@ -13,16 +17,19 @@
1317
margin-left: var(--space-xs);
1418
}
1519

20+
.welcomeTitle {
21+
color: var(--color-neutral-100);
22+
}
1623
.welcomeBody {
17-
margin-bottom: var(--space-lg);
24+
margin-bottom: var(--space-md);
1825
}
1926

2027
.welcomeBodyTextContainer {
21-
color: var(--color-neutral-100);
28+
color: var(--color-neutral-400);
2229
}
2330

2431
.welcomeBodyTextContainer > div {
25-
margin: var(--space-md) 0px;
32+
margin: var(--space-md) auto;
2633
}
2734

2835
.welcomeBodyTextContainer a {
@@ -34,6 +41,31 @@
3441
transition: 0.2s;
3542
}
3643

37-
.boldText {
44+
.text {
45+
font-weight: var(--body-sm);
46+
}
47+
48+
.textBold {
3849
font-weight: var(--bold);
50+
color: var(--color-neutral-100);
51+
}
52+
53+
.diamondBlue {
54+
width: 10px;
55+
height: 10px;
56+
margin-right: var(--space-xs-fixed);
57+
}
58+
59+
.bulletPointIcon {
60+
list-style-type: none;
61+
}
62+
63+
.bulletPointList {
64+
margin: 0;
65+
padding: 0;
66+
display: flex;
67+
flex-direction: column;
68+
align-items: flex-start;
69+
text-indent: -18px;
70+
padding-left: 18px;
3971
}

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

Lines changed: 79 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,11 @@ import { ONBOARDING_SCREEN } from '../types'
33
import { t } from 'i18next'
44
import { Button, Images } from '@hyperplay/ui'
55
import { LanguageSelector } from 'frontend/components/UI'
6-
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
7-
import { faArrowRight } from '@fortawesome/free-solid-svg-icons'
86
import { FlagPosition } from 'frontend/components/UI/LanguageSelector'
97
import { onboardingStore } from 'frontend/helpers/electronStores'
108
import WelcomeStyles from './index.module.scss'
119
import OnboardingStyles from '../index.module.scss'
10+
import { ReactComponent as DiamondBlue } from '/src/frontend/assets/diamond.svg'
1211

1312
interface WelcomeProps {
1413
setScreen: React.Dispatch<React.SetStateAction<ONBOARDING_SCREEN>>
@@ -18,78 +17,113 @@ const Welcome: React.FC<WelcomeProps> = function (props) {
1817
return (
1918
<>
2019
<Images.HyperPlayLogoColored className={OnboardingStyles.hpLogo} />
21-
<h5>
22-
{t(
23-
'hyperplay.onboarding.welcome.title',
24-
'Welcome to HyperPlay Early Access!'
25-
)}
26-
</h5>
20+
<h6 className={WelcomeStyles.welcomeTitle}>
21+
{t('hyperplay.onboarding.welcome.titleIntro', 'Welcome to HyperPlay!')}
22+
</h6>
2723
<div className={`body ${WelcomeStyles.welcomeBodyTextContainer}`}>
28-
<div className={WelcomeStyles.boldText}>
24+
<div className={WelcomeStyles.text}>
2925
{t(
30-
'hyperplay.onboarding.welcome.text.construction',
31-
`HyperPlay is under construction.`
32-
)}
26+
'hyperplay.onboarding.welcome.text.paragraphOne',
27+
`At HyperPlay, we’re building the next-generation game store
28+
for the future of gaming.`
29+
)}{' '}
3330
</div>
34-
<div>
31+
<div className={WelcomeStyles.text}>
3532
{t(
36-
'hyperplay.onboarding.welcome.text.description',
37-
`HyperPlay is a game launcher and game store aggregator from the
38-
future. With HyperPlay, you can carry your wallet, tokens, and assets
39-
into every game. HyperPlay supports the entire library of the Epic
40-
Store, GOG, and our own HyperPlay store. By using HyperPlay, you agree
41-
to our`
42-
)}{' '}
43-
<a
44-
onClick={() =>
45-
window.api.openExternalUrl(
46-
`https://www.hyperplay.xyz/terms-of-service`
47-
)
48-
}
49-
>
50-
{t('hyperplay.onboarding.terms', `Terms of Service.`)}
51-
</a>
33+
'hyperplay.onboarding.welcome.text.paragraphThr',
34+
`Seamlessly bring your wallet, tokens,
35+
and assets into every game while accessing
36+
the extensive libraries of the Epic Store,
37+
GOG, and our own HyperPlay Store-all in one place.`
38+
)}
5239
</div>
53-
<div>
40+
<div className={WelcomeStyles.textBold}>
5441
{t(
55-
'hyperplay.onboarding.welcome.text.bugs',
56-
`Please note that HyperPlay is a public alpha. Many features are still
57-
in development, and there will be bugs.`
42+
'hyperplay.onboarding.welcome.text.TitleList',
43+
`With HyperPlay you can:`
5844
)}
5945
</div>
46+
<div>
47+
<ul
48+
className={`${WelcomeStyles.bulletPointIcon} ${WelcomeStyles.bulletPointList}`}
49+
>
50+
<li>
51+
<DiamondBlue className={WelcomeStyles.diamondBlue} />
52+
{t(
53+
'hyperplay.onboarding.welcome.text.bulletPointOne',
54+
`Access a vast collection of 100+ on-chain enabled games`
55+
)}
56+
</li>
57+
<li>
58+
<DiamondBlue className={WelcomeStyles.diamondBlue} />
59+
{t(
60+
'hyperplay.onboarding.welcome.text.bulletPointTwo',
61+
`Earn tokens, NFTs, and off-chain rewards by completing Quests`
62+
)}
63+
</li>
64+
<li>
65+
<DiamondBlue className={WelcomeStyles.diamondBlue} />
66+
{t(
67+
'hyperplay.onboarding.welcome.text.bulletPointThree',
68+
`Play Epic and GOG games directly through HyperPlay`
69+
)}
70+
</li>
71+
<li>
72+
<DiamondBlue className={WelcomeStyles.diamondBlue} />
73+
{t(
74+
'hyperplay.onboarding.welcome.text.bulletPointFour',
75+
`Install Steam (Windows version) on macOS with one easy click`
76+
)}
77+
</li>
78+
<li>
79+
<DiamondBlue className={WelcomeStyles.diamondBlue} />
80+
{t(
81+
'hyperplay.onboarding.welcome.text.bulletPointFive',
82+
`Run Windows games on macOS, Linux, and SteamDeck using our
83+
advanced`
84+
)}{' '}
85+
<a
86+
onClick={() =>
87+
window.api.openExternalUrl(
88+
`https://paragraph.xyz/@hyperplay/how-to-play-your-windows-steam-library-on-macos`
89+
)
90+
}
91+
>
92+
{t(
93+
'hyperplay.compatibilityLayer',
94+
`Compatibility Layer (Beta)`
95+
)}
96+
</a>
97+
</li>
98+
</ul>{' '}
99+
</div>
60100
<div>
61101
{t(
62-
'hyperplay.onboarding.welcome.text.communityCTA_1',
63-
`We'd love your feedback and to have you join us in our`
102+
'hyperplay.onboarding.welcome.text.lastParagraph',
103+
`Currently in Beta, we highly value your feedback and
104+
encourage you to report any issues or suggestions in our`
64105
)}{' '}
65106
<a
66107
onClick={() =>
67108
window.api.openExternalUrl(`https://discord.gg/hyperplay`)
68109
}
69110
>
70-
{t('hyperplay.discordApp', `Discord`)}
111+
{t('hyperplay.discordAppLink', `Discord Community.`)}
71112
</a>{' '}
72-
{t(
73-
'hyperplay.onboarding.welcome.text.communityCTA_2',
74-
`community. Together, let's shape the future of gaming!`
75-
)}
76113
</div>
77114
</div>
78115
<div className={WelcomeStyles.languageSelector}>
79-
<LanguageSelector flagPossition={FlagPosition.PREPEND} />
116+
<LanguageSelector flagPossition={FlagPosition.PREPEND} extraClass="" />
80117
</div>
81118
<div className={WelcomeStyles.actionButton}>
82119
<Button
83120
onClick={() => {
84121
onboardingStore.set('completedEarlyAccess', true)
85122
props.setScreen(ONBOARDING_SCREEN.ANALYTICS)
86123
}}
124+
type="secondary"
87125
>
88126
{t('button.continue', 'Continue')}{' '}
89-
<FontAwesomeIcon
90-
icon={faArrowRight}
91-
className={WelcomeStyles.actionButtonArrow}
92-
/>
93127
</Button>
94128
</div>
95129
</>

0 commit comments

Comments
 (0)