feat: move have account text below SSO and adjust font-size (#1917)

Automattic · Aug 22, 2022 · 869913d · 869913d
1 parent f1ae0c5
commit 869913d
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 30 deletions.
diff --git a/assets/blocks/reader-registration/edit.js b/assets/blocks/reader-registration/edit.js
@@ -266,6 +266,24 @@ export default function ReaderRegistrationEdit( {
 											</div>
 										) }
 										<div className="newspack-registration__response" />
+										<div className="newspack-registration__have-account">
+											<p>
+												<RichText
+													onChange={ value => setAttributes( { haveAccountLabel: value } ) }
+													placeholder={ __( 'Already have an account?', 'newspack' ) }
+													value={ haveAccountLabel }
+													tagName="span"
+												/>{ ' ' }
+												<a href="/my-account" onClick={ ev => ev.preventDefault() }>
+													<RichText
+														onChange={ value => setAttributes( { signInLabel: value } ) }
+														placeholder={ __( 'Sign In', 'newspack' ) }
+														value={ signInLabel }
+														tagName="span"
+													/>
+												</a>
+											</p>
+										</div>
 									</div>
 									<div className="newspack-registration__help-text">
 										<RichText
@@ -274,22 +292,6 @@ export default function ReaderRegistrationEdit( {
 											value={ privacyLabel }
 											tagName="p"
 										/>
-										<p>
-											<RichText
-												onChange={ value => setAttributes( { haveAccountLabel: value } ) }
-												placeholder={ __( 'Already have an account?', 'newspack' ) }
-												value={ haveAccountLabel }
-												tagName="span"
-											/>{ ' ' }
-											<a href="/my-account" onClick={ ev => ev.preventDefault() }>
-												<RichText
-													onChange={ value => setAttributes( { signInLabel: value } ) }
-													placeholder={ __( 'Sign In', 'newspack' ) }
-													value={ signInLabel }
-													tagName="span"
-												/>
-											</a>
-										</p>
 									</div>
 								</div>
 							</div>

diff --git a/assets/blocks/reader-registration/editor.scss b/assets/blocks/reader-registration/editor.scss
@@ -3,11 +3,14 @@
 @use '~@wordpress/base-styles/colors' as wp-colors;
 
 .newspack-registration {
+	font-size: inherit;
+
 	form {
 		input[type='email'] {
 			background: #fff;
 			border: solid 1px #ccc;
 			box-sizing: border-box;
+			font-size: inherit;
 			outline: none;
 			padding: 0.36rem 0.66rem;
 			-webkit-appearance: none;
@@ -67,6 +70,27 @@
 			gap: 4px;
 		}
 	}
+	& &__have-account {
+		font-size: 0.65em;
+
+		p {
+			font-size: 1em;
+		}
+	}
+	&__help-text {
+		p {
+			font-size: 0.55em !important;
+		}
+	}
+	&__response {
+		display: none;
+	}
+	&__icon {
+		+ .block-editor-block-list__layout p,
+		+ .block-editor-rich-text__editable {
+			font-size: 0.8em;
+		}
+	}
 }
 
 .newspack-reader {
@@ -91,4 +115,21 @@
 			position: relative;
 		}
 	}
+
+	.newspack-registration {
+		div {
+			a {
+				color: inherit;
+				cursor: pointer;
+				text-decoration: underline;
+
+				&:active,
+				&:focus,
+				&:hover {
+					color: inherit;
+					text-decoration: none;
+				}
+			}
+		}
+	}
 }
diff --git a/assets/blocks/reader-registration/index.php b/assets/blocks/reader-registration/index.php
@@ -172,18 +172,20 @@ function render_block( $attrs, $content ) {
 									<p><?php echo \esc_html( $message ); ?></p>
 								<?php endif; ?>
 							</div>
+							<div class="newspack-registration__have-account">
+								<p>
+									<?php echo \wp_kses_post( $attrs['haveAccountLabel'] ); ?>
+									<a href="<?php echo \esc_url( $sign_in_url ); ?>" data-newspack-reader-account-link>
+										<?php echo \wp_kses_post( $attrs['signInLabel'] ); ?>
+									</a>
+								</p>
+							</div>
 						</div>
 
 						<div class="newspack-registration__help-text">
 							<p>
 								<?php echo \wp_kses_post( $attrs['privacyLabel'] ); ?>
 							</p>
-							<p>
-								<?php echo \wp_kses_post( $attrs['haveAccountLabel'] ); ?>
-								<a href="<?php echo \esc_url( $sign_in_url ); ?>" data-newspack-reader-account-link>
-									<?php echo \wp_kses_post( $attrs['signInLabel'] ); ?>
-								</a>
-							</p>
 						</div>
 					</div>
 				</div>

diff --git a/assets/blocks/reader-registration/style.scss b/assets/blocks/reader-registration/style.scss
@@ -2,6 +2,20 @@
 @use '../../shared/scss/mixins';
 
 .newspack-registration {
+	font-size: 0.8rem;
+
+	a {
+		color: inherit;
+		text-decoration: underline;
+
+		&:active,
+		&:focus,
+		&:hover {
+			color: inherit;
+			text-decoration: none;
+		}
+	}
+
 	@media ( min-width: 782px ) {
 		&.is-style-columns {
 			.newspack-registration__main {
@@ -44,11 +58,13 @@
 	}
 
 	&__inputs {
+		align-items: center;
 		display: flex;
 		flex-wrap: wrap;
-		align-items: center;
+		font-size: 1rem;
 		justify-content: flex-end;
 		min-width: 250px;
+
 		input[type='email'] {
 			flex: 1 1 auto;
 		}
@@ -58,17 +74,22 @@
 		}
 	}
 
+	&__have-account {
+		font-size: 0.8125em;
+		line-height: 1.2307692308;
+		margin: 0.8rem 0;
+
+		p {
+			margin: 0;
+		}
+	}
+
 	&__help-text {
-		margin-top: 0.8rem;
 		p {
 			color: wp-colors.$gray-700;
 			margin: 0;
-			font-size: 0.65em !important;
-			line-height: 1.2307692308;
-
-			+ p {
-				margin-top: 0.4rem;
-			}
+			font-size: 0.6875em !important;
+			line-height: 1.45454545;
 		}
 	}
 
@@ -82,11 +103,13 @@
 			color: wp-colors.$alert-red;
 		}
 	}
+
 	&--success {
 		.newspack-registration__logins {
 			display: none;
 		}
 	}
+
 	&--in-progress {
 		opacity: 0.5;
 		button,