Added site brand color to signup button for new staff users

ghost/admin/app/controllers/signup.js

@@ -1,5 +1,6 @@
 import Controller from '@ember/controller';
 import {alias} from '@ember/object/computed';
+import {computed} from '@ember/object';
 import {get} from '@ember/object';
 import {isArray as isEmberArray} from '@ember/array';
 import {
@@ -21,6 +22,11 @@ export default Controller.extend({
 
     signupDetails: alias('model'),
 
+    accentColor: computed('config.accent_color', function () {
+        let color = this.get('config.accent_color');
+        return color;
+    }),
+
     actions: {
         validate(property) {
             return this.signupDetails.validate({property});
@@ -56,7 +62,7 @@ export default Controller.extend({
         } catch (error) {
             // ValidationEngine throws undefined
             if (!error) {
-                this.set('flowErrors', 'Please fill out the form to complete your sign-up');
+                this.set('flowErrors', 'Please fill out the form to complete your signup');
                 return false;
             }
 

ghost/admin/app/styles/layouts/auth.css

@@ -74,7 +74,8 @@
     fill: #fff !important;
 }
 
-.gh-signin .gh-btn-login:hover {
+.gh-signin .gh-btn-login:hover,
+.gh-signup .gh-btn-signup:hover {
     opacity: 0.9;
 }
 
@@ -131,7 +132,8 @@
     font-size: 1.8rem;
 }
 
-.gh-signin .gh-input:focus:not(.gh-signin .gh-input.reset-password:focus) {
+.gh-signin .gh-input:focus:not(.gh-signin .gh-input.reset-password:focus),
+.gh-signup .gh-input:focus {
     border-color: var(--midgrey) !important;
     box-shadow: none !important;
 }

ghost/admin/app/styles/layouts/flow.css

@@ -19,14 +19,6 @@
     padding: 0 2.4rem;
 }
 
-.gh-flow-head {
-    flex-shrink: 0;
-    display: flex;
-    justify-content: space-between;
-    padding-top: 4vh;
-    padding-bottom: 20px;
-}
-
 .gh-flow-content-wrap {
     flex-grow: 1;
     flex-shrink: 0;
@@ -417,8 +409,6 @@
 }
 
 .gh-setup .gh-flow-form .gh-btn-red,
-.gh-setup .gh-flow-form .gh-btn-red:active,
+.gh-setup .gh-flow-form .gh-btn-red:active {
-.gh-signup .gh-btn-red,
-.gh-signup .gh-btn-red:active {
     background: var(--black) !important;
 }

ghost/admin/app/templates/signin.hbs

@@ -7,7 +7,7 @@
                         <div class="gh-site-icon" style={{site-icon-style}}></div>
                         <h1>Update your password.</h1>
                         <p>
-                            For security, you need to create a new password. An email has been sent to you with instructions!
+                            For security, you need to create a new password. An email has been sent to you with instructions.
                         </p>
                     </header>
                 </div>

ghost/admin/app/templates/signup.hbs

@@ -69,7 +69,7 @@
                 </GhFormGroup>
 
                 <GhTaskButton @buttonText="Create Account &rarr;" @type="submit" @form="signup" @defaultClick={{true}} @runningText="Creating"
-                    @task={{this.signup}} @data-test-button="signup" @class="gh-btn gh-btn-black gh-btn-signup gh-btn-block gh-btn-icon" @tabindex="3" />
+                    @task={{this.signup}} @data-test-button="signup" @class="gh-btn gh-btn-signup gh-btn-block gh-btn-icon" @tabindex="3" style="background: {{this.accentColor}};" />
             </form>
             {{#if this.flowErrors}}
                 <p class="main-error">{{this.flowErrors}}&nbsp;</p>