[UI] Update login with new designs

[marky-maybe]

Added the new vertical design to the login screen without adding additional components, leaving spacing for additional stores to be added as their own Runners.

Open to making more design changes to more closely fit the design image posted in the reference issue #1153

---

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)

[flavioislima]

Thanks for the contribution! 👍🏽
It would be better to stick to the design on that issue because, as it looks on the screenshot, it's not much of a change.
That design was made to support more stores in a optimized space.

[marky-maybe]

That design was made to support more stores in a optimized space.

Good point! I'll make some revisions so that it looks closer to the original design

[marky-maybe]

Updated screenshot with current changes:

[marky-maybe]

Changed the styling to include the relevant feedback from the team. It's ready for a bunch of logins to be added as well.

The language selector is mostly left unstyled because it's also connected to the settings page, maybe that should be the next phase?

[flavioislima]

@tildemarky are you still gonna work on this one? I think you have a few conflicts and the design might need some adjustments but it is pretty close. Sorry for forgetting about this one as well.

@biliesilva can you take a look at this latest screenshot and see what needs to be improved for the final design once you have the time?

[biliesilva]

I suggest using these spaces to give more breath to the elements:

And use these paddings and gaps here to the language selector:

Also the text is better to be oriented to the left.

[marky-maybe]

@tildemarky are you still gonna work on this one? I think you have a few conflicts and the design might need some adjustments but it is pretty close. Sorry for forgetting about this one as well.

Hey sorry for the late reply @flavioislima, things got very hectic. I'll push an update with suggested changes within the coming week if nobody else has already stepped forward with this or a different concept.

[flavioislima]

@tildemarky are you still gonna work on this one? I think you have a few conflicts and the design might need some adjustments but it is pretty close. Sorry for forgetting about this one as well.

Hey sorry for the late reply @flavioislima, things got very hectic. I'll push an update with suggested changes within the coming week if nobody else has already stepped forward with this or a different concept.

no worries.
I believe no one is working on it, feel free to continue :)

[marky-maybe]

Still working on conflicts 😅

[marky-maybe]

The current look with the suggested changes! The language selector is mostly left as is, because the design changes would probably require changing the strings to not include the flag so it can be separately styled away from the language label, so that should maybe be its own PR. Not entirely sure.

Let me know if anything else should be adjusted @flavioislima & @biliesilva

[biliesilva]

I have some suggestions below, let me know if you need more examples:

Align CHOOSE APP LANGUAGE and HELP TRANSLATE HEROIC with the box on the left and also give a little space between.

[marky-maybe]

I have some suggestions below, let me know if you need more examples:

That example helped a lot thank you! Here's what it looks like with those changes

[arielj]

@tildemarky can you use Epic Alternative Login Method instead of Epic Games External Login for that button? we discussed this on discord and we think it's more clear to the users than External Login.

[arielj]

The library button looks wrong when logged in:

[marky-maybe]

Do I also commit the translation files once they're picked up? I've never used i18next before so the procedure is a bit new to me and I'm not sure if I'm the one to do that or if it gets automatically picked up during a later build.

[arielj]

Do I also commit the translation files once they're picked up? I've never used i18next before so the procedure is a bit new to me and I'm not sure if I'm the one to do that or if it gets automatically picked up during a later build.

Yes, commit the modified files. For more details check https://github.com/Heroic-Games-Launcher/HeroicGamesLauncher/wiki/Translations#how-to-add-new-translatable-strings

[arielj]

Looks good!