Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[UI] Welcome modal update #1163

Merged
merged 23 commits into from
Dec 5, 2024
Merged

[UI] Welcome modal update #1163

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
8f0687c
feat(onboarding): modify welcome to HyperPlay modal
biliesilva Nov 20, 2024
09e3b6c
feat(onboarding): update styles for welcome modal
biliesilva Nov 20, 2024
b5cfaec
feat(assets): add diamond SVG to the assets folder
biliesilva Nov 20, 2024
4022ba7
feat(localization): update translations for the welcome modal
biliesilva Nov 20, 2024
155aa16
Merge branch 'main' into Welcome-Modal-v2
biliesilva Nov 20, 2024
884693d
feat(localization): remove outdated community call-to-action from tra…
biliesilva Nov 20, 2024
64e0a58
fix(onboarding): removed numbers from they translation keys
biliesilva Nov 20, 2024
27740b2
fix(localization): updated keys running yarn i18n again
biliesilva Nov 20, 2024
fa6e13b
Merge branch 'Welcome-Modal-v2' of github.com:HyperPlay-Gaming/hyperp…
biliesilva Nov 20, 2024
68452be
fix(onboarding): add new style condition to onboard modal
biliesilva Nov 21, 2024
ee9e966
fix(onboarding): add compatibility layer translation key for one item…
biliesilva Nov 21, 2024
d69bb64
fix(onboarding): increase width and add top do the modal component
biliesilva Nov 21, 2024
dcd6504
fix(onboarding): adjust margins and font weights to use var from our lib
biliesilva Nov 21, 2024
c5739ef
fix(translations): add compatibility layer translation key
biliesilva Nov 21, 2024
2fad827
[UI] Update welcome modal to be responsive (#1166)
BrettCleary Nov 26, 2024
0aa1d6f
rm global class from weclome modal lang selector (#1170)
BrettCleary Nov 26, 2024
281de19
fix(translations): update translation keys after test
biliesilva Dec 4, 2024
6d41c94
fix(onboarding): adjust text indentation and padding in welcome modal
biliesilva Dec 4, 2024
b2515a0
fix(onboarding): fixed some pontuations in the text content to match …
biliesilva Dec 4, 2024
8c963ea
[fix] yarn conflicts
biliesilva Dec 5, 2024
923bd48
update(onboarding): update compatibility layer external URL
biliesilva Dec 5, 2024
060b839
Merge branch 'main' of https://github.com/HyperPlay-Gaming/hyperplay-…
biliesilva Dec 5, 2024
925956d
fix(lint): remove unused imports
biliesilva Dec 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 12 additions & 8 deletions public/locales/en/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -359,7 +359,7 @@
"connectWallet": "Connect wallet",
"copyUrl": "Copy URL",
"currentWallet": "Current wallet",
"discordApp": "Discord",
"discordApp2": "Discord Community.",
"folder": "Folder",
"gamecard": {
"distributables": "Installing Distributables...",
Expand Down Expand Up @@ -396,7 +396,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": {
Expand Down Expand Up @@ -436,13 +435,18 @@
},
"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"
"2": "Currently in Beta, we highly value your feedback and \n encourage you to report any issues or suggestions in our",
"bulletPoint_1": "Access a vast collection of 100+ on-chain enabled games",
"bulletPoint_2": "Earn tokens, NFTs, and off-chain rewards by completing Quests",
"bulletPoint_3": "Play Epic and GOG games directly through HyperPlay",
"bulletPoint_4": "Install Steam (Windows version) on macOS with one easy click",
"bulletPoint_5": "Run Windows games on macOS, Linux, and SteamDeck using our\n advanced",
"bulletTitle": "With HyperPlay, you can:",
"communityCTA_4": "Let's shape the future of gaming together!",
flavioislima marked this conversation as resolved.
Show resolved Hide resolved
"paragraph1": "At HyperPlay, we’re building the next-generation game store \n for the future of gaming.",
"paragraph3": "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."
},
"title": "Welcome to HyperPlay Early Access!"
"title2": "Welcome to HyperPlay!"
}
},
"otp": "One Time Passcode",
Expand Down
3 changes: 3 additions & 0 deletions src/frontend/assets/diamond.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
47 changes: 42 additions & 5 deletions src/frontend/screens/Onboarding/welcome/index.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
.languageSelector {
margin: var(--space-lg) auto;
margin: var(--space-lg) 0px;

div {
width: auto;
}
}

.actionButton {
margin: 0px auto;
margin: var(--space-md) 0px;
}
.actionButton button {
border-radius: var(--space-xs);
Expand All @@ -13,12 +17,15 @@
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 {
Expand All @@ -32,8 +39,38 @@
.welcomeBodyTextContainer a:hover {
color: var(--color-primary-300);
transition: 0.2s;
font-size: var(--font-size-md);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need this? It seems odd to me that we would set the font size instead of using a typography style, especially on hover

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was already in the file, I only changed it from lg to md;

}

.text {
font-weight: 400;
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We pretty much never have to set the specific typography in a component since we can reuse the styles from hp/ui src\styles\designSystem\_typography.scss. Do we need a new style or to update an existing style in the global stylesheet? If we make custom type sizing, weights, fonts, or line-heights on a per component basis, the typography system quickly become unmaintainable.

Copy link
Contributor Author

@biliesilva biliesilva Nov 21, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had to create a class to style a small piece of text differently because it was inheriting bold from its parent. I'll change it and use var instead the next time.


.boldText {
.textBold {
font-weight: var(--bold);
color: var(--color-neutral-100);
}

.diamondBlue {
width: 10px;
height: 10px;
margin-right: 8px;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
margin-right: 8px;
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;
}

.scrollableModal {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this class doesn't seem to be used anywhere

max-height: 200px;
overflow-y: auto;
padding-right: 15px;
}
113 changes: 75 additions & 38 deletions src/frontend/screens/Onboarding/welcome/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ 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>>
Expand All @@ -18,61 +19,96 @@ 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.title2', '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.paragraph1',
`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.paragraph3',
`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.bulletTitle',
`With HyperPlay, you can:`
)}
</div>
<div>
<ul
className={`${WelcomeStyles.bulletPointIcon} ${WelcomeStyles.bulletPointList}`}
>
<li>
<DiamondBlue className={WelcomeStyles.diamondBlue} />
{t(
'hyperplay.onboarding.welcome.text.bulletPoint_1',
`Access a vast collection of 100+ on-chain enabled games`
)}
</li>
<li>
<DiamondBlue className={WelcomeStyles.diamondBlue} />
{t(
'hyperplay.onboarding.welcome.text.bulletPoint_2',
`Earn tokens, NFTs, and off-chain rewards by completing Quests`
)}
</li>
<li>
<DiamondBlue className={WelcomeStyles.diamondBlue} />
{t(
'hyperplay.onboarding.welcome.text.bulletPoint_3',
`Play Epic and GOG games directly through HyperPlay`
)}
</li>
<li>
<DiamondBlue className={WelcomeStyles.diamondBlue} />
{t(
'hyperplay.onboarding.welcome.text.bulletPoint_4',
`Install Steam (Windows version) on macOS with one easy click`
)}
</li>
<li>
<DiamondBlue className={WelcomeStyles.diamondBlue} />
{t(
'hyperplay.onboarding.welcome.text.bulletPoint_5',
`Run Windows games on macOS, Linux, and SteamDeck using our
advanced`
)}{' '}
<a
onClick={() =>
window.api.openExternalUrl(
`https://docs.hyperplay.xyz/faq#q-what-operating-systems-are-supported`
)
}
>
Compatibility Layer (Beta)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should this be a translation string?

</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.2',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for this one, can you not use a number as a key, this might give issues in the future.
Rename it to something like intro for instance.

`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.discordApp2', `Discord Community.`)}
flavioislima marked this conversation as resolved.
Show resolved Hide resolved
</a>{' '}
{t(
'hyperplay.onboarding.welcome.text.communityCTA_2',
`community. Together, let's shape the future of gaming!`
)}
</div>
</div>
<div className={WelcomeStyles.languageSelector}>
Expand All @@ -84,6 +120,7 @@ const Welcome: React.FC<WelcomeProps> = function (props) {
onboardingStore.set('completedEarlyAccess', true)
props.setScreen(ONBOARDING_SCREEN.ANALYTICS)
}}
type="secondary"
>
{t('button.continue', 'Continue')}{' '}
<FontAwesomeIcon
Expand Down
Loading