Merge pull request Automattic#13456 from Automattic/update/login-design

Login: Update the design to match the mockups
solarsoft0 · Apr 28, 2017 · 11cf35d · 11cf35d
2 parents 01ed3e2 + 2d872cb
commit 11cf35d
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 32 deletions.
diff --git a/client/blocks/login/index.jsx b/client/blocks/login/index.jsx
@@ -119,24 +119,26 @@ export class Login extends Component {
 				<form onSubmit={ this.onSubmitForm }>
 					<Card className="login__form">
 						<div className="login__form-userdata">
-							<label className="login__form-userdata-username">
+							<label htmlFor="usernameOrEmail" className="login__form-userdata-username">
 								{ this.props.translate( 'Username or Email Address' ) }
-								<FormTextInput
-									className="login__form-userdata-username-input"
-									onChange={ this.onChangeField }
-									name="usernameOrEmail"
-									value={ this.state.usernameOrEmail }
-									{ ...isDisabled } />
 							</label>
-							<label className="login__form-userdata-username">
+							<FormTextInput
+								className="login__form-userdata-username-input"
+								onChange={ this.onChangeField }
+								id="usernameOrEmail"
+								name="usernameOrEmail"
+								value={ this.state.usernameOrEmail }
+								{ ...isDisabled } />
+							<label htmlFor="password" className="login__form-userdata-username">
 								{ this.props.translate( 'Password' ) }
-								<FormPasswordInput
-									className="login__form-userdata-username-password"
-									onChange={ this.onChangeField }
-									name="password"
-									value={ this.state.password }
-									{ ...isDisabled } />
 							</label>
+							<FormPasswordInput
+								className="login__form-userdata-username-password"
+								onChange={ this.onChangeField }
+								id="password"
+								name="password"
+								value={ this.state.password }
+								{ ...isDisabled } />
 						</div>
 						<div className="login__form-remember-me">
 							<label>
@@ -145,7 +147,7 @@ export class Login extends Component {
 									checked={ this.state.rememberme }
 									onChange={ this.onChangeRememberMe }
 									{ ...isDisabled } />
-								{ this.props.translate( 'Stay logged in' ) }
+								<span>{ this.props.translate( 'Stay logged in' ) }</span>
 							</label>
 						</div>
 						<div className="login__form-action">

diff --git a/client/blocks/login/style.scss b/client/blocks/login/style.scss
@@ -4,10 +4,15 @@
 
 .login__form-userdata {
 	label {
+		color: $gray-dark;
 		display: block;
-		line-height: 2em;
+		font-size: 14px;
+		line-height: 1.5;
 		font-weight: 500;
-		padding-bottom: 8px;
+		margin-bottom: 5px;
+	}
+	input{
+		margin-bottom: 20px;
 	}
 }
 
@@ -26,9 +31,25 @@
 }
 
 .login__form-remember-me {
-	margin: 5px 0 15px;
+	margin-bottom: 20px;
 
 	input {
 		margin-right: 10px;
 	}
-}
+	label{
+		font-size: 14px;
+	}
+}
+
+.wp-login__footer{
+	a{
+		font-size: 14px;
+
+		&:hover{
+			color: $blue-medium;
+		}
+	}
+	.gridicon{
+		vertical-align: text-bottom;
+	}
+}
diff --git a/client/login/wp-login/index.jsx b/client/login/wp-login/index.jsx
@@ -104,27 +104,27 @@ class Login extends React.Component {
 				</a>;
 		}
 
+		const goBackLink = ! magicLoginView && <a
+			href="#"
+			key="back-link"
+			onClick={ this.goBack }>
+				<Gridicon icon="arrow-left" size={ 18 } /> { this.props.translate( 'Return' ) }
+			</a>;
 		const showMagicLoginLink = magicLoginEnabled && ! magicLoginView && <a href="#"
 			key="magic-login-link"
 			onClick={ this.onMagicLoginRequestClick }>
 				{ translate( 'Email me a login link' ) }
 			</a>;
 		const resetPasswordLink = ! magicLoginView && <a
-				href={ config( 'login_url' ) + '?action=lostpassword' }
-				key="lost-password-link">
-					{ this.props.translate( 'Lost your password?' ) }
-				</a>;
-		const goBackLink = ! magicLoginView && <a
-				href="#"
-				key="back-link"
-				onClick={ this.goBack }>
-					<Gridicon icon="arrow-left" size={ 18 } /> { this.props.translate( 'Back' ) }
-				</a>;
+			href={ config( 'login_url' ) + '?action=lostpassword' }
+			key="lost-password-link">
+				{ this.props.translate( 'Lost your password?' ) }
+			</a>;
 
 		return compact( [
+			goBackLink,
 			showMagicLoginLink,
 			resetPasswordLink,
-			goBackLink,
 		] );
 	}
 

diff --git a/client/login/wp-login/style.scss b/client/login/wp-login/style.scss
@@ -10,14 +10,13 @@
 }
 
 .wp-login__footer {
-	text-align: center;
-
 	a {
 		border-bottom: 1px solid lighten( $gray, 20% );
 		color: $gray;
 		display: block;
 		font-weight: 500;
 		line-height: 4em;
+		padding: 0 24px;
 		text-decoration: none;
 	}