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 |
---|---|
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
- [-] Changelog entry
- [-] Documentation (if required)
-
Code review guidelines -
Merge request performance guidelines -
Style guides - [-] Database guides
-
Separation of EE specific content
Availability and Testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers - [-] Informed Infrastructure department of a default or new setting change, if applicable per definition of done
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)