Skip to content

Style the Experience Level step

What does this MR do?

Adds in the final stylistic polish & imagery for the Experience Level step in the experimental sign-up flow for New User Onboarding. (Design spec)

A few notes:

  • I made the entire card area clickable by using Bootstrap’s stretched link functionality
  • I decided to add a hover effect to the cards so that you could easily tell that A) you were in fact hovered over that card and B) the entire card is clickable (see video below)

A changelog entry is not needed because all of this is behind an experiment feature flag.

NOTE: Temporarily basing this on 220110-fully-hook-up-functionality-of-new-experience-level-sign-up-step until !33668 (merged) gets merged into master, at which point I’ll re-target master for this MR.

Screenshots

Mobile Desktop
image image

And here’s a little video showing the interaction with the cards:

Screen_Recording_2020-06-09_at_4.49.31_PM

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

  • [-] Label as security and @ mention @gitlab-com/gl-security/appsec
  • [-] The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
  • [-] Security reports checked/validated by a reviewer from the AppSec team

Addresses #220112 (closed) and relates to gitlab-org/growth/engineering#5363 (closed)

Edited by Sam Awezec

Merge request reports