Merge pull request #794 from rschamp/hotfix/activate-teacher-registration

[Develop] Add "Request Account" button to Educators landing page

src/components/subnavigation/subnavigation.jsx

@@ -9,10 +9,21 @@ require('./subnavigation.scss');
  */
 var SubNavigation = React.createClass({
     type: 'SubNavigation',
+    getDefaultProps: function () {
+        return {
+            align: 'middle'
+        };
+    },
     render: function () {
         var classes = classNames(
-            'sub-nav',
-            this.props.className
+            [
+                'sub-nav',
+                this.props.className
+            ],
+            {
+                'sub-nav-align-left': this.props.align === 'left',
+                'sub-nav-align-right': this.props.align === 'right'
+            }
         );
         return (
             <div className={classes}>

src/components/subnavigation/subnavigation.scss

@@ -53,4 +53,18 @@
             }
         }
     }
+
+    &.sub-nav-align-left {
+        justify-content: flex-start;
+
+        li {
+            &:first-child {
+                margin-left: 0;
+            }
+        }
+    }
+
+    &.sub-nav-align-right {
+        justify-content: flex-end;
+    }
 }

src/views/teachers/landing/l10n.json

@@ -19,5 +19,5 @@
     "teacherlanding.creativeComputing": "The <a href=\"http://scratched.gse.harvard.edu/guide/\">Creative Computing Curriculum Guide</a> provides plans, activities, and strategies for introducing creative computing.",
     "teacherlanding.accountsTitle": "Teacher Accounts in Scratch",
     "teacherlanding.accountsDescription": "As an educator, you can request a Scratch Teacher Account, which makes it easier to create accounts for groups of students and to manage your students’ projects and comments. To learn more, see the <a href=\"/educators/faq\">Teacher Account FAQ page</a>.",
-    "teacherlanding.accountsButton": "Coming Soon"
+    "teacherlanding.requestAccount": "Request Account"
 }

src/views/teachers/landing/landing.jsx

@@ -109,7 +109,11 @@ var Landing = injectIntl(React.createClass({
                             <p>
                                 <FormattedHTMLMessage id="teacherlanding.accountsDescription" />
                             </p>
-                            <div className="coming-soon"><FormattedMessage id="teacherlanding.accountsButton" /></div>
+                            <SubNavigation className="teacher-account-buttons" align="left">
+                                <a href="/educators/register">
+                                    <li><FormattedMessage id="teacherlanding.requestAccount" /></li>
+                                </a>
+                            </SubNavigation>
                         </div>
                         <img src="/images/teachers/teacher-account.png" alt="teacher account" id="teacher-icon"/>
                     </div>

src/views/teachers/landing/landing.scss

@@ -220,6 +220,15 @@ $story-width: $cols3;
             color: $ui-white;
         }
 
+        .teacher-account-buttons {
+            li {
+                border: 2px solid $ui-white;
+                padding: 16px;
+                font-size: 16px;
+                font-weight: 500;
+            }
+        }
+
         #left {
             width: $cols4;
             max-width: $cols4;
@@ -229,24 +238,6 @@ $story-width: $cols3;
             p {
                 margin-bottom: 3.5rem;
             }
-
-            .coming-soon {
-                border: 2px solid $ui-white;
-                border-radius: 50px;
-                box-shadow: none;
-                background-color: transparent;
-                padding: 16px 16px;
-                width: $cols5 / 2;
-                text-align: center;
-                color: $ui-white;
-                font-size: 16px;
-                font-weight: 500;
-                box-sizing: border-box;
-
-                &:hover {
-                    box-shadow: none;
-                }
-            }
         }
 
         img {