diff --git a/client/blocks/login/index.jsx b/client/blocks/login/index.jsx
index 8dbfdbc2e8798..9555c2d74b339 100644
--- a/client/blocks/login/index.jsx
+++ b/client/blocks/login/index.jsx
@@ -27,6 +27,7 @@ import { login } from 'calypso/lib/paths';
import { addQueryArgs } from 'calypso/lib/route';
import { isWebAuthnSupported } from 'calypso/lib/webauthn';
import { sendEmailLogin } from 'calypso/state/auth/actions';
+import { redirectToLogout } from 'calypso/state/current-user/actions';
import { getCurrentUser, isUserLoggedIn } from 'calypso/state/current-user/selectors';
import { wasManualRenewalImmediateLoginAttempted } from 'calypso/state/immediate-login/selectors';
import { rebootAfterLogin } from 'calypso/state/login/actions';
@@ -293,6 +294,22 @@ class Login extends Component {
} );
};
+ getSignupLinkComponent = () => {
+ const signupUrl = this.getSignupUrl();
+ return (
+ {
+ // If the user is already logged in, log them out before sending them to the signup page. Otherwise, they will see the weird logged-in state on the signup page.
+ if ( this.props.isLoggedIn ) {
+ event.preventDefault();
+ this.props.redirectToLogout( signupUrl );
+ }
+ } }
+ />
+ );
+ };
+
getSignupUrl = () => {
const {
currentRoute,
@@ -361,17 +378,7 @@ class Login extends Component {
let headerText = translate( 'Log in to your account' );
let preHeader = null;
let postHeader = null;
- const signupLink = (
- {
- // If the user is already logged in, log them out before sending them to the signup page. Otherwise, they will see the weird logged-in state on the signup page.
- if ( this.props.isLoggedIn ) {
- this.props.logoutUser();
- }
- } }
- />
- );
+ const signupLink = this.getSignupLinkComponent();
if ( isSocialFirst ) {
headerText = translate( 'Log in to WordPress.com' );
@@ -747,16 +754,7 @@ class Login extends Component {
loginButtons,
} = this.props;
- const signupLink = (
- {
- if ( this.props.isLoggedIn ) {
- this.props.logoutUser();
- }
- } }
- />
- );
+ const signupLink = this.getSignupLinkComponent();
if ( socialConnect ) {
return (
@@ -973,6 +971,7 @@ export default connect(
hideMagicLoginRequestForm,
sendEmailLogin,
logoutUser,
+ redirectToLogout,
},
( stateProps, dispatchProps, ownProps ) => ( {
...ownProps,
diff --git a/client/layout/masterbar/woo.scss b/client/layout/masterbar/woo.scss
index 2d2689042ad99..cd2d89e9fd8e8 100644
--- a/client/layout/masterbar/woo.scss
+++ b/client/layout/masterbar/woo.scss
@@ -1,3 +1,4 @@
+@import url( https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap );
@import "@wordpress/base-styles/colors";
@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";
@@ -1158,6 +1159,17 @@ $breakpoint-mobile: 660px;
}
}
+ // Remove autofill styles.
+ input:-webkit-autofill,
+ input:-webkit-autofill:hover,
+ input:-webkit-autofill:focus,
+ input:-webkit-autofill:active,
+ input[data-com-onepassword-filled="light"] {
+ -webkit-background-clip: text;
+ -webkit-box-shadow: 0 0 0 1000px #fff inset;
+ transition: background-color 5000s ease-in-out 0s;
+ }
+
.button.is-primary,
.login .button.is-primary,
.magic-login.is-white-login .magic-login__form-action .button.is-primary:not([disabled]) {
@@ -1337,6 +1349,10 @@ $breakpoint-mobile: 660px;
.auth-form__social-buttons-tos {
margin: 0;
+
+ @media ( max-width: $break-medium ) {
+ max-width: $max-width;
+ }
}
.login__lost-password-link {
@@ -1468,7 +1484,7 @@ $breakpoint-mobile: 660px;
align-items: center;
align-self: stretch;
border-radius: 8px; // stylelint-disable-line scales/radii
- border: 2px solid #dcdcde;
+ border: 1px solid #dcdcde;
height: 221px;
box-sizing: border-box;
padding: 32px 24px 16px 24px;
@@ -1634,8 +1650,6 @@ $breakpoint-mobile: 660px;
p {
color: var(--studio-gray-60);
text-align: center;
-
- font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: rem(14px);
font-style: normal;
font-weight: 400;