Skip to content

Improve new invite screen #103289

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: trunk
Choose a base branch
from
+96 −55
Open

Improve new invite screen #103289

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b6056cd
Update title and explanation copy
claudiucelfilip May 9, 2025
f627f7f
Update the logged-in invite component content
claudiucelfilip May 9, 2025
0697185
Update the styling to match the design
claudiucelfilip May 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 16 additions & 30 deletions client/my-sites/invites/invite-accept-logged-in/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Card, Button } from '@automattic/components';
import { Card } from '@automattic/components';
import { Button } from '@wordpress/components';
import clsx from 'clsx';
import { localize } from 'i18n-calypso';
import { Component } from 'react';
Expand Down Expand Up @@ -58,29 +59,14 @@ class InviteAcceptLoggedIn extends Component {

getJoinAsText = () => {
const { user } = this.props;
let text = '';

if ( 'follower' === this.props.invite.role ) {
text = this.props.translate( 'Follow as {{usernameWrap}}%(username)s{{/usernameWrap}}', {
components: {
usernameWrap: <span className="invite-accept-logged-in__join-as-username" />,
},
args: {
username: user && user.display_name,
},
} );
} else {
text = this.props.translate( 'Join as {{usernameWrap}}%(username)s{{/usernameWrap}}', {
components: {
usernameWrap: <span className="invite-accept-logged-in__join-as-username" />,
},
args: {
username: user && user.display_name,
},
} );
}

return text;
const userName = user && user.display_name;
const userEmail = user && user.email;
return (
<>
<div className="invite-accept-logged-in__join-as-username">{ userName }</div>
<p className="invite-accept-logged-in__join-as-email">{ userEmail }</p>
</>
);
};

renderMatchEmailError = () => {
Expand Down Expand Up @@ -118,29 +104,29 @@ class InviteAcceptLoggedIn extends Component {
}

return (
<div>
<>
<Card>
<InviteFormHeader { ...this.props.invite } user={ this.props.user } />
<div className="invite-accept-logged-in__join-as">
<Gravatar user={ this.props.user } size={ 72 } />
<Gravatar user={ this.props.user } size={ 110 } imgSize={ 220 } />
{ this.getJoinAsText() }
</div>
<div className="invite-accept-logged-in__button-bar">
<Button onClick={ this.decline } disabled={ this.state.submitting }>
<Button variant="secondary" onClick={ this.decline } disabled={ this.state.submitting }>
{ this.props.translate( 'Cancel', { context: 'button' } ) }
</Button>
<Button primary onClick={ this.accept } disabled={ this.state.submitting }>
<Button variant="primary" onClick={ this.accept } disabled={ this.state.submitting }>
{ this.getButtonText() }
</Button>
</div>
</Card>

<LoggedOutFormLinks>
<LoggedOutFormLinkItem onClick={ this.signInLink } href={ this.props.signInLink }>
{ this.props.translate( 'Sign in as a different user' ) }
{ this.props.translate( 'Log in with another account' ) }
</LoggedOutFormLinkItem>
</LoggedOutFormLinks>
</div>
</>
);
};

Expand Down
66 changes: 54 additions & 12 deletions client/my-sites/invites/invite-accept-logged-in/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,81 @@
@import "@automattic/typography/styles/variables";
@import "@wordpress/base-styles/breakpoints";

$recoleta-font-family: "Recoleta", sans-serif;
$font-sf-pro-text: "SF Pro Text", $sans;

.invite-accept-logged-in__join-as {
color: var(--color-neutral-60);
font-size: $font-title-small;
line-height: 24px;
margin-bottom: 16px;
text-align: center;
}

.invite-accept-logged-in .card {
margin-bottom: 0;
.invite-accept-logged-in {
width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
font-family: $font-sf-pro-text;

.invite-form-header__title {
color: var(--color-text);
font-size: $font-title-small;
line-height: 24px;
margin-bottom: 16px;
color: var(--studio-gray-100, #2c3338);
text-align: center;
font-family: $recoleta-font-family;
font-size: 2rem;
line-height: 1.26;
}

.invite-form-header__explanation {
font-size: $font-body-small;
color: var(--studio-gray-50, #2c3338);
text-align: center;
margin-top: 6px;
font-size: 14px;
}

.card {
box-shadow: none;
padding: 0;
margin: 0;
background: none;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-height: 768px;
}
}

.invite-accept-logged-in__join-as-username {
color: var(--studio-gray-100, #2c3338);
font-weight: 600;
font-size: 16px;
line-height: 1.3;
}

.invite-accept-logged-in__join-as-email {
font-size: 12px;
}

.invite-accept-logged-in__join-as .gravatar {
display: block;
margin: 0 auto 8px;
margin: 2px auto 12px;
border: 1px solid var(--studio-gray-5);
}

.invite-accept-logged-in__button-bar {
display: flex;
width: 340px;
}

.invite-accept-logged-in__button-bar .button {
.invite-accept-logged-in__button-bar .components-button {
flex-basis: 0;
flex-grow: 1;
margin: 0 4px;
text-align: center;
margin: 4px;
justify-content: center;

&:first-child {
margin-left: 0;
Expand All @@ -48,3 +85,8 @@
margin-right: 0;
}
}

.logged-out-form__link-item {
color: var(--color-link);
font-size: 12px;
}
12 changes: 8 additions & 4 deletions client/my-sites/invites/invite-accept-logged-out/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,11 @@ body.is-section-accept-invite {
}
background: #fdfdfd;
.invite-accept {
margin-top: 50px;
@media (min-width: $break-small) {
margin-top: 150px;
}
padding-top: 50px;
height: calc(100vh - 100px);
}
.invite-accept__form {
height: 100%;
}
.layout__content {
padding: 24px;
Expand All @@ -25,6 +26,7 @@ body.is-section-accept-invite {
margin: 0 auto;
@media (min-width: $break-small) {
width: 372px;
margin-top: 100px;
}
font-family: $font-sf-pro-text;

Expand All @@ -48,6 +50,8 @@ body.is-section-accept-invite {
padding: 0;
margin: 0;
max-width: 372px;
background: none;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flyby fix: there's a barely visible background difference in the logged-out invite form (#fff vs #fdfdfd).

Copy link
Contributor

@fditrapani fditrapani May 9, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for fixing this. I noticed it too.


button.is-primary {
border-radius: 2px;
border: 1px solid var(--studio-wordpress-blue, #3858e9);
Expand Down
2 changes: 1 addition & 1 deletion client/my-sites/invites/invite-accept/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

.invite-accept__form {
margin: 0 auto;
max-width: 400px;
max-width: 440px;

&.is-error {
max-width: none;
Expand Down
25 changes: 17 additions & 8 deletions client/my-sites/invites/invite-form-header/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,67 +110,76 @@ class InviteFormHeader extends Component {

switch ( role ) {
case 'administrator':
title = this.props.translate( 'Would you like to start managing {{siteLink/}}?', {
title = this.props.translate( 'Start managing{{br/}}{{siteLink/}}', {
components: {
siteLink: this.getSiteLink(),
br: <br />,
},
} );
break;
case 'editor':
title = this.props.translate( 'Would you like to start editing {{siteLink/}}?', {
title = this.props.translate( 'Start editing{{br/}}{{siteLink/}}', {
components: {
siteLink: this.getSiteLink(),
br: <br />,
},
} );
break;
case 'author':
title = this.props.translate( 'Would you like to start writing for {{siteLink/}}?', {
title = this.props.translate( 'Start writing for{{br/}}{{siteLink/}}', {
components: {
siteLink: this.getSiteLink(),
br: <br />,
},
} );
break;
case 'contributor':
title = this.props.translate( 'Would you like to start contributing to {{siteLink/}}?', {
title = this.props.translate( 'Start contributing to{{br/}}{{siteLink/}}', {
components: {
siteLink: this.getSiteLink(),
br: <br />,
},
} );
break;
case 'subscriber':
title = this.props.translate(
'Would you like to start following {{siteLink/}} in the WordPress.com Reader?',
'Start following{{br/}}{{siteLink/}}{{br/}}in the WordPress.com Reader',
{
components: {
siteLink: this.getSiteLink(),
br: <br />,
},
}
);
break;
case 'viewer':
title = this.props.translate( 'Would you like to be able to view {{siteLink/}}?', {
title = this.props.translate( 'Begin viewing{{br/}}{{siteLink/}}', {
components: {
siteLink: this.getSiteLink(),
br: <br />,
},
} );
break;
case 'follower':
title = this.props.translate( 'Would you like to become a follower of {{siteLink/}}?', {
title = this.props.translate( 'Start following{{br/}}{{siteLink/}}', {
components: {
siteLink: this.getSiteLink(),
br: <br />,
},
} );
break;
default:
title = this.props.translate(
'Would you like to join {{siteLink/}} as: {{strong}}%(siteRole)s{{/strong}}?',
'Join{{br/}}{{siteLink/}}{{br/}}{{span}}as: {{strong}}%(siteRole)s{{/strong}}{{/span}}',
{
args: {
siteRole: role,
},
components: {
siteLink: this.getSiteLink(),
br: <br />,
strong: <strong />,
span: <span />,
},
}
);
Expand Down
Loading