Fix formatting for a few form elements

and make use of the FRC `elementWrapperClassName`, since they way we did it before – custom `className` strings on the element – was not working. Fixes #749.

src/components/card/card.scss

@@ -21,25 +21,6 @@
         }
     }
 
-    .form {
-        position: relative;
-        padding: 3rem 4rem;
-
-        .card-button {
-            margin: 0 0 -3rem -4rem;
-        }
-
-        .form-group {        
-            margin-bottom: 1.2rem;
-
-            &.has-error {
-                .input {
-                    border: 1px solid $ui-orange;
-                }
-            }
-        }
-    }
-
     .validation-message {
         $arrow-border-width: 1rem;
         display: block;
@@ -77,6 +58,32 @@
         }
     }
 
+    .form {
+        position: relative;
+        padding: 3rem 4rem;
+
+        .card-button {
+            margin: 0 0 -3rem -4rem;
+        }
+
+        .form-group {        
+            margin-bottom: 1.2rem;
+
+            &.has-error {
+                .input {
+                    border: 1px solid $ui-orange;
+                }
+            }
+
+            .checkbox-row,
+            .phone-input,
+            .textarea-group {
+                .validation-message {
+                    transform: translate(20rem, 0);  
+                }
+            }
+        }
+    }
 }
 
 @media only screen and (max-width: $mobile - 1) {

src/components/forms/checkbox.jsx

@@ -15,9 +15,7 @@ var Checkbox = React.createClass({
             this.props.className
         );
         return (
-            <div className={classes}>
-                <FRCCheckbox {... this.props} />
-            </div>
+            <FRCCheckbox elementWrapperClassName={classes} {... this.props} />
         );
     }
 });

src/components/forms/phone-input.jsx

@@ -42,7 +42,7 @@ var PhoneInput = React.createClass({
         return (
             <Row {... this.getRowProperties()}
                  htmlFor={this.getId()}
-                 className={classNames('phone-input', this.props.className)}
+                 elementWrapperClassName={classNames('phone-input', this.props.className)}
             >
                 <div className="input-group">
                     <ReactPhoneInput className="form-control"

src/components/forms/textarea.jsx

@@ -15,7 +15,9 @@ var TextArea = React.createClass({
             this.props.className
         );
         return (
-            <FRCTextarea {... this.props} className={classes} />
+            <FRCTextarea {... this.props}
+                         className={classes}
+                         elementWrapperClassName="textarea-group" />
         );
     }
 });

src/components/registration/steps.scss

@@ -79,13 +79,9 @@
     }
 
     &.organization-step {
-        .validation-message {
-            transform: translate(16rem, -4rem);
-        }
-
         .checkbox-group {
             .validation-message {
-                transform: translate(16rem, -16rem);
+                transform: translate(20rem, -16rem);
             }
         }
 
@@ -103,7 +99,7 @@
     &.address-step {
         .select {
             .validation-message {
-                transform: translate(0, .5rem);
+                transform: translate(20rem, .5rem);
             }
         }
     }