Convert form hints to separate component with better style

js/component/form.js

@@ -1,8 +1,3 @@
-var requiredFieldWarningStyle = {
-  color: '#cc0000',
-  transition: 'opacity 400ms ease-in',
-};
-
 var FormField = React.createClass({
   _type: null,
   _element: null,
@@ -55,24 +50,41 @@ var FormField = React.createClass({
     return this.refs.field.options[this.refs.field.selectedIndex];
   },
   render: function() {
-    var warningStyle = Object.assign({}, requiredFieldWarningStyle);
-    if (this.state.warningState == 'fading') {
-      warningStyle.opacity = '0';
-    }
-
     // Pass all unhandled props to the field element
     var otherProps = Object.assign({}, this.props);
     delete otherProps.type;
     delete otherProps.hidden;
 
     return (
-      <span className={this.props.hidden ? 'hidden' : ''}>
+      <div className={'form-field-container' + (this.props.hidden ? ' hidden' : '')}>
-        <this._element type={this._type} name={this.props.name} ref="field" placeholder={this.props.placeholder}
+        <this._element type={this._type} className="form-field" name={this.props.name} ref="field" placeholder={this.props.placeholder}
           {...otherProps}>
           {this.props.children}
         </this._element>
-        <span className={this.state.warningState == 'hidden' ? 'hidden' : ''} style={warningStyle}> This field is required</span>
+        <FormFieldAdvice field={this.refs.field} state={this.state.warningState}>This field is required</FormFieldAdvice>
-      </span>
+      </div>
+    );
+  }
+});
+
+var FormFieldAdvice = React.createClass({
+  propTypes: {
+    state: React.PropTypes.string.isRequired,
+  },
+  render: function() {
+    return (
+      this.props.state != 'hidden'
+        ? <div className="form-field-advice-container">
+            <div className={'form-field-advice' + (this.props.state == 'fading' ? ' form-field-advice--fading' : '')}>
+              <Icon icon="icon-caret-up" className="form-field-advice__arrow" />
+              <div className="form-field-advice__content-container">
+                <span className="form-field-advice__content">
+                  {this.props.children}
+                </span>
+              </div>
+            </div>
+          </div>
+        : null
     );
   }
 });

scss/_gui.scss

@@ -234,6 +234,57 @@ input[type="text"], input[type="search"]
   }
 }
 
+.form-field-container {
+  display: inline-block;
+}
+
+.form-field-advice-container {
+  position: relative;
+  width: 100%;
+}
+
+.form-field-advice {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  white-space: nowrap;
+
+  transition: opacity 400ms ease-in;
+}
+
+.form-field-advice--fading {
+  opacity: 0;
+}
+
+.form-field-advice__arrow {
+  font-size: 22px;
+  line-height: 0.3;
+  color: darken($color-primary, 5%);
+}
+
+
+.form-field-advice__content-container {
+  display: inline-block;
+
+  text-align: center;
+}
+
+.form-field-advice__content {
+  display: inline-block;
+
+  padding: 5px;
+  border-radius: 2px;
+
+  background-color: darken($color-primary, 5%);
+  color: #fff;
+}
+
 
 .modal-overlay {
   position: fixed;