From 477b58e07610a935608e03286d68593983c735ba Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Wed, 3 Mar 2021 12:29:36 +0100
Subject: [PATCH] Using accent color on login button

---
 ghost/admin/app/controllers/signin.js             |  6 ++++++
 ghost/admin/app/styles/layouts/auth.css           | 15 +++++++++++++--
 ghost/admin/app/templates/signin.hbs              |  5 +++--
 .../admin/tests/acceptance/error-handling-test.js |  2 +-
 ghost/admin/tests/acceptance/signin-test.js       |  6 +++---
 5 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/ghost/admin/app/controllers/signin.js b/ghost/admin/app/controllers/signin.js
index 45ea2f7220..4a3c95cb28 100644
--- a/ghost/admin/app/controllers/signin.js
+++ b/ghost/admin/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();
diff --git a/ghost/admin/app/styles/layouts/auth.css b/ghost/admin/app/styles/layouts/auth.css
index 1def2a7e18..50bca4edbf 100644
--- a/ghost/admin/app/styles/layouts/auth.css
+++ b/ghost/admin/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 {
diff --git a/ghost/admin/app/templates/signin.hbs b/ghost/admin/app/templates/signin.hbs
index 8a2601c218..14fba485d0 100644
--- a/ghost/admin/app/templates/signin.hbs
+++ b/ghost/admin/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>
diff --git a/ghost/admin/tests/acceptance/error-handling-test.js b/ghost/admin/tests/acceptance/error-handling-test.js
index b8dc6de484..a0c5778ee1 100644
--- a/ghost/admin/tests/acceptance/error-handling-test.js
+++ b/ghost/admin/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);
diff --git a/ghost/admin/tests/acceptance/signin-test.js b/ghost/admin/tests/acceptance/signin-test.js
index fc19fbe52a..cc033d0383 100644
--- a/ghost/admin/tests/acceptance/signin-test.js
+++ b/ghost/admin/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');
         });
     });