Clearer Student vs. Teacher user type selection on sign-up page (ensuring browser-wide support)

[TurnerRiley]

This PR makes the abilities of a Student vs. a Teacher clearer on the sign-up page. Instead of a drop-down that says "Student" and "Teacher," there are 2 large buttons that describe each one. This way, teachers are more likely to see that they have all the abilities a student has (including seeing from a student's view) and will actually select the "Teacher" user type. These changes are toggled by the experiment clearerSignUpUserType.

Note about similar previous PR: Previous PR of this used implementation that wasn't supported by IE11 so that was reverted and this one fixes it. This PR also now ensures that if the user type is selected but some other required field is not filled in and the user tries to sign up, the choice they made for user type will still persist and be selected so that they do not have to redo that (meaning they would only have to provide input for whichever required field they left blank).

Screenshots

Here is the original look (experiment off):

Here is the updated look (experiment on) which can be found by turning on the experiment with this link (and this experiment can be turned off with this link) once the branch is merged into staging:

Here is the mobile view:

Here is what it looks like when a user tries to sign up without selecting either option (the expected behavior is what is shown where the red text tells the user they need to deliberately pick a user type):

Links

Spec can be found here.

Testing story

Manually tested by switching between Student and Teacher account types and made an account with both successfully. Also checked that the user cannot create an account without explicitly clicking either 'Student' or 'Teacher.' Finally, using an ad-hoc environment I checked that this functionality persists across browsers.

Follow-up work

If this is all good to go in staging, I will create an Optimizely A/B experiment to test its efficacy.

[annaxuphoto]

Is the mobile view meant to have the content in the top left corner? Can we enlarge the element/remove margins so it takes up the full mobile view?

[TurnerRiley]

@annaxuphoto I think it may be intentional that the content is like that? Every step of the sign up and log in process is like that (I used my phone to confirm that as well). I can definitely look into making this step more enlarged, I think my concern would just be that it might be a weird inconsistency if that's the only step that is enlarged to fill the screen. What do you think? I'm totally fine going either way!

[annaxuphoto]

Discussed offline that we are tracking the mobile formatting issue in a separate backlog item. Otherwise LGTM :)