Basic sign in UI update

- updated sign in UI to match better with the rest of Ghost.org

app/styles/components/notifications.css

@@ -230,14 +230,6 @@
     width: 12px;
 }
 
-.gh-alert-close:hover {
-    color: var(--red);
-}
-
-.gh-alert-close svg:hover {
-    fill: var(--red);
-}
-
 
 /* Blue alert
 /* ---------------------------------------------------------- */

app/styles/layouts/auth.css

@@ -4,12 +4,9 @@
     position: relative;
     margin: 30px auto;
     padding: 40px;
-    max-width: 400px;
+    max-width: 509px;
     width: 100%;
-    background: #fff;
-    border-radius: 5px;
     text-align: left;
-    box-shadow: 0 0 1px rgba(0, 0, 0, 0.05), 0 20px 45px -10px rgba(0, 0, 0, 0.1);
 }
 
 .gh-signin .form-group {
@@ -20,6 +17,23 @@
     margin: 0;
 }
 
+.gh-signin .gh-btn.login {
+    height: 56px;
+    border-radius: 8px;
+    line-height: 56px;
+    margin-top: 40px;
+    max-width: unset;
+    font-weight: 300;
+}
+
+.gh-signin .gh-btn.login span {
+    font-size: 2.0rem;
+}
+
+.gh-signin label {
+    font-weight: 600 !important;
+}
+
 .forgotten-wrap {
     position: relative;
 }
@@ -30,18 +44,18 @@
 
 .forgotten-wrap .forgotten-link {
     position: absolute;
-    top: 7px;
+    top: 12px;
     right: 1px;
-    bottom: 7px;
+    bottom: 12px;
     border-left: color-mod(var(--lightgrey) l(-5%) s(-10%)) 1px solid;
     border-radius: 0;
 }
 
 .forgotten-link span {
     height: 19px;
-    font-size: 1.2rem;
+    font-size: 1.4rem;
     line-height: 19px;
-    padding: 0 11px 0 12px;
+    padding: 0 15px 0 16px;
     margin-top: -1px;
     color: var(--midlightgrey);
 }
@@ -52,7 +66,7 @@
 }
 
 .forgotten-link:hover span {
-    color: var(--blue);
+    color: var(--black);
 }
 
 .forgotten-link:active {
@@ -60,6 +74,16 @@
     text-decoration: underline;
 }
 
+.gh-signin input {
+    padding: 12px 16px;
+    height: 56px;
+    border-radius: 8px;
+    font-size: 2.0rem;
+}
+
+.gh-signin input:focus {
+    border-color: var(--midgrey) !important;
+}
 
 /* Email notification */
 /* ---------------------------------------------------------- */

app/styles/layouts/flow.css

@@ -7,6 +7,7 @@
     flex-direction: column;
     overflow-y: auto;
     min-height: 100%;
+    background: linear-gradient(135deg, #fff, #f4f4f4);
 }
 
 .gh-flow-head {

app/templates/signin.hbs

@@ -21,8 +21,8 @@
             {{else}}
             <form id="login" method="post" class="gh-signin" novalidate="novalidate" {{action "authenticate" on="submit"}}>
                 <GhFormGroup @errors={{this.signin.errors}} @hasValidated={{this.hasValidated}} @property="identification">
+                    <label>Email address</label>
                     <span class="gh-input-icon gh-icon-mail">
-                        {{svg-jar "email"}}
                         <GhTrimFocusInput
                             @class="email"
                             @type="email"
@@ -39,8 +39,8 @@
                     </span>
                 </GhFormGroup>
                 <GhFormGroup @errors={{this.signin.errors}} @hasValidated={{this.hasValidated}} @property="password">
+                    <label>Password</label>
                     <span class="gh-input-icon gh-icon-lock forgotten-wrap">
-                        {{svg-jar "lock"}}
                         <GhTextInput
                             @class="password"
                             @type="password"
@@ -66,10 +66,10 @@
                     </span>
                 </GhFormGroup>
 
-                <GhTaskButton @buttonText="Sign in"
+                <GhTaskButton @buttonText="Sign in →"
                     @task={{this.validateAndAuthenticate}}
                     @showSuccess={{false}}
-                    @class="login gh-btn gh-btn-blue gh-btn-block gh-btn-icon"
+                    @class="login gh-btn gh-btn-primary gh-btn-block gh-btn-icon"
                     @type="submit"
                     @tabindex="3" />
             </form>

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-blue');
+                await click('.gh-btn-primary');
 
                 // 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-blue');
+            await click('.gh-btn-primary');
 
             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-blue');
+            await click('.gh-btn-primary');
 
             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-blue');
+            await click('.gh-btn-primary');
             expect(currentURL(), 'currentURL').to.equal('/dashboard');
         });
     });