upgrade text boxes to new Material style

[indirectlylit]

Observed behavior

We're currently using the old Material style of textboxes. In addition to having proven UX issues, it also leads to inconsistent vertical rhythm:

Expected behavior

upgrade to the new style:

User-facing consequences

According to the study, this has improvements in three dimensions:

• Identifiability: The number of correct versus incorrect clicks
• Find-ability / scan-ability: The time it took a participant to find and click on a requested element
• Preference: Participants rank-ordered each text field variation

Context

0.12.x

[khangmach]

note that we'll be using the outlined version of vue's text field instead of material design. Studio has already begun to adopt this new style

https://vuetifyjs.com/en/components/text-fields/

[indirectlylit]

Further update: we will in fact use the style with a background color as shown above, not the outlined version.

ref: https://learningequality.slack.com/archives/C0LKG14NL/p1596846651017000

[radinamatic]

As mentioned in the #139, if we implement the text field background color, contrast becomes insufficient for labels and error message placeholders.

Label	Error

[indirectlylit]

duplicate of #124