Add a form field component for the redesign

The label moves into the border on focus and after being filled. A valid color
is applied to the label and input border. Other states like invalid can be added
later as needed.

Adapted from @ara4n's experiment into a React component with a CSS only
approach.

res/themes/light/css/_base.scss

@@ -73,6 +73,9 @@ $button-bg-color: #7ac9a1;
 $button-fg-color: white;
 // apart from login forms, which have stronger border
 $strong-input-border-color: #c7c7c7;
+$input-valid-border-color: #7ac9a1;
+
+$field-focused-label-bg-color: #ffffff;
 
 // used for UserSettings EditableText
 $input-underline-color: rgba(151, 151, 151, 0.5);