Merge pull request #610 from mewtaylor/cleanup/teacher-styling

styling cleanup for teacher registration

src/components/deck/deck.scss

@@ -14,14 +14,14 @@
 
     .step-navigation {
         margin-top: 2rem;
+        text-align: center;
     }
-}
 
-.slide {
+    .slide {
         max-width: 28.75rem;
 
         h2,
-    p {
+        .description {
             text-align: center;  
             color: $type-white;  
         }
@@ -30,24 +30,14 @@
             margin-top: 0;
             margin-bottom: 2rem;
         }
-}
+    }
 
-.card {
+    .card {
         margin: 0 auto;
         width: 23.75rem;
-
-    &,
-    h2,
-    p {
-        color: $type-gray;
     }
-}
 
-.step-navigation {
+    .form {
-    text-align: center;
-}
-
-.form {
         padding: 3rem 4rem;
 
         .form-group {        
@@ -78,13 +68,13 @@
                 box-shadow: none;
             }
         }
-}
+    }
 
-.input {
+    .input {
         width: $cols5;
-}
+    }
 
-.help-block {
+    .help-block {
         $arrow-border-width: 1rem;
         display: block;
         position: absolute;
@@ -117,9 +107,11 @@
 
             content: "";
         }
+    }
 }
 
 @media only screen and (max-width: $mobile - 1) {
+    .deck {
         .card {
             width: 22.5rem;
         }
@@ -131,15 +123,19 @@
                 width: 22.5rem;
             }
         }
+    }
 }
 
 @media only screen and (max-width: $tablet - 1) {
+    .deck {
         .input {
             width: 90%;
         }
+    }
 }
 
 @media only screen and (max-width: $desktop - 1) {
+    .deck {
         .help-block {
             position: relative;
             transform: none;
@@ -151,4 +147,5 @@
                 display: none;
             }
         }
+    }
 }

src/components/forms/charcount.scss

@@ -1,7 +1,6 @@
 @import "../../colors";
 
-p {
+.char-count {
-    &.char-count {
     letter-spacing: 1px;
     color: lighten($type-gray, 30%);
     font-weight: 500;
@@ -9,5 +8,4 @@ p {
     &.overmax {
         color: $ui-orange;
     }
-    }
 }

src/components/forms/checkbox-group.scss

@@ -1,4 +1,5 @@
 .checkbox-group {
+    .row {
         .col-sm-9 {
             flex-flow: column wrap;
 
@@ -6,4 +7,5 @@
                 margin: .5rem 0;
             }
         }
+    }
 }

src/components/forms/checkbox.scss

@@ -6,10 +6,8 @@
         label {
             font-weight: 300;
         }
-    }
-}
 
-input {
+        input {
             &[type=checkbox] {
                 display: block;
                 float: left;
@@ -40,4 +38,6 @@ input {
                     }
                 }
             }
+        }
+    }
 }

src/components/forms/radio-group.scss

@@ -6,9 +6,8 @@
             font-weight: 300;
         }
     }
-}
 
-.col-sm-9 {
+    .col-sm-9 {
         display: flex;
         flex-flow: row wrap;
 
@@ -43,4 +42,5 @@
                 }
             }
         }
+    }
 }

src/components/forms/select.scss

@@ -5,9 +5,8 @@
     label {
         font-weight: 500;
     }
-}
 
-select {
+    select {
         transition: all .5s ease;
         margin: .75rem 0;
         border: 1px solid $active-gray;
@@ -35,4 +34,5 @@ select {
             background-color: $ui-white;
             width: 100%;
         }
+    }
 }

src/components/registration/steps.jsx

@@ -291,7 +291,7 @@ module.exports = {
                     <h2>
                         <intl.FormattedMessage id="teacherRegistration.phoneStepTitle" />
                     </h2>
-                    <p>
+                    <p className="description">
                         <intl.FormattedMessage id="teacherRegistration.phoneStepDescription" />
                         <Tooltip title={'?'}
                                  tipContent={formatMessage({id: 'teacherRegistration.nameStepTooltip'})} />
@@ -359,7 +359,7 @@ module.exports = {
                     <h2>
                         <intl.FormattedMessage id="teacherRegistration.orgStepTitle" />
                     </h2>
-                    <p>
+                    <p className="description">
                         <intl.FormattedMessage id="teacherRegistration.orgStepDescription" />
                         <Tooltip title={'?'}
                                  tipContent={formatMessage({id: 'teacherRegistration.nameStepTooltip'})} />
@@ -448,7 +448,7 @@ module.exports = {
                     return this.props.onNextStep(formData);
                 } else {
                     return invalidate({
-                        'all': <FormattedMessage id="teacherRegistration.addressValidationError" />
+                        'all': <intl.FormattedMessage id="teacherRegistration.addressValidationError" />
                     });
                 }
             }.bind(this));
@@ -693,7 +693,7 @@ module.exports = {
                 <Slide className="error-step">
                     <h2>Something went wrong</h2>
                     <Card>
-                        <h2>There was an error while processing your registration</h2>
+                        <h4>There was an error while processing your registration</h4>
                         <p>
                             {this.props.registrationError}
                         </p>