Add formatting for teacher reg flow

src/components/card/card.scss

@@ -3,5 +3,6 @@
 
 .card {
     border-radius: 8px / $em;
+    box-shadow: 0 0 0 .125rem $active-gray;
     background-color: $ui-white;
 }

src/components/deck/deck.jsx

@@ -8,8 +8,10 @@ var Deck = React.createClass({
     render: function () {
         return (
             <div className={classNames(['deck', this.props.className])}>
-                <img src="/images/logo_sm.png" />
-                {this.props.children}
+                <div className="inner">
+                    <img src="/images/logo_sm.png" />
+                    {this.props.children}
+                </div>
             </div>
         );
     }

src/components/deck/deck.scss

+@import "../../colors";
 @import "../../frameless";
 
 @include responsive-layout (".deck", ".slide");
 
 .deck {
     min-height: 100vh;
+
+    img {
+        padding: 10px 0;
+        width: 125px;
+    }
+
+    .step-navigation {
+        margin-top: 2rem;
+    }
+}
+
+.slide {
+    max-width: 28.75rem;
+
+    h2,
+    p {
+        text-align: center;  
+        color: $type-white;  
+    }
+
+    .description {
+        margin-top: 0;
+        margin-bottom: 2rem;
+    }
+}
+
+.card {
+    margin: 0 auto;
+    width: 23.75rem;
+
+    &,
+    h2,
+    p {
+        color: $type-gray;
+    }
+}
+
+.step-navigation {
+    text-align: center;
+}
+
+.form {
+    padding: 3rem 4rem;
+
+    .form-group {        
+        margin-bottom: 2rem;
+
+        &.has-error {
+            .input {
+                border: 1px solid $ui-orange;
+            }
+        }
+    }
+
+    .button {
+        margin: 0 0 -3rem -4rem;
+        border-radius: .5rem;
+        box-shadow: none;
+        width: 23.75rem;
+        height: 4rem;
+
+        &.card-button {
+            display: block;
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+            background-color: $ui-aqua;
+        }
+
+        &:hover {
+            box-shadow: none;
+        }
+    }
+}
+
+.input {
+    width: $cols5;
+}
+
+.help-block {
+    $arrow-border-width: 1rem;
+    display: block;
+    position: absolute;
+    margin-left: $arrow-border-width;
+    border: 1px solid $active-gray;
+    border-radius: 5px;
+    background-color: $ui-orange;
+    padding: 1rem;
+    max-width: 18.75rem;
+    min-height: 1rem;
+    max-height: 3rem;
+    overflow: visible;
+    color: $type-white;
+
+    &:before {
+        display: block;
+        position: absolute;
+        top: 1rem;
+        left: -$arrow-border-width / 2;
+
+        transform: rotate(45deg);
+
+        border-bottom: 1px solid $active-gray;
+        border-left: 1px solid $active-gray;
+        border-radius: 5px;
+
+        background-color: $ui-orange;
+        width: $arrow-border-width;
+        height: $arrow-border-width;
+
+        content: "";
+    }
+}
+
+.radio {
+    width: 50%;
+    line-height: 3rem;
+
+    input {
+        margin-right: 1rem;
+    }
+}
+
+@media only screen and (max-width: $tablet - 1) {
+    .input {
+        width: 90%;
+    }
+}
+
+@media only screen and (max-width: $desktop - 1) {
+    .help-block {
+        position: relative;
+        transform: none;
+        margin: inherit;
+        width: 100%;
+        height: inherit;
+
+        &:before {
+            display: none;
+        }
+    }
 }

src/components/flex-row/flex-row.scss

@@ -12,7 +12,28 @@
         justify-content: center;
     }
 
+    &.uneven {
+        align-items: flex-start;
+
+        .short {
+            width: $cols3;
+        }
+
+        .long {
+            width: $cols8;
+            text-align: left;
+        }
+    }
+
     @media only screen and (max-width: $tablet - 1) {
         flex-direction: column;
+
+        &.uneven {
+            .short,
+            .long {
+                margin: auto;
+                width: 90%;
+            }
+        }
     }
 }

src/components/forms/charcount.jsx

+var classNames = require('classnames');
+var React = require('react');
+
+require('./charcount.scss');
+
+var CharCount = React.createClass({
+    type: 'CharCount',
+    getDefaultProps: function () {
+        return {
+            maxCharacters: 0,
+            currentCharacters: 0
+        };
+    },
+    render: function () {
+        var classes = classNames(
+            'char-count',
+            this.props.className,
+            {overmax: (this.props.currentCharacters > this.props.maxCharacters)}
+        );
+        return (
+            <p className={classes}>
+                ({this.props.currentCharacters}/{this.props.maxCharacters})
+            </p>
+        );
+    }
+});
+
+module.exports = CharCount;

