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/dharma/css/_dharma.scss

@@ -71,6 +71,9 @@ $input-darker-bg-color: rgba(193, 201, 214, 0.29);
 $input-darker-fg-color: #9fa9ba;
 $input-lighter-bg-color: #f2f5f8;
 $input-lighter-fg-color: $input-darker-fg-color;
+$input-valid-border-color: #7ac9a1;
+
+$field-focused-label-bg-color: #ffffff;
 
 $button-bg-color: #7ac9a1;
 $button-fg-color: white;
@@ -198,8 +201,8 @@ $memberstatus-placeholder-color: $roomtile-name-color;
 
 .mx_MatrixChat {
 
-    :not(.mx_textinput) > input[type=text],
-    :not(.mx_textinput) > input[type=search],
+    :not(.mx_textinput):not(.mx_Field) > input[type=text],
+    :not(.mx_textinput):not(.mx_Field) > input[type=search],
     .mx_textinput {
         display: block;
         margin: 9px;

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);