[UI] Welcome modal update #1163

biliesilva · 2024-11-20T17:00:27Z

<--- Update Welcome Modal --->

Updated the copy and some styles of the Welcome to HyperPlay modal

Design to compare here

Use the following Checklist if you have changed something on the Backend or Frontend:

Tested the feature and it's working on a current and clean install.
Tested the main App features and they are still working on a current and clean install. (Login, Install, Play, Uninstall, Move games, etc.)
Created / Updated Tests (If necessary)
Created / Updated documentation (If necessary)

github-actions · 2024-11-20T17:00:41Z

All contributors have signed the CLA ✍️ ✅
_{Posted by the CLA Assistant Lite bot.}

biliesilva · 2024-11-20T17:03:52Z

I have read the CLA Document and I hereby sign the CLA

…nslations

public/locales/en/translation.json

flavioislima · 2024-11-20T19:38:18Z

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

        <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',


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.

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

flavioislima

Pretty good stuff! 💪🏽
Code overall looks good, just left some comments about the i18n keys.

…lay-desktop-client into Welcome-Modal-v2

BrettCleary · 2024-11-21T18:35:20Z

can we take the time to make this modal responsive for smaller screens? You will also need to set the z-index as well or convert it to a dialog element with modal behavior, so it is above the top nav bar. Probably set a max height of 100vh and y-overflow to auto as well

BrettCleary

ui is looking good. let's take the time to make it responsive since this is the first impression on new users

BrettCleary · 2024-11-21T18:38:21Z

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

@@ -32,8 +39,38 @@
 .welcomeBodyTextContainer a:hover {
  color: var(--color-primary-300);
  transition: 0.2s;
+  font-size: var(--font-size-md);


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

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

BrettCleary · 2024-11-21T18:40:22Z

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

+.diamondBlue {
+  width: 10px;
+  height: 10px;
+  margin-right: 8px;


Suggested change

margin-right: 8px;

margin-right: var(--space-xs-fixed);

BrettCleary · 2024-11-21T18:43:28Z

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

+.text {
+  font-weight: 400;
 }


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.

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.

BrettCleary · 2024-11-21T18:43:57Z

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

+  align-items: flex-start;
+}
+
+.scrollableModal {


this class doesn't seem to be used anywhere

BrettCleary · 2024-11-21T18:44:22Z

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

+                  )
+                }
+              >
+                Compatibility Layer (Beta)


should this be a translation string?

biliesilva · 2024-11-21T20:54:25Z

ui is looking good. let's take the time to make it responsive since this is the first impression on new users

I didn't change anything in the responsiveness of this component I just changed the text and changed the position of the language selector and the button.

… missing

* update welcome modal to be responsive * update modal padding

BrettCleary

LGTM

BrettCleary · 2024-11-26T20:39:20Z

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

@@ -34,6 +41,29 @@
  transition: 0.2s;
 }