src/components/forms/charcount.scss

+@import "../../colors";
+
+p {
+    &.char-count {
+        color: $active-dark-gray;
+
+        &.overmax {
+            color: $ui-orange;
+        }
+    }
+}

src/components/forms/checkbox-group.jsx

@@ -5,6 +5,7 @@ var defaultValidationHOC = require('./validations.jsx').defaultValidationHOC;
 var inputHOC = require('./input-hoc.jsx');
 
 require('./row.scss');
+require('./checkbox-group.scss');
 
 var CheckboxGroup = React.createClass({
     type: 'CheckboxGroup',
@@ -14,7 +15,9 @@ var CheckboxGroup = React.createClass({
             this.props.className
         );
         return (
-            <FRCCheckboxGroup {... this.props} className={classes} />
+            <div className={classes}>
+                <FRCCheckboxGroup {... this.props} className={classes} />
+            </div>
         );
     }
 });

src/components/forms/checkbox-group.scss

+.checkbox-group {
+    .col-sm-9 {
+        flex-flow: column wrap;
+
+        .checkbox {
+            margin: 16px 0;
+        }
+    }
+}

src/components/forms/checkbox.jsx

@@ -5,6 +5,7 @@ var defaultValidationHOC = require('./validations.jsx').defaultValidationHOC;
 var inputHOC = require('./input-hoc.jsx');
 
 require('./row.scss');
+require('./checkbox.scss');
 
 var Checkbox = React.createClass({
     type: 'Checkbox',
@@ -14,7 +15,9 @@ var Checkbox = React.createClass({
             this.props.className
         );
         return (
-            <FRCCheckbox {... this.props} rowClassName={classes} />
+            <div className={classes}>
+                <FRCCheckbox {... this.props} />
+            </div>
         );
     }
 });

src/components/forms/checkbox.scss

+@import "../../colors";
+@import "../../frameless";
+
+input {
+    &[type=checkbox] {
+        display: block;
+        float: left;
+        margin-right: 1rem;
+        border: 1px solid $active-gray;
+        border-radius: 3px;
+        width: 1.25rem;
+        height: 1.25rem;
+        appearance: none;
+
+        &:checked,
+        &:focus {
+            outline: none;
+        }
+
+        &:checked {
+            background-color: $ui-blue;
+
+            &:after {
+                color: $type-white;
+                content: "\2714";
+            }
+        }
+    }
+}

src/components/forms/input.jsx

@@ -12,14 +12,33 @@ var Input = React.createClass({
     getDefaultProps: function () {
         return {};
     },
+    getInitialState: function () {
+        return {
+            status: ''
+        };
+    },
+    onValid: function () {
+        this.setState({
+            status: 'pass'
+        });
+    },
+    onInvalid: function () {
+        this.setState({
+            status: 'fail'
+        });
+    },
     render: function () {
         var classes = classNames(
             'input',
+            this.state.status,
             this.props.className
         );
         return (this.props.type === 'submit' || this.props.noformsy ?
             <input {... this.props} className={classes} /> :
-            <FRCInput {... this.props} className={classes} />
+            <FRCInput {... this.props}
+                      className={classes}
+                      onValid={this.onValid}
+                      onInvalid={this.onInvalid} />
         );
     }
 });

src/components/forms/input.scss

 @import "../../colors";
+@import "../../frameless";
 
-$base-bg: $ui-white;
-$focus-bg: lighten($ui-blue, 35%);
-$fail-bg: lighten($ui-orange, 35%);
+$base-bg: $ui-light-gray;
 $pass-bg: lighten($ui-aqua, 35%);
 
 .input {
-    transition: all 1s ease;
-    margin: .5em 0;
+    transition: all .5s ease;
+    margin: .8rem 0;
     border: 1px solid $active-gray;
     border-radius: 5px;
     background-color: $base-bg;
-    padding: .75em 1em;
+    padding: 0 1rem;
+    height: 3rem;
     color: $type-gray;
-    font-size: .8rem;
+    font-size: .875rem;
 
     &:focus {
-        transition: all 1s ease;
+        transition: all .5s ease;
         outline: none;
-        border: 1px solid $active-dark-gray;
-        background-color: $focus-bg;
+        border: 1px solid $ui-blue;
     }
 
     &.fail {
-        border: 1px solid $active-dark-gray;
-        background-color: $fail-bg;
+        border: 1px solid $ui-orange;
     }
 
     &.pass {
         border: 1px solid $active-dark-gray;
         background-color: $pass-bg;
     }
+
+    label {
+        font-weight: 500;
+    }
 }

