Additional design treatments to better align with the wp-admin onboar…

…ding wizard
Automattic · May 16, 2019 · 6d45492 · 6d45492
1 parent de4a9c8
commit 6d45492
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 3 deletions.
diff --git a/client/blocks/login/style.scss b/client/blocks/login/style.scss
@@ -18,25 +18,40 @@
 		left: 0;
 		top: 0;
 		height: 56px;
+
+		svg > g {
+			transform: translateX( 25% );
+		}
+
+		@media( max-width: 660px ) {
+			margin-top: 45px;
+		}
 	}
 
 	.jetpack-header {
 		margin: 0;
 		text-align: center;
 		margin-right: auto;
 		margin-left: auto;
-		padding-left: 112px;
+		padding-left: 0px;
 		margin-top: 15px;
 		display: block;
 	}
 
 	.login__form-header {
 		margin-top: 32px;
+
+		@media( max-width: 660px ) {
+			margin-top: 92px;
+		}
 	}
 
 	.login__header-subtitle {
 		color: var( --color-primary-100 );
-		font-size: 14px;
+		margin-top: 1em;
+		font-size: 16px;
+		line-height: 24px;
+		font-weight: 400;
 	}
 
 	.jetpack-logo__icon-circle {

diff --git a/client/jetpack-connect/style.scss b/client/jetpack-connect/style.scss
@@ -891,20 +891,39 @@ $colophon-height: 50px; // wpcomColophon element at the bottom
 			left: 0;
 			top: 0;
 			height: 56px;
+
+			svg > g {
+				transform: translateX( 25% );
+			}
+
+			@media( max-width: 660px ) {
+				margin-top: 45px;
+			}
 		}
 
 		.jetpack-header {
 			margin: 0;
 			text-align: center;
 			margin-right: auto;
 			margin-left: auto;
-			padding-left: 112px;
+			padding-left: 0px;
 			margin-top: 15px;
 			display: block;
 		}
 
+		.formatted-header__subtitle {
+			margin-top: 1em;
+			font-size: 16px;
+			line-height: 24px;
+			font-weight: 400;
+		}
+
 		.jetpack-connect__authorize-form {
 			margin-top: 32px;
+
+			@media( max-width: 660px ) {
+				margin-top: 92px;
+			}
 		}
 
 		.jetpack-logo__icon-circle {

diff --git a/client/login/wp-login/style.scss b/client/login/wp-login/style.scss
@@ -186,7 +186,12 @@ $image-height: 47px;
 .layout.is-jetpack-woocommerce-flow {
 	background-color: var( --color-woocommerce-onboarding-background );
 
+	.wp-login__links {
+		margin-top: 1em;
+	}
+
 	.wp-login__links a {
 		border-bottom: none;
+		line-height: 2.5em;
 	}
 }