Social Logins - Finalized Submission

[samgawaran]

Summary

This submission finalizes the color, radius and text to use when creating login CTAs.

I made sure to search for branding guidelines for the relevant login buttons so we follow their brand. This is a reference submission for the implementation issue:

research is done in this previous submission: https://github.com/colonistio/design/issues/175

Details

• I used Login instead of Sign In since it would make the word shorter. I checked other games and platforms and they either go with one of these so I chose the shorter one.
• Colors are accurate on the branding guidelines of each of the platforms. I talked to Mau about the high prio platforms and he mentioned that we need to have one for google, apple, and discord for now.

Related Submissions

• https://github.com/colonistio/design/issues/178
• https://github.com/colonistio/design/issues/175

Related Links

• https://github.com/colonistio/katan/issues/9049

  ---

• Google CTA Guidelines https://developers.google.com/identity/branding-guidelines
• Facebook CTA Guidelines (low prio) https://developers.facebook.com/docs/facebook-login/userexperience/
• Discord CTA guidelines https://discord.com/branding
• Apple CTA guidelines https://appleid.apple.com/signinwithapple/button

Submission Checklist

• [x] This submission abides by Des-lvl-1, Des-lvl-2 & Des-lvl-3

Reviewers

@demiculus @JuanRoman77 @Mau-MD

[JuanRoman77]

1. What happens when the player clicks Login in the profile section dropdown menu? The popup shows for every single login access point?
2. Can we show perks in Mobile portrait as well?

[samgawaran]

What happens when the player clicks Login in the profile section dropdown menu? The popup shows for every single login access point?

• Correct, the downside for this is that guest players need an additional step to select google login, but people won't log in every time they go to the website so I think it wouldn't be a big issue. + they have more sign-in options with that popup.

Can we show perks in Mobile portrait as well?

We could do something like this:

want me to adjust the implementation issue to include this?