src/components/forms/phone-input.jsx

@@ -12,6 +12,7 @@ var inputHOC = require('./input-hoc.jsx');
 var allIso2 = allCountries.map(function (country) {return country.iso2;});
 
 require('./row.scss');
+require('./phone-input.scss');
 
 var PhoneInput = React.createClass({
     displayName: 'PhoneInput',

src/components/forms/phone-input.scss

+@import "../../colors";
+
+.input-group {
+    margin: .8rem 0;
+    width: 100%;
+}
+
+.react-tel-input {
+    width: 100%;
+
+    input {
+        &[type=tel] {
+            background-color: $ui-light-gray;
+            height: 3rem;
+
+            &:focus {
+                outline: none;
+            }
+        }
+    }
+
+    .flag-dropdown {
+        background-color: $ui-light-gray;
+        height: 3rem;
+
+        .selected-flag {
+            background-color: $ui-light-gray;
+            height: 100%;
+
+            &:hover,
+            &:focus,
+            &:active {
+                background-color: $active-gray;
+            }
+        }
+
+        .country-list {
+            top: 3rem;
+            background-color: $ui-light-gray;
+        }
+    }
+}

src/components/forms/radio-group.jsx

@@ -5,6 +5,7 @@ var defaultValidationHOC = require('./validations.jsx').defaultValidationHOC;
 var inputHOC = require('./input-hoc.jsx');
 
 require('./row.scss');
+require('./radio-group.scss');
 
 var RadioGroup = React.createClass({
     type: 'RadioGroup',

src/components/forms/radio-group.scss

+@import "../../colors";
+
+.col-sm-9 {
+    display: flex;
+    flex-flow: row wrap;
+
+    input {
+        &[type="radio"] {
+            margin-top: 1px;
+            border: 1px solid $active-gray;
+            border-radius: .8rem;
+            width: .8rem;
+            height: .8rem;
+            appearance: none;
+
+            &:checked,
+            &:focus {
+                outline: none;
+            }
+
+            &:checked {
+                background-color: $ui-blue;
+
+                &:after {
+                    display: block;
+                    transform: translate(.25rem, .25rem);
+                    border-radius: .2rem;
+                    background-color: $ui-white;
+                    width: .2rem;
+                    height: .2rem;
+                    content: "";
+                }
+            }
+        }
+    }
+}

src/components/forms/select.jsx

@@ -23,7 +23,9 @@ var Select = React.createClass({
             props = defaults({}, this.props, {value: this.props.options[0].value});
         }
         return (
-            <FRCSelect {... props} className={classes} />
+            <div className={classes}>
+                <FRCSelect {... props} />
+            </div>
         );
     }
 });

src/components/forms/select.scss

 @import "../../colors";
+@import "../../frameless";
 
 .select {
-    background-color: $ui-white;
-    width: 220px;
-    height: 28px;
-    line-height: 28px;
-    font-size: 1em;
+    label {
+        font-weight: 500;
+    }
+}
+
+select {
+    margin: .8rem 0;
+    border: 1px solid $active-gray;
+    border-radius: 5px;
+    background: $ui-light-gray url("../../../static/images/dropdown.png") no-repeat right center;
+    background-size: 1rem 1rem;
+    width: 100%;
+    height: 3rem;
+    text-indent: 1rem;
+    font-size: .875rem;
+    appearance: none;
+
+    &:focus {
+        outline: none;
+    }
+
+    > option {
+        background-color: $ui-white;
+        width: 100%;
+    }
 }

src/components/forms/textarea.scss

 @import "../../colors";
 
-$base-bg: $ui-white;
-$focus-bg: lighten($ui-blue, 35%);
+$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: .5em 0;
+    margin: .75rem 0;
     border: 1px solid $active-gray;
     border-radius: 5px;
     background-color: $base-bg;
-    padding: .75em 1em;
+    padding: .75rem 1rem;
+    width: 100%;
+    min-height: 15rem;
+    line-height: 1.75em;
     color: $type-gray;
-    font-size: .8rem;
+    font-size: .875rem;
 
     &:focus {
         transition: all 1s ease;

src/components/page/conference/page.scss

@@ -101,29 +101,6 @@
     section {
         padding: 64px 0;
     }
-
-    .flex-row {
-        &.uneven {
-            align-items: flex-start;
-
-            .short {
-                width: $cols3;
-            }
-
-            .long {
-                width: $cols8;
-                text-align: left;
-            }
-
-            @media only screen and (max-width: $tablet - 1) {
-                .short,
-                .long {
-                    margin: auto;
-                    width: 90%;
-                }
-            }
-        }
-    }
 }
 
 @media only screen and (max-width: $mobile - 1) {

src/components/slide/slide.scss

+@import "../../frameless";
+
 .slide {
+    padding: 10px;
+}
+
+@media only screen and (max-width: $tablet - 1) {
+    .slide {
+        padding: 0;
+    }
 }

src/components/tooltip/tooltip.jsx

+var classNames = require('classnames');
+var React = require('react');
+
+require('./tooltip.scss');
+
+var Tooltip = React.createClass({
+    type: 'Tooltip',
+    getDefaultProps: function () {
+        return {
+            title: '',
+            tipContent: ''
+        };
+    },
+    render: function () {
+        var classes = classNames(
+            'tooltip',
+            this.props.className,
+            {overmax: (this.props.currentCharacters > this.props.maxCharacters)}
+        );
+        return (
+            <span className={classes}>
+                <span className="tip">
+                    {this.props.title}
+                </span>
+                <span className="expand">
+                    {this.props.tipContent}
+                </span>
+            </span>
+        );
+    }
+});
+
+module.exports = Tooltip;

src/components/tooltip/tooltip.scss

+@import "../../colors";
+@import "../../frameless";
+
+.tooltip {
+    .tip {
+        display: inline-block;
+        margin: 0 5px;
+        border-radius: $font-size;
+        background-color: $ui-blue;
+        padding: 0 ($font-size / 2);
+        color: $type-white;
+    }
+
+    .expand {
+        $arrow-border-width: 1rem;
+        position: absolute;
+        transform: translate(-2.75rem, 2rem);
+        visibility: hidden;
+        margin-top: $arrow-border-width;
+        border-radius: 5px;
+        background-color: $ui-blue;
+        padding: 1rem;
+        width: 13.75rem;
+        text-align: left;
+        color: $type-white;
+
+        &:before {
+            display: block;
+            position: absolute;
+            top: -$arrow-border-width / 2;
+            left: $arrow-border-width;
+
+            transform: rotate(45deg);
+
+            border-bottom: 5px solid $ui-blue;
+            border-left: 5px solid $ui-blue;
+            border-radius: 5px;
+
+            background-color: $ui-blue;
+            width: $arrow-border-width;
+            height: $arrow-border-width;
+
+            content: "";
+        }
+    }
+
+    &:hover {
+        .expand {
+            visibility: visible;
+        }
+    }
+}
+
+@media only screen and (max-width: $desktop - 1) {
+    .tooltip {
+        display: block;
+
+        .expand {
+            display: none;
+            position: relative;
+            clear: both;
+            transform: none;
+
+            &:before {
+                display: none;
+            }
+        }
+
+        &:hover {
+            .expand {
+                display: block;
+                margin: 5px auto;
+            }
+        }
+    }
+}

src/main.scss

@@ -83,7 +83,8 @@ p {
     }
 }
 
-b {
+b,
+strong {
     font-weight: 500;
 }
 

src/views/teacherregistration/l10n.json

 {
     "teacherRegistration.usernameStepDescription": "Fill in the following forms to request an account. The approval process may take up to 24 hours.",
     "teacherRegistration.usernameStepTitle": "Request a Teacher Account",
-    "teacherRegistration.validationUsernameRegexp": "Your username may only contain characters and -",
+    "teacherRegistration.validationUsernameRegexp": "Your username may only contain characters and \"-\"",
     "teacherRegistration.validationUsernameMinLength": "Usernames must be at least 3 characters",
     "teacherRegistration.validationUsernameMaxLength": "Usernames must be at most 20 characters",
     "teacherRegistration.validationPasswordLength": "Passwords must be at least six characters",
@@ -12,7 +12,8 @@
     "teacherRegistration.personalStepTitle": "Personal Information",
     "teacherRegistration.personalStepDescription": "Your individual responses will not be displayed publicly, and will be kept confidential and secure",
     "teacherRegistration.nameStepTitle": "First & Last Name",
-    "teacherRegistration.nameStepDescription": "Your name will not be displayed publicly, and will be kept confidential and secure",
+    "teacherRegistration.nameStepDescription": "Your name will not be displayed publicly, and will be kept confidential and secure.",
+    "teacherRegistration.nameStepTooltip": "This information is used for verification and to aggregate usage statistics.",
     "teacherRegistration.firstName": "First Name",
     "teacherRegistration.lastName": "Last Name",
     "teacherRegistration.phoneStepTitle": "Phone Number",
@@ -34,11 +35,12 @@
     "teacherRegistration.orgChoiceMuseum": "Museum",
     "teacherRegistration.orgChoiceLibrary": "Library",
     "teacherRegistration.orgChoiceCamp": "Camp",
-    "teacherRegistration.orgChoiceOther": "Other",
+    "teacherRegistration.orgChoiceOther": " ",
+    "teacherRegistration.notRequired": "Not Required",
     "teacherRegistration.selectCountry": "select country",
     "teacherRegistration.validationAddress": "This doesn't look like a real address",
     "teacherRegistration.addressLine1": "Address Line 1",
-    "teacherRegistration.addressLine2": "Address Line 2",
+    "teacherRegistration.addressLine2": "Address Line 2 (Optional)",
     "teacherRegistration.zipCode": "ZIP",
     "teacherRegistration.stateProvince": "State",
     "teacherRegistration.city": "City",
@@ -46,6 +48,7 @@
     "teacherRegistration.addressStepDescription": "Your information will not be displayed publicly, and will be kept confidential and secure.",
     "teacherRegistration.useScratchStepTitle": "How you plan to use Scratch",
     "teacherRegistration.useScratchStepDescription": "Tell us a little about how you plan to use Scratch. Why do we ask for this information",
+    "teacherRegistration.useScratchMaxLength": "Description must be at most 300 characters",
     "teacherRegistration.howUseScratch": "How do you plan to use Scratch at your organization?",
     "teacherRegistration.emailStepTitle": "Email Address",
     "teacherRegistration.emailStepDescription": "We will send you a confirmation email that will allow you to access your Scratch Teacher Account.",

src/views/teacherregistration/teacherregistration.jsx

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

src/views/teacherregistration/teacherregistration.scss

 @import "../../colors";
+@import "../../frameless";
+
+@include responsive-layout (".teacher-registration", ".slide");
 
 .teacher-registration {
     background-color: $ui-purple;
 
-    .slide {
-        h1,
-        p {
-            color: $type-white;    
+    .demographics-checkbox-is-robot {
+        display: none;
+    }
+
+    .gender-input,
+    .other-input {
+        float: right;
+        width: 90%;
+    }
+
+    .gender-input {
+        margin-top: -5.75rem;
+    }
+
+    .other-input {
+        margin-top: -5.875rem;
+    }
+
+    .username-step,
+    .name-step,
+    .address-step,
+    .email-step {
+        .help-block {
+            transform: translate(15.5rem, -4rem);
         }
     }
 
-    .card {
-        &,
-        h2,
-        p {
-            color: $type-gray;
+    .demographics-step {
+        .help-block {
+            transform: translate(14rem, -4rem);
         }
     }
 
-    .card-button {
-        display: block;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-        background-color: $ui-aqua;
-        width: 100%;
+    .phone-step {
+        .form-group {
+            margin-bottom: 2rem;
+        }
+
+        input {
+            &[type=checkbox] {
+                margin-bottom: 1.25rem;
+            }
+        }
+
+        .help-block {
+            margin-top: .7rem;
+        }
+
+        .checkbox-row {
+            .help-block {
+                margin-top: 0;
+            }
+        }
     }
 
-    .step-navigation {
-        text-align: center;
+    .organization-step {
+        .help-block {
+            transform: translate(16rem, -4rem);
+        }
+
+        .organization-type,
+        .url-input {
+            p {
+                margin: .25rem 0;
+                text-align: left;
+                color: $ui-dark-gray;
+            }
+        }
     }
 
-    .demographics-checkbox-is-robot {
-        display: none;
+    .usescratch-step {
+        .form {
+            .form-group {
+                margin-bottom: 0;
+            }
+        }
+
+        .help-block {
+            margin-top: .75rem;
+        }
+
+        p {
+            &.char-count {
+                margin-top: 0;
+                margin-bottom: 1rem;
+                text-align: right;
+            }
+        }
+    }
+
+    .last-step {
+        &.slide {
+            max-width: 38.75rem;
+        }
+
+        .card {
+            margin: 1rem 0;
+            padding: 1.5rem;
+            width: initial;
+
+            h4,
+            p {
+                text-align: left;
+            }
+
+            p {
+                margin: 0;
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: $desktop - 1) {
+    .teacher-registration {
+        .username-step,
+        .demographics-step,
+        .name-step{
+            .help-block {
+                transform: none;
+            }
+        } 
     }
 }