diff --git a/client/blocks/login/login-form.jsx b/client/blocks/login/login-form.jsx index 54c4b7f9c4b0cc..fb5152ff61c70f 100644 --- a/client/blocks/login/login-form.jsx +++ b/client/blocks/login/login-form.jsx @@ -315,7 +315,7 @@ export class LoginForm extends Component { this.loginUser(); }; - renderWooCommerce( showSocialLogin = true ) { + renderWooCommerce( { showSocialLogin = true, socialToS } = {} ) { const isFormDisabled = this.state.isFormDisabledWhileLoading || this.props.isFormDisabled; const { requestError, socialAccountIsLinking: linkingSocialUser } = this.props; @@ -404,6 +404,7 @@ export class LoginForm extends Component {
+

{ socialToS }

-

- { this.props.translate( - // To make any changes to this copy please speak to the legal team - 'By continuing, ' + - 'you agree to our {{tosLink}}Terms of Service{{/tosLink}} and' + - ' acknowledge that you have read our {{privacyLink}}Privacy Policy{{/privacyLink}}.', - { - components: { - tosLink: ( - - ), - privacyLink: ( - - ), - }, - } - ) } -

+

{ socialToS }

diff --git a/client/blocks/login/social.jsx b/client/blocks/login/social.jsx index b22f0b26d8d125..ab4dad34c2e612 100644 --- a/client/blocks/login/social.jsx +++ b/client/blocks/login/social.jsx @@ -1,7 +1,5 @@ import config from '@automattic/calypso-config'; import { Card } from '@automattic/components'; -import { localizeUrl } from '@automattic/i18n-utils'; -import { localize } from 'i18n-calypso'; import PropTypes from 'prop-types'; import { Component } from 'react'; import { connect } from 'react-redux'; @@ -24,16 +22,17 @@ class SocialLoginForm extends Component { recordTracksEvent: PropTypes.func.isRequired, redirectTo: PropTypes.string, onSuccess: PropTypes.func.isRequired, - translate: PropTypes.func.isRequired, loginSocialUser: PropTypes.func.isRequired, uxMode: PropTypes.string.isRequired, linkingSocialService: PropTypes.string, socialService: PropTypes.string, socialServiceResponse: PropTypes.object, + shouldRenderToS: PropTypes.bool, }; static defaultProps = { linkingSocialService: '', + shouldRenderToS: true, }; reportSocialLoginFailure = ( { service, socialInfo, error } ) => { @@ -138,72 +137,6 @@ class SocialLoginForm extends Component { return `https://${ host + login( { socialService: service } ) }`; }; - renderSocialTos = () => { - const { redirectTo, translate } = this.props; - - const isJetpackMagicLinkSignUpFlow = - redirectTo && - redirectTo.includes( 'jetpack/connect' ) && - config.isEnabled( 'jetpack/magic-link-signup' ); - - const tosLink = ( - - ); - const privacyLink = ( - - ); - - if ( isJetpackMagicLinkSignUpFlow ) { - return ( - <> -

- { translate( - 'By continuing, you agree to our {{tosLink}}Terms of' + - ' Service{{/tosLink}} and acknowledge that you have read our' + - ' {{privacyLink}}Privacy Policy{{/privacyLink}}.', - { - components: { - tosLink, - privacyLink, - }, - } - ) } -

-

- { translate( - 'If you continue with Google, Apple, or an email that isn’t registered yet,' + - ' you are creating a new WordPress.com account.' - ) } -

- - ); - } - return ( -

- { translate( - "If you continue with Google or Apple and don't already have a WordPress.com account, you" + - ' are creating an account, you agree to our' + - ' {{tosLink}}Terms of Service{{/tosLink}}, and acknowledge that you have' + - ' read our {{privacyLink}}Privacy Policy{{/privacyLink}}.', - { - components: { - tosLink, - privacyLink, - }, - } - ) } -

- ); - }; - render() { const { redirectTo, uxMode } = this.props; const uxModeApple = config.isEnabled( 'sign-in-with-apple/redirect' ) ? 'redirect' : uxMode; @@ -235,8 +168,6 @@ class SocialLoginForm extends Component { } />
- - { this.renderSocialTos() } { this.props.bearerToken && ( @@ -262,4 +193,4 @@ export default connect( createSocialUserFailed, recordTracksEvent, } -)( localize( SocialLoginForm ) ); +)( SocialLoginForm ); diff --git a/client/blocks/login/style.scss b/client/blocks/login/style.scss index cc27eaaab69503..0fa79897a46fbe 100644 --- a/client/blocks/login/style.scss +++ b/client/blocks/login/style.scss @@ -100,9 +100,14 @@ box-shadow: none; } - .login__social-tos a { - color: var( --studio-gray-60 ); - text-decoration: underline; + .login__social-tos { + margin: 1.5em auto; + max-width: 330px; + + a { + color: var( --color-accent ); + text-decoration: underline; + } } .jetpack-header__partner-logo-plus svg { @@ -327,10 +332,6 @@ box-shadow: none; } - .login__form-userdata { - margin-bottom: 2em; - } - .login__form label { font-size: var( --p2-font-size-form-xxs ); color: var( --p2-color-text ); diff --git a/client/blocks/signup-form/index.jsx b/client/blocks/signup-form/index.jsx index 9c93b80e4f180b..916efdae8c790a 100644 --- a/client/blocks/signup-form/index.jsx +++ b/client/blocks/signup-form/index.jsx @@ -790,7 +790,7 @@ class SignupForm extends Component { termsOfServiceLink = () => { const tosText = this.props.translate( 'By creating an account you agree to our {{tosLink}}Terms of Service{{/tosLink}} and' + - ' acknowledge that you have read our {{privacyLink}}Privacy Policy{{/privacyLink}}.', + ' have read our {{privacyLink}}Privacy Policy{{/privacyLink}}.', { components: { tosLink: ( diff --git a/client/blocks/signup-form/social-signup-tos.jsx b/client/blocks/signup-form/social-signup-tos.jsx index 19936b62b87382..91a0434d21d45e 100644 --- a/client/blocks/signup-form/social-signup-tos.jsx +++ b/client/blocks/signup-form/social-signup-tos.jsx @@ -5,9 +5,8 @@ function SocialSignupToS( props ) { return (

{ props.translate( - "If you continue with Google or Apple and don't already have a WordPress.com account, you" + - ' are creating an account, you agree to our' + - ' {{tosLink}}Terms of Service{{/tosLink}}, and acknowledge that you have' + + 'If you continue with Google or Apple, you agree to our' + + ' {{tosLink}}Terms of Service{{/tosLink}}, and have' + ' read our {{privacyLink}}Privacy Policy{{/privacyLink}}.', { components: { diff --git a/client/blocks/signup-form/style.scss b/client/blocks/signup-form/style.scss index 47be7798d8ec93..954d8d1f136c1d 100644 --- a/client/blocks/signup-form/style.scss +++ b/client/blocks/signup-form/style.scss @@ -62,7 +62,6 @@ } .signup-form__social-buttons-tos a { - color: var( --color-text-inverted ); text-decoration: underline; } diff --git a/client/layout/masterbar/oauth-client.scss b/client/layout/masterbar/oauth-client.scss index adb0055804ec8f..95914e6b8dbbf1 100644 --- a/client/layout/masterbar/oauth-client.scss +++ b/client/layout/masterbar/oauth-client.scss @@ -95,11 +95,6 @@ background: var( --studio-gray-0 ); } - a, - a:visited { - color: inherit; - } - .button { background-color: var( --studio-gray-0 ); border-radius: 2px; @@ -997,15 +992,13 @@ } .login__form-terms { - font-size: $font-body-small; - line-height: 24px; - margin-top: 8px; + font-size: $font-body-extra-small; + margin-bottom: 1em; } .login__form-signup-link { font-size: $font-body; line-height: 24px; - padding-top: 0; } .login__divider { @@ -1093,10 +1086,10 @@ .login__form-userdata { order: 1; } - .login__form-action { + .login__form-terms { order: 2; } - .login__form-terms { + .login__form-action { order: 3; } .login__form-signup-link { diff --git a/client/login/wp-login/style.scss b/client/login/wp-login/style.scss index ce681484b1c88a..65a46009cf2b23 100644 --- a/client/login/wp-login/style.scss +++ b/client/login/wp-login/style.scss @@ -241,10 +241,15 @@ $image-height: 47px; } .login__form-terms, + .login__form-terms { + text-align: left; + color: var( --color-neutral-60 ); + font-size: $font-body-extra-small; + } + .login__form-terms a, .login__form-terms a:hover { text-align: left; - color: var( --color-neutral-60 ); font-size: $font-body-extra-small; } @@ -264,10 +269,6 @@ $image-height: 47px; } } - .login__social-tos a { - color: var( --studio-gray-60 ); - } - .wp-login__site-return-link::after { background: none; } @@ -520,9 +521,7 @@ $image-height: 47px; .two-factor-authentication__verification-code-form > p, .login__form-terms, - .login__social-tos, - .login__form-terms a, - .login__social-tos a { + .login__social-tos { color: var( --studio-gray-50 ); } diff --git a/client/signup/steps/user/style.scss b/client/signup/steps/user/style.scss index 13a311cc4feeef..53cdf37b0621ee 100644 --- a/client/signup/steps/user/style.scss +++ b/client/signup/steps/user/style.scss @@ -1,9 +1,7 @@ body.is-section-signup.is-white-signup .signup { .signup-form.is-horizontal { .signup-form__terms-of-service-link, - .signup-form__terms-of-service-link a, .signup-form__social-buttons-tos, - .signup-form__social-buttons-tos a, .signup-form__social p, .signup-form__recaptcha-tos, .logged-out-form__links .logged-out-form__link-item { @@ -22,7 +20,6 @@ body.is-section-signup.is-white-signup .signup { .signup-form__terms-of-service-link a, .signup-form__social-buttons-tos a, .signup-form__recaptcha-tos a { - color: inherit; text-decoration: underline; } } diff --git a/client/signup/style.scss b/client/signup/style.scss index 253e36c4c94c61..4492380042f3a4 100644 --- a/client/signup/style.scss +++ b/client/signup/style.scss @@ -339,7 +339,6 @@ body.is-section-signup .layout.gravatar .formatted-header { .signup-form__terms-of-service-link a, .signup-form__social-buttons-tos a { - color: var( --studio-gray-50 ); text-decoration: underline; }