Using accent color on login button

app/controllers/signin.js

@@ -2,6 +2,7 @@ import $ from 'jquery';
 import Controller, {inject as controller} from '@ember/controller';
 import ValidationEngine from 'ghost-admin/mixins/validation-engine';
 import {alias} from '@ember/object/computed';
+import {computed} from '@ember/object';
 import {isArray as isEmberArray} from '@ember/array';
 import {isVersionMismatchError} from 'ghost-admin/services/ajax';
 import {inject as service} from '@ember/service';
@@ -33,6 +34,11 @@ export default Controller.extend(ValidationEngine, {
 
     signin: alias('model'),
 
+    accentColor: computed('config.accent_color', function () {
+        let color = this.get('config.accent_color') || '#15171A';
+        return color;
+    }),
+
     actions: {
         authenticate() {
             return this.validateAndAuthenticate.perform();

app/styles/layouts/auth.css

@@ -17,17 +17,28 @@
     margin: 0;
 }
 
-.gh-signin .gh-btn.login {
+.gh-signin .gh-btn-login {
     height: 54px;
     border-radius: 8px;
     line-height: 54px;
     margin-top: 40px;
     max-width: unset;
     font-weight: 300;
+    transition: all 0.4s ease;
+    -webkit-font-smoothing: subpixel-antialiased;
 }
 
-.gh-signin .gh-btn.login span {
+.gh-signin .gh-btn-login svg.gh-icon-spinner rect {
+    fill: #fff !important;
+}
+
+.gh-signin .gh-btn-login:hover {
+    opacity: 0.9;
+}
+
+.gh-signin .gh-btn-login span {
     font-size: 1.8rem;
+    color: #fff;
 }
 
 .gh-signin label {

app/templates/signin.hbs

@@ -72,9 +72,10 @@
                 <GhTaskButton @buttonText="Sign in →"
                     @task={{this.validateAndAuthenticate}}
                     @showSuccess={{false}}
-                    @class="login gh-btn gh-btn-primary gh-btn-block gh-btn-icon"
+                    @class="login gh-btn gh-btn-login gh-btn-block gh-btn-icon js-login-button"
                     @type="submit"
-                    @tabindex="3" />
+                    @tabindex="3"
+                    style="background: {{this.accentColor}};" />
             </form>
 
             <p class="main-error">{{if this.flowErrors this.flowErrors}}&nbsp;</p>

tests/acceptance/error-handling-test.js

@@ -73,7 +73,7 @@ describe('Acceptance: Error Handling', function () {
                 await visit('/signin');
                 await fillIn('[name="identification"]', 'test@example.com');
                 await fillIn('[name="password"]', 'password');
-                await click('.gh-btn-primary');
+                await click('.js-login-button');
 
                 // has the refresh to update alert
                 expect(findAll('.gh-alert').length).to.equal(1);

tests/acceptance/signin-test.js

@@ -62,7 +62,7 @@ describe('Acceptance: Signin', function () {
             expect(findAll('input[name="password"]').length, 'password input field')
                 .to.equal(1);
 
-            await click('.gh-btn-primary');
+            await click('.js-login-button');
 
             expect(findAll('.form-group.error').length, 'number of invalid fields')
                 .to.equal(2);
@@ -72,7 +72,7 @@ describe('Acceptance: Signin', function () {
 
             await fillIn('[name="identification"]', 'test@example.com');
             await fillIn('[name="password"]', 'invalid');
-            await click('.gh-btn-primary');
+            await click('.js-login-button');
 
             expect(currentURL(), 'current url').to.equal('/signin');
 
@@ -91,7 +91,7 @@ describe('Acceptance: Signin', function () {
 
             await fillIn('[name="identification"]', 'test@example.com');
             await fillIn('[name="password"]', 'thisissupersafe');
-            await click('.gh-btn-primary');
+            await click('.js-login-button');
             expect(currentURL(), 'currentURL').to.equal('/dashboard');
         });
     });