UX: Add a separate "Sign Up" button

app/assets/javascripts/discourse/templates/header.js.handlebars

@@ -44,6 +44,9 @@
         <button {{action showLogin}} class='btn btn-primary btn-small login-button'>
           {{icon user}} {{i18n log_in}}
         </button>
+        <button {{action showCreateAccount}} class='btn btn-primary btn-small sign-up-button'>
+          {{icon user}} {{i18n sign_up}}
+        </button>
       {{/unless}}
       <ul class='icons clearfix' role='navigation'>
         {{#if currentUser}}

app/assets/javascripts/discourse/templates/modal/create_account.js.handlebars

@@ -80,7 +80,9 @@
     {{#if formSubmitted}}
       &nbsp; <i class='fa fa-spinner fa-spin'></i>
     {{else}}
-      &nbsp; <a {{action showLogin}}>{{i18n cancel}}</a>
+      <button class="btn btn-large" id="login-link" {{action showLogin}}>
+        {{i18n log_in}}
+      </button>
     {{/if}}
   </div>
 {{/unless}}

app/assets/stylesheets/common/base/header.scss

@@ -50,12 +50,17 @@
         text-overflow: ellipsis;
       }
     }
-    button.login-button {
+    button.login-button, button.sign-up-button {
       float: left;
       margin-top: 7px;
       padding: 6px 10px;
       .fa { margin-right: 3px; }
     }
+
+    button.sign-up-button {
+      margin-left: 7px;
+    }
+
     .icons {
       float: left;
       text-align: center;

config/locales/client.en.yml

@@ -97,6 +97,7 @@ en:
     yes_value: "Yes"
     generic_error: "Sorry, an error has occurred."
     generic_error_with_reason: "An error occurred: %{error}"
+    sign_up: "Sign Up"
     log_in: "Log In"
     age: "Age"
     last_post: "Last Post"

test/javascripts/integration/sign-in-test.js.es6

@@ -26,8 +26,7 @@ test("sign in", function() {
 
 test("create account", function() {
   visit("/");
-  click("header .login-button");
-  click('#new-account-link');
+  click("header .sign-up-button");
 
   andThen(function() {
     ok(exists('.create-account'), "it shows the create account modal");