Clearer student teacher user type selection

[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.

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 both selecting a Student account in the original and variant versions, and selecting a Teacher account in the original and variant versions. Since there are only 2 user types, there are very few changes other than visual.

Follow-up work

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

[daynew]

Should probably get the right edge of the inputs to be aligned. Also, could you put a preview screenshot of what this would like like on a smartphone screen?

This might be a little tough to do, because those empty spaces to the right of the inputs are reserved or error messages. Is there an error message which pops up if student or teacher is not selected? I remember when I was working on the account creation page that we did not default to student or teacher. We wanted the user to make a conscious choice for their account type. Make sure to double check this requirement with @dju90

[TurnerRiley]

@daynew Thank you for the feedback! I've aligned the buttons and updated the screenshots to show this. I also added one of the mobile view which seems to stay the same and scale properly when I zoom in on the phone. Lastly, I attached a picture of the behavior when the user does not select either button to show that they have to deliberately click one.

[dju90]

Padding on the left seems a little narrow. Can we increase by a few px? (looking at the padding left of the checkbox in "i am a parent/guardian..." for comparison)