-.boldText {
+.text {
+  font-weight: var(--body-sm);


I don't think --body-sm is defined anywhere

…design

nyghtstalker

Looks great! Love the new welcome modal! Great job!

Changing the language is currently not working because it is a new text and has not yet been translated. This will be corrected at a later date.

…desktop-client into Welcome-Modal-v2

biliesilva added 4 commits November 20, 2024 16:50

feat(onboarding): modify welcome to HyperPlay modal

8f0687c

feat(onboarding): update styles for welcome modal

09e3b6c

feat(assets): add diamond SVG to the assets folder

b5cfaec

feat(localization): update translations for the welcome modal

4022ba7

biliesilva requested review from eliobricenov and BrettCleary November 20, 2024 17:00

biliesilva requested a review from flavioislima November 20, 2024 17:00

biliesilva self-assigned this Nov 20, 2024

biliesilva added the PR: Ready-For-Review PR is ready to be reviewed by peers label Nov 20, 2024

Merge branch 'main' into Welcome-Modal-v2

155aa16

biliesilva requested a review from jiyuu-jin November 20, 2024 17:20

feat(localization): remove outdated community call-to-action from tra…

884693d

…nslations

flavioislima reviewed Nov 20, 2024

View reviewed changes

public/locales/en/translation.json Outdated Show resolved Hide resolved

flavioislima reviewed Nov 20, 2024

View reviewed changes

src/frontend/screens/Onboarding/welcome/index.tsx Outdated Show resolved Hide resolved

flavioislima approved these changes Nov 20, 2024

View reviewed changes

biliesilva added 3 commits November 20, 2024 21:32

fix(onboarding): removed numbers from they translation keys

64e0a58

fix(localization): updated keys running yarn i18n again

27740b2

Merge branch 'Welcome-Modal-v2' of github.com:HyperPlay-Gaming/hyperp…

fa6e13b

…lay-desktop-client into Welcome-Modal-v2

BrettCleary requested changes Nov 21, 2024

View reviewed changes

biliesilva added 5 commits November 21, 2024 22:28

fix(onboarding): add new style condition to onboard modal

68452be

fix(onboarding): add compatibility layer translation key for one item…

ee9e966

… missing

fix(onboarding): increase width and add top do the modal component

d69bb64

fix(onboarding): adjust margins and font weights to use var from our lib

dcd6504

fix(translations): add compatibility layer translation key

c5739ef

biliesilva requested a review from BrettCleary November 21, 2024 22:44

BrettCleary added 2 commits November 26, 2024 12:30

[UI] Update welcome modal to be responsive (#1166)

2fad827

* update welcome modal to be responsive * update modal padding

rm global class from weclome modal lang selector (#1170)

0aa1d6f

BrettCleary approved these changes Nov 26, 2024

View reviewed changes

BrettCleary added PR: Ready-For-Test PR is ready to be tested by a QA and removed PR: Ready-For-Review PR is ready to be reviewed by peers labels Nov 26, 2024

BrettCleary requested a review from nyghtstalker November 26, 2024 23:42

BrettCleary mentioned this pull request Dec 3, 2024

Analitycs consent modal update #1171

Merged

4 tasks

eliobricenov approved these changes Dec 4, 2024

View reviewed changes

biliesilva added 3 commits December 4, 2024 18:08

fix(translations): update translation keys after test

281de19

fix(onboarding): adjust text indentation and padding in welcome modal

6d41c94

fix(onboarding): fixed some pontuations in the text content to match …

b2515a0

…design

nyghtstalker approved these changes Dec 4, 2024

View reviewed changes

biliesilva added 4 commits December 5, 2024 11:05

[fix] yarn conflicts

8c963ea

update(onboarding): update compatibility layer external URL

923bd48

Merge branch 'main' of https://github.com/HyperPlay-Gaming/hyperplay-…

060b839

…desktop-client into Welcome-Modal-v2

fix(lint): remove unused imports

925956d

biliesilva merged commit 642ee3e into main Dec 5, 2024
11 checks passed

biliesilva deleted the Welcome-Modal-v2 branch December 5, 2024 12:02

github-actions bot locked and limited conversation to collaborators Dec 5, 2024

biliesilva added Priority: 2 - High and removed PR: Ready-For-Test PR is ready to be tested by a QA labels Dec 5, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[UI] Welcome modal update #1163

[UI] Welcome modal update #1163

biliesilva commented Nov 20, 2024

github-actions bot commented Nov 20, 2024 •

edited

Loading

biliesilva commented Nov 20, 2024

flavioislima Nov 20, 2024

flavioislima left a comment

BrettCleary commented Nov 21, 2024

BrettCleary left a comment

BrettCleary Nov 21, 2024

biliesilva Nov 21, 2024

BrettCleary Nov 21, 2024

BrettCleary Nov 21, 2024

biliesilva Nov 21, 2024 •

edited

Loading

BrettCleary Nov 21, 2024

BrettCleary Nov 21, 2024

biliesilva commented Nov 21, 2024 •

edited

Loading

BrettCleary left a comment

BrettCleary Nov 26, 2024

nyghtstalker left a comment

[UI] Welcome modal update #1163

[UI] Welcome modal update #1163

Conversation

biliesilva commented Nov 20, 2024

github-actions bot commented Nov 20, 2024 • edited Loading

biliesilva commented Nov 20, 2024

Choose a reason for hiding this comment

flavioislima left a comment

Choose a reason for hiding this comment

BrettCleary commented Nov 21, 2024

BrettCleary left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

biliesilva Nov 21, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

biliesilva commented Nov 21, 2024 • edited Loading

BrettCleary left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nyghtstalker left a comment

Choose a reason for hiding this comment

github-actions bot commented Nov 20, 2024 •

edited

Loading

biliesilva Nov 21, 2024 •

edited

Loading

biliesilva commented Nov 21, 2024 •

edited

Loading