Style tweaks

src/components/card/card.scss

@@ -22,6 +22,7 @@
     }
 
     .form {
+        position: relative;
         padding: 3rem 4rem;
 
         .card-button {
@@ -39,10 +40,12 @@
         }
     }
 
-    .help-block {
+    .validation-message {
         $arrow-border-width: 1rem;
         display: block;
         position: absolute;
+        left: 0;
+        transform: translate(20rem, -4rem);
         margin-left: $arrow-border-width;
         border: 1px solid $active-gray;
         border-radius: 5px;
@@ -100,7 +103,7 @@
 
 @media only screen and (max-width: $desktop - 1) {
     .card {
-        .help-block {
+        .validation-message {
             position: relative;
             transform: none;
             margin: inherit;

src/components/registration/steps.jsx

@@ -122,28 +122,34 @@ module.exports = {
                     </p>
                     <Card>
                         <Form onValidSubmit={this.onValidSubmit}>
-                            <Input label={formatMessage({id: 'registration.createUsername'})}
-                                   className={this.state.validUsername}
-                                   type="text"
-                                   name="user.username"
-                                   help={this.props.usernameHelp}
-                                   validations={{
-                                       matchRegexp: /^[\w-]*$/,
-                                       minLength: 3,
-                                       maxLength: 20
-                                   }}
-                                   validationErrors={{
-                                       matchRegexp: formatMessage({
-                                           id: 'registration.validationUsernameRegexp'
-                                       }),
-                                       minLength: formatMessage({
-                                           id: 'registration.validationUsernameMinLength'
-                                       }),
-                                       maxLength: formatMessage({
-                                           id: 'registration.validationUsernameMaxLength'
-                                       })
-                                   }}
-                                   required />
+                            <div>
+                                <b>{formatMessage({id: 'registration.createUsername'})}</b>
+                                {this.props.usernameHelp ? (
+                                    <p className="help-text">{this.props.usernameHelp}</p>
+                                ):(
+                                    null
+                                )}
+                                <Input className={this.state.validUsername}
+                                       type="text"
+                                       name="user.username"
+                                       validations={{
+                                           matchRegexp: /^[\w-]*$/,
+                                           minLength: 3,
+                                           maxLength: 20
+                                       }}
+                                       validationErrors={{
+                                           matchRegexp: formatMessage({
+                                               id: 'registration.validationUsernameRegexp'
+                                           }),
+                                           minLength: formatMessage({
+                                               id: 'registration.validationUsernameMinLength'
+                                           }),
+                                           maxLength: formatMessage({
+                                               id: 'registration.validationUsernameMaxLength'
+                                           })
+                                       }}
+                                       required />
+                            </div>
                             <Input label={formatMessage({id: 'general.password'})}
                                    type={this.state.showPassword ? 'text' : 'password'}
                                    name="user.password"
@@ -419,7 +425,9 @@ module.exports = {
                                    required />
                             <div className="organization-type">
                                 <b><intl.FormattedMessage id="teacherRegistration.orgType" /></b>
-                                <p><intl.FormattedMessage id="teacherRegistration.checkAll" /></p>
+                                <p className="help-text">
+                                    <intl.FormattedMessage id="teacherRegistration.checkAll" />
+                                </p>
                                 <CheckboxGroup name="organization.type"
                                                value={[]}
                                                options={this.getOrganizationOptions()}
@@ -435,7 +443,9 @@ module.exports = {
                             </div>
                             <div className="url-input">
                                 <b><intl.FormattedMessage id="general.website" /></b>
-                                <p><intl.FormattedMessage id="teacherRegistration.notRequired" /></p>
+                                <p className="help-text">
+                                    <intl.FormattedMessage id="teacherRegistration.notRequired" />
+                                </p>
                                 <Input type="url"
                                        name="organization.url"
                                        required="isFalse"

src/components/registration/steps.scss

@@ -23,6 +23,13 @@
         }
     }
 
+    .help-text {
+        margin: .25rem 0;
+        text-align: left;
+        color: $ui-dark-gray;
+    }
+
+
     &.class-invite-step,
     &.class-welcome-step {
         .card {
@@ -34,24 +41,11 @@
         }
     }
 
-    &.username-step,
-    &.name-step,
-    &.address-step,
-    &.email-step {
-        .help-block {
-            transform: translate(15.75rem, -4rem);
-        }
-    }
-
     &.demographics-step {
         .gender-input {
             margin-top: -5.5rem;
         }
 
-        .help-block {
-            transform: translate(13rem, -2rem);
-        }
-
         .radio {
             margin-right: 2.5rem;
             line-height: 3rem;
@@ -73,37 +67,28 @@
             }
         }
 
-        .help-block {
+        .validation-message {
             margin-top: .5rem;
         }
 
         .checkbox-row {
-            .help-block {
+            .validation-message {
                 margin-top: 0;
             }
         }
     }
 
     &.organization-step {
-        .help-block {
+        .validation-message {
             transform: translate(16rem, -4rem);
         }
 
         .checkbox-group {
-            .help-block {
+            .validation-message {
                 transform: translate(16rem, -16rem);
             }
         }
 
-        .organization-type,
-        .url-input {
-            p {
-                margin: .25rem 0;
-                text-align: left;
-                color: $ui-dark-gray;
-            }
-        }
-
         input {
             &[value="8"] {
                 margin: 1rem 0;
@@ -117,7 +102,7 @@
 
     &.address-step {
         .select {
-            .help-block {
+            .validation-message {
                 transform: translate(0, .5rem);
             }
         }
@@ -138,7 +123,7 @@
 
         }
 
-        .help-block {
+        .validation-message {
             margin-top: .75rem;
         }
 
@@ -199,19 +184,9 @@
             text-align: left;
         }
 
-        &.username-step,
-        &.demographics-step,
-        &.name-step,
-        &.address-step,
-        &.email-step {
-            .help-block {
-                transform: none;
-            }
-        }
-
         &.phone-step {
             .checkbox,
-            .help-block {
+            .validation-message {
                 text-align: left;
             }
 
@@ -238,7 +213,7 @@
         &.organization-step,
         &.address-step,
         &.email-step {
-            .help-block {
+            .validation-message {
                 position: relative;
                 transform: none;
                 margin: inherit;