Finalize styling for registration flow

/cc @carljbowman

One issue we ran into is that our `frameless` configuration is in `em` rather than `rem`, making it difficult to have an aboslute grid applied uniformly at all hierarchies. For now, we're using straight `rem` calculations instead of `$cols{1,8}` in the styling until we can refactor `frameless` to use `em`.

src/components/deck/deck.scss

@@ -7,8 +7,9 @@
     min-height: 100vh;
 
     img {
-        padding: 10px 0;
+        margin-left: 2px;
-        width: 125px;
+        padding: 12px 0;
+        width: 76px;
     }
 
     .step-navigation {
@@ -50,7 +51,7 @@
     padding: 3rem 4rem;
 
     .form-group {        
-        margin-bottom: 2rem;
+        margin-bottom: 1.2rem;
 
         &.has-error {
             .input {
@@ -118,12 +119,17 @@
     }
 }
 
-.radio {
+@media only screen and (max-width: $mobile - 1) {
-    width: 50%;
+    .card {
-    line-height: 3rem;
+        width: 22.5rem;
+    }
 
-    input {
+    .form {
-        margin-right: 1rem;
+        text-align: left;
+        
+        .button {
+            width: 22.5rem;
+        }
     }
 }
 

src/components/forms/charcount.jsx

@@ -19,7 +19,7 @@ var CharCount = React.createClass({
         );
         return (
             <p className={classes}>
-                ({this.props.currentCharacters}/{this.props.maxCharacters})
+                {this.props.currentCharacters}/{this.props.maxCharacters}
             </p>
         );
     }

src/components/forms/charcount.scss

@@ -2,7 +2,9 @@
 
 p {
     &.char-count {
-        color: $active-dark-gray;
+        letter-spacing: 1px;
+        color: lighten($type-gray, 30%);
+        font-weight: 500;
 
         &.overmax {
             color: $ui-orange;

src/components/forms/checkbox-group.scss

@@ -3,7 +3,7 @@
         flex-flow: column wrap;
 
         .checkbox {
-            margin: 16px 0;
+            margin: .5rem 0;
         }
     }
 }

src/components/forms/checkbox.scss

@@ -18,7 +18,13 @@ input {
         }
 
         &:checked {
+            transition: all .5s ease;
+            box-shadow: 0 0 0 .25rem $active-gray;
             background-color: $ui-blue;
+            text-align: center;
+            text-indent: .125rem;
+            line-height: 1.25rem;
+            font-size: .75rem;
 
             &:after {
                 color: $type-white;

src/components/forms/input.scss

@@ -6,7 +6,7 @@ $pass-bg: lighten($ui-aqua, 35%);
 
 .input {
     transition: all .5s ease;
-    margin: .8rem 0;
+    margin: .75rem 0;
     border: 1px solid $active-gray;
     border-radius: 5px;
     background-color: $base-bg;

src/components/forms/phone-input.scss

@@ -1,7 +1,7 @@
 @import "../../colors";
 
 .input-group {
-    margin: .8rem 0;
+    margin: .75rem 0;
     width: 100%;
 }
 

src/components/forms/radio-group.scss

@@ -8,9 +8,9 @@
         &[type="radio"] {
             margin-top: 1px;
             border: 1px solid $active-gray;
-            border-radius: .8rem;
+            border-radius: 50%;
-            width: .8rem;
+            width: .875rem;
-            height: .8rem;
+            height: .875rem;
             appearance: none;
 
             &:checked,
@@ -19,15 +19,17 @@
             }
 
             &:checked {
+                transition: all .25s ease;
+                box-shadow: 0 0 0 .25rem $active-gray;
                 background-color: $ui-blue;
 
                 &:after {
                     display: block;
                     transform: translate(.25rem, .25rem);
-                    border-radius: .2rem;
+                    border-radius: 50%;
                     background-color: $ui-white;
-                    width: .2rem;
+                    width: .25rem;
-                    height: .2rem;
+                    height: .25rem;
                     content: "";
                 }
             }

src/components/forms/select.scss

@@ -8,11 +8,12 @@
 }
 
 select {
-    margin: .8rem 0;
+    transition: all .5s ease;
+    margin: .75rem 0;
     border: 1px solid $active-gray;
     border-radius: 5px;
-    background: $ui-light-gray url("../../../static/images/dropdown.png") no-repeat right center;
+    background: $ui-light-gray url("../../../static/svgs/forms/carot.svg") no-repeat right center;
-    background-size: 1rem 1rem;
+    padding-right: 4rem;
     width: 100%;
     height: 3rem;
     text-indent: 1rem;
@@ -20,7 +21,14 @@ select {
     appearance: none;
 
     &:focus {
+        transition: all .5s ease;
         outline: none;
+        border: 1px solid $ui-blue;
+    }
+
+    &:focus,
+    &:hover {
+        background: $ui-light-gray url("../../../static/svgs/forms/carot-hover.svg") no-repeat right center;
     }
 
     > option {

src/components/forms/textarea.scss

@@ -1,16 +1,11 @@
 @import "../../colors";
 
-$base-bg: $ui-light-gray;
-$focus-bg: lighten($ui-light-gray, 35%);
-$fail-bg: lighten($ui-orange, 35%);
-$pass-bg: lighten($ui-aqua, 35%);
-
 .textarea {
     transition: all 1s ease;
     margin: .75rem 0;
     border: 1px solid $active-gray;
     border-radius: 5px;
-    background-color: $base-bg;
+    background-color: $ui-light-gray;
     padding: .75rem 1rem;
     width: 100%;
     min-height: 15rem;
@@ -21,17 +16,10 @@ $pass-bg: lighten($ui-aqua, 35%);
     &:focus {
         transition: all 1s ease;
         outline: none;
-        border: 1px solid $active-dark-gray;
+        border: 1px solid $ui-blue;
-        background-color: $focus-bg;
     }
 
     &.fail {
-        border: 1px solid $active-dark-gray;
+        border: 1px solid $ui-orange;
-        background-color: $fail-bg;
-    }
-
-    &.pass {
-        border: 1px solid $active-dark-gray;
-        background-color: $pass-bg;
     }
 }

src/components/registration/steps.jsx

@@ -537,6 +537,8 @@ module.exports = {
         },
         render: function () {
             var formatMessage = this.props.intl.formatMessage;
+            var textAreaClass = (this.state.characterCount > this.props.maxCharacters) ? 'fail' : '';
+            
             return (
                 <Slide className="usescratch-step">
                     <h2>
@@ -551,6 +553,7 @@ module.exports = {
                         <Form onValidSubmit={this.props.onNextStep}>
                             <TextArea label={formatMessage({id: 'teacherRegistration.howUseScratch'})}
                                       name="useScratch"
+                                      className={textAreaClass}
                                       onChange={this.handleTyping}
                                       validations={{
                                           maxLength: this.props.maxCharacters

src/components/stepnavigation/stepnavigation.scss

@@ -8,14 +8,14 @@
 
     li {
         display: inline-block;
-        border-radius: 8px / $em;
+        border-radius: 50%;
-        padding: 4px / $em;
+        padding: .25rem;
 
         .indicator {
-            border-radius: 4px / $em;
+            border-radius: .25rem;
             background-color: $ui-white;
-            width: 8px / $em;
+            width: .5rem;
-            height: 8px / $em;
+            height: .5rem;
         }
 
         &.active {

src/components/tooltip/tooltip.jsx

@@ -20,7 +20,7 @@ var Tooltip = React.createClass({
         return (
             <span className={classes}>
                 <span className="tip">
-                    {this.props.title}
+                    <img src="/svgs/tooltip/info.svg" alt="info icon" />
                 </span>
                 <span className="expand">
                     {this.props.tipContent}

src/components/tooltip/tooltip.scss

@@ -3,12 +3,17 @@
 
 .tooltip {
     .tip {
-        display: inline-block;
+        display: inline-flex;
-        margin: 0 5px;
+        margin: 0 .5rem;
-        border-radius: $font-size;
+
-        background-color: $ui-blue;
+        img {
-        padding: 0 ($font-size / 2);
+            border-radius: 50%;
-        color: $type-white;
+            box-shadow: 0 0 0 .125rem $active-gray;
+            background-color: $ui-blue;
+            padding: .25rem;
+            width: .75rem;
+            height: .75rem;
+        }
     }
 
     .expand {
@@ -16,7 +21,9 @@
         position: absolute;
         transform: translate(-2.75rem, 2rem);
         visibility: hidden;
-        margin-top: $arrow-border-width;
+        z-index: 1;
+        margin-top: $arrow-border-width / 2;
+        border: 1px solid $active-gray;
         border-radius: 5px;
         background-color: $ui-blue;
         padding: 1rem;
@@ -32,8 +39,8 @@
 
             transform: rotate(45deg);
 
-            border-bottom: 5px solid $ui-blue;
+            border-top: 1px solid $active-gray;
-            border-left: 5px solid $ui-blue;
+            border-left: 1px solid $active-gray;
             border-radius: 5px;
 
             background-color: $ui-blue;

src/routes.json

@@ -95,7 +95,8 @@
         "name": "teacherregistration",
         "pattern": "^/educators/register$",
         "view": "teacherregistration/teacherregistration",
-        "title": "Teacher Registration"
+        "title": "Teacher Registration",
+        "viewportWidth": "device-width"
     },
     {
         "name": "teacherwaitingroom",

src/views/teacherregistration/teacherregistration.jsx

@@ -79,8 +79,6 @@ var TeacherRegistration = React.createClass({
                     <Steps.RegistrationError {... this.state} />
                 :
                     <Progression {... this.state}>
-                        <Steps.UsernameStep     onNextStep={this.advanceStep}
-                                                waiting={this.state.waiting} />
                         <Steps.DemographicsStep onNextStep={this.advanceStep}
                                                 waiting={this.state.waiting} />
                         <Steps.NameStep         onNextStep={this.advanceStep}

src/views/teacherregistration/teacherregistration.scss

@@ -3,6 +3,11 @@
 
 @include responsive-layout (".teacher-registration", ".slide");
 
+html,
+body {
+    background-color: $ui-purple;
+}
+
 .teacher-registration {
     background-color: $ui-purple;
 
@@ -14,14 +19,10 @@
     .other-input {
         float: right;
         width: 90%;
-    }
 
-    .gender-input {
+        .row {
-        margin-top: -5.75rem;
+            margin-left: .5rem;
-    }
+        }
-
-    .other-input {
-        margin-top: -5.875rem;
     }
 
     .username-step,
@@ -34,9 +35,22 @@
     }
 
     .demographics-step {
+        .gender-input {
+            margin-top: -5.5rem;
+        }
+
         .help-block {
             transform: translate(14rem, -4rem);
         }
+
+        .radio {
+            margin-right: 2.5rem;
+            line-height: 3rem;
+
+            input {
+                margin-right: 1rem;
+            }
+        }
     }
 
     .phone-step {
@@ -74,13 +88,31 @@
                 color: $ui-dark-gray;
             }
         }
+
+        input {
+            &[value="8"] {
+                margin: 1rem 0;
+            }
+        }
+
+        .other-input {
+            margin-top: -5.75rem;
+        }
     }
 
     .usescratch-step {
         .form {
             .form-group {
                 margin-bottom: 0;
+
+                &.has-error {
+                    .textarea {
+                        border: 1px solid $ui-orange;
+                    }
+                }
             }
+
+
         }
 
         .help-block {
@@ -118,13 +150,55 @@
     }
 }
 
-@media only screen and (max-width: $desktop - 1) {
+@media only screen and (max-width: $mobile - 1) {
     .teacher-registration {
-        .username-step,
+        .demographics-step {
-        .demographics-step,
+            .radio {
-        .name-step{
+                width: 100%;
-            .help-block {
+                text-align: left;
-                transform: none;
+            }
+        }
+
+        .last-step {
+            .card {
+                margin: 0 auto;
+                width: 18.75rem;
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: $desktop - 1) {
+    .teacher-registration {
+        .username-step,
+        .demographics-step,
+        .name-step {
+            .help-block {
+                transform: none;
+            }
+        }
+
+        .phone-step {
+            .checkbox,
+            .help-block {
+                text-align: left;
+            }
+
+            .checkbox {
+                margin-bottom: 1rem;
+            }
+        }
+
+        .organization-step {
+            .organization-type,
+            .url-input {
+                p {
+                    text-align: center;
+                }
+            }
+
+            .checkbox-group {
+                text-align: left;
             }
         }
     }

static/svgs/forms/carot-hover.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><title>carot</title><rect x="0.01" width="48" height="48" fill="#231f20" opacity="0.1"/><path d="M24,29.43a1.87,1.87,0,0,1-1.33-.55l-5.11-5.11a1.87,1.87,0,0,1,0-2.65c0.73-.73,12.14-0.73,12.87,0a1.87,1.87,0,0,1,0,2.65l-5.11,5.11A1.87,1.87,0,0,1,24,29.43Z" fill="#b3b3b3"/></svg>

static/svgs/forms/carot.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><title>carot-hover</title><path d="M24,29.43a1.87,1.87,0,0,1-1.33-.55l-5.11-5.11a1.87,1.87,0,0,1,0-2.65c0.73-.73,12.14-0.73,12.87,0a1.87,1.87,0,0,1,0,2.65l-5.11,5.11A1.87,1.87,0,0,1,24,29.43Z" fill="#b3b3b3"/><rect x="0.01" width="1" height="48" fill="#231f20" opacity="0.1"/></svg>

static/svgs/tooltip/info.svg

@@ -0,0 +1 @@
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" width="8" height="12" viewBox="0 0 8 12"><title>info</title><g id="_Group_" data-name="&lt;Group&gt;"><circle id="_Path_" data-name="&lt;Path&gt;" cx="4.71" cy="2.23" r="1.23" fill="#fff"/><path id="_Path_2" data-name="&lt;Path&gt;" d="M5.88,10.21l-1.63.7A1.14,1.14,0,0,1,2.69,9.65L3.28,6.5A0.43,0.43,0,0,0,2.83,6L2.17,6a0.34,0.34,0,0,1-.36-0.25h0A0.34,0.34,0,0,1,2,5.41l1.63-.86A1.14,1.14,0,0,1,5.26,5.78l-0.6,3a0.43,0.43,0,0,0,.46.51l0.51,0a0.52,0.52,0,0,1,.55.39h0A0.52,0.52,0,0,1,5.88,10.21Z" fill="#fff"/></g></svg>