Masterbar: replace 'Edit Profile' and 'My Account' with 'My Profile'

Automattic · Oct 1, 2024 · 8737129 · 8737129
1 parent 057263f
commit 8737129
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 13 deletions.
diff --git a/client/layout/masterbar/logged-in.jsx b/client/layout/masterbar/logged-in.jsx
@@ -500,8 +500,7 @@ class MasterbarLoggedIn extends Component {
 	}
 
 	renderProfileMenu() {
-		const { translate, user, siteAdminUrl } = this.props;
-		const editProfileLink = siteAdminUrl ? `${ siteAdminUrl }profile.php` : '/me';
+		const { translate, user } = this.props;
 		const profileActions = [
 			{
 				label: (
@@ -514,16 +513,11 @@ class MasterbarLoggedIn extends Component {
 						/>
 						<div className="masterbar__item-howdy-account-details">
 							<span className="display-name">{ user.display_name }</span>
-							<span className="display-name edit-profile">{ translate( 'Edit Profile' ) }</span>
+							<span className="display-name edit-profile">{ translate( 'My Profile' ) }</span>
 						</div>
 					</div>
 				),
-				url: editProfileLink,
-			},
-			{
-				label: translate( 'My Account' ),
 				url: '/me',
-				className: 'account-link',
 			},
 			{
 				label: translate( 'Log Out' ),
@@ -536,7 +530,7 @@ class MasterbarLoggedIn extends Component {
 		return (
 			<Item
 				tipTarget="me"
-				url={ editProfileLink }
+				url="/me"
 				onClick={ this.clickMe }
 				isActive={ this.isActive( 'me', true ) }
 				className="masterbar__item-howdy"

diff --git a/client/layout/masterbar/style.scss b/client/layout/masterbar/style.scss
@@ -1064,7 +1064,7 @@ body.is-mobile-app-view {
 		&.logout-link {
 			position: relative;
 			float: left;
-			top: -35px;
+			top: -30px;
 			left: 79px;
 		}
 	}

diff --git a/client/me/profile/index.jsx b/client/me/profile/index.jsx
@@ -5,6 +5,7 @@ import { flowRight as compose } from 'lodash';
 import { Component } from 'react';
 import { connect } from 'react-redux';
 import EditGravatar from 'calypso/blocks/edit-gravatar';
+import Banner from 'calypso/components/banner';
 import FormButton from 'calypso/components/forms/form-button';
 import FormFieldset from 'calypso/components/forms/form-fieldset';
 import FormSettingExplanation from 'calypso/components/forms/form-setting-explanation';
@@ -26,6 +27,8 @@ import { isFetchingUserSettings } from 'calypso/state/user-settings/selectors';
 import WPAndGravatarLogo from './wp-and-gravatar-logo';
 
 import './style.scss';
+import { getSiteAdminUrl, getSiteTitle } from 'calypso/state/sites/selectors';
+import { getSelectedSiteId } from 'calypso/state/ui/selectors';
 
 class Profile extends Component {
 	getClickHandler( action ) {
@@ -60,6 +63,23 @@ class Profile extends Component {
 					) }
 				/>
 
+				{ this.props.siteAdminProfileUrl && (
+					<Banner
+						showIcon={ false }
+						href={ this.props.siteAdminProfileUrl }
+						description={ this.props.translate(
+							'Click here to visit your profile settings for {{b}}%(siteTitle)s{{/b}}’s WP Admin dashboard.',
+							{
+								args: {
+									siteTitle: this.props.siteTitle,
+								},
+								components: {
+									b: <strong />,
+								},
+							}
+						) }
+					/>
+				) }
 				<SectionHeader label={ this.props.translate( 'Profile' ) } />
 				<Card className="profile__settings">
 					<EditGravatar />
@@ -181,9 +201,15 @@ class Profile extends Component {
 
 export default compose(
 	connect(
-		( state ) => ( {
-			isFetchingUserSettings: isFetchingUserSettings( state ),
-		} ),
+		( state ) => {
+			const siteId = getSelectedSiteId( state );
+
+			return {
+				isFetchingUserSettings: isFetchingUserSettings( state ),
+				siteAdminProfileUrl: getSiteAdminUrl( state, siteId, 'profile.php' ),
+				siteTitle: getSiteTitle( state, siteId ),
+			};
+		},
 		{ recordGoogleEvent }
 	),
 	protectForm,