Fixes #700 - added webmaker logo next to log in link

mozilla · Apr 15, 2015 · aa43ab4 · aa43ab4
1 parent bf48f75
commit aa43ab4
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 11 deletions.
diff --git a/components/login.jsx b/components/login.jsx
@@ -88,15 +88,19 @@ var Login = React.createClass({
       );
     } else if (this.state.username) {
       content = (
-        <span>
-          Logged in as {this.state.username} | <a href="" onClick={this.handleLogoutClick}>Logout</a>
-        </span>
+        <div>
+          <span className="login-text">Logged in as {this.state.username}</span>
+          <a href="" onClick={this.handleLogoutClick}>Logout</a>
+        </div>
       );
     } else {
       content = (
-        <span>
-          <Link to="join">Create an account</Link> | <a href="" onClick={this.handleLoginClick}>Log in</a>
-        </span>
+        <div>
+          <span className="login-text">
+            <img src="/img/logo-webmaker-flat.svg" alt="Webmaker logo"/><a href="" onClick={this.handleLoginClick}>Log in</a>
+          </span>
+          <Link to="join">Create an account</Link>
+        </div>
       );
     }
 

diff --git a/img/logo-webmaker-flat.svg b/img/logo-webmaker-flat.svg
diff --git a/less/components/sidebar.less b/less/components/sidebar.less
@@ -110,7 +110,17 @@ html.no-js .sidebar {
 }
 
 .sidebar-login {
-  padding: 1rem (@grid-gutter-width / 2) 3rem
+  padding: 1rem (@grid-gutter-width / 2) 3rem;
+  .login-text {
+    img {
+      width: 2.8rem;
+      margin-right: .5rem;
+    }
+    &:after {
+      content: "|";
+      padding: 0 .8rem;
+    }
+  }
 }
 
 .sidebar-menu {

diff --git a/test/browser/login.test.jsx b/test/browser/login.test.jsx
@@ -49,12 +49,10 @@ describe("login", function() {
 
   it("triggers login when user clicks login link", function() {
     var links = TestUtils.scryRenderedDOMComponentsWithTag(login, 'a');
-
-    // We should have a "create an account link" followed by a
-    // "Log in" link.
+    // We should have a "Log in" link followed by a "create an account" link
     links.length.should.equal(2);
 
-    TestUtils.Simulate.click(links[1]);
+    TestUtils.Simulate.click(links[0]);
     teachAPI.startLogin.callCount.should.equal(1);
     login.state.loggingIn.should.be.true;
   });