Buttons: Update button labels to sentence case (Automattic#39692)

* Update buttons to sentence case in Pages and My Plan * Button case for Posts and Themes * Comments and Add new site * Media library button case and fix for linting * Export and Plugins sections * Marketing section and button in settings headers * Earn section * Hosting and Domains sections * People section * Settings section * Reader button labels * Button labels for Me sections and fixing linting errors * More Me sections, disable linting to save for a bigger refactor * Update snapshot for primary domain button * Follow suite with a forgotten instance of changed text * Update test to look for correct element Co-authored-by: Alex Kirk <alex.git@kirk.at>
sirino · Mar 13, 2020 · 9af6717 · 9af6717
1 parent f3b5685
commit 9af6717
Show file tree

Hide file tree

Showing 58 changed files with 113 additions and 114 deletions.
diff --git a/client/blocks/conversation-follow-button/button.jsx b/client/blocks/conversation-follow-button/button.jsx
@@ -41,8 +41,8 @@ class ConversationFollowButton extends React.Component {
 		];
 		const iconSize = 20;
 		const label = isFollowing
-			? translate( 'Following Conversation' )
-			: translate( 'Follow Conversation' );
+			? translate( 'Following conversation' )
+			: translate( 'Follow conversation' );
 
 		if ( this.props.isFollowing ) {
 			buttonClasses.push( 'is-following' );

diff --git a/client/blocks/credit-card-form/index.jsx b/client/blocks/credit-card-form/index.jsx
@@ -208,11 +208,11 @@ function SaveButton( { translate, formSubmitting } ) {
 	return (
 		<FormButton disabled={ formSubmitting } type="submit">
 			{ formSubmitting
-				? translate( 'Saving Card…', {
+				? translate( 'Saving card…', {
 						context: 'Button label',
 						comment: 'Credit card',
 				  } )
-				: translate( 'Save Card', {
+				: translate( 'Save card', {
 						context: 'Button label',
 						comment: 'Credit card',
 				  } ) }

diff --git a/client/blocks/reader-post-options-menu/index.jsx b/client/blocks/reader-post-options-menu/index.jsx
@@ -198,8 +198,8 @@ class ReaderPostOptionsMenu extends React.Component {
 						<FollowButton
 							tagName={ PopoverMenuItem }
 							siteUrl={ followUrl }
-							followLabel={ showConversationFollowButton ? translate( 'Follow Site' ) : null }
-							followingLabel={ showConversationFollowButton ? translate( 'Following Site' ) : null }
+							followLabel={ showConversationFollowButton ? translate( 'Follow site' ) : null }
+							followingLabel={ showConversationFollowButton ? translate( 'Following site' ) : null }
 						/>
 					) }
 
@@ -215,13 +215,13 @@ class ReaderPostOptionsMenu extends React.Component {
 
 					{ this.props.showVisitPost && post.URL && (
 						<PopoverMenuItem onClick={ this.visitPost } icon="external">
-							{ translate( 'Visit Post' ) }
+							{ translate( 'Visit post' ) }
 						</PopoverMenuItem>
 					) }
 
 					{ this.props.showEditPost && isEditPossible && (
 						<PopoverMenuItem onClick={ this.editPost } icon="pencil">
-							{ translate( 'Edit Post' ) }
+							{ translate( 'Edit post' ) }
 						</PopoverMenuItem>
 					) }
 
@@ -232,19 +232,19 @@ class ReaderPostOptionsMenu extends React.Component {
 
 					{ isBlockPossible && (
 						<PopoverMenuItem onClick={ this.blockSite }>
-							{ translate( 'Block Site' ) }
+							{ translate( 'Block site' ) }
 						</PopoverMenuItem>
 					) }
 
 					{ ( ( this.props.showReportPost && isBlockPossible ) || isDiscoverPost ) && (
 						<PopoverMenuItem onClick={ this.reportPost }>
-							{ translate( 'Report this Post' ) }
+							{ translate( 'Report this post' ) }
 						</PopoverMenuItem>
 					) }
 
 					{ this.props.showReportSite && site && isBlockPossible && (
 						<PopoverMenuItem onClick={ this.reportSite }>
-							{ translate( 'Report this Site' ) }
+							{ translate( 'Report this site' ) }
 						</PopoverMenuItem>
 					) }
 				</EllipsisMenu>

diff --git a/client/blocks/site-address-changer/dialog.jsx b/client/blocks/site-address-changer/dialog.jsx
@@ -72,7 +72,7 @@ class SiteAddressChangerConfirmationDialog extends PureComponent {
 			},
 			{
 				action: 'confirm',
-				label: translate( 'Change Site Address' ),
+				label: translate( 'Change site address' ),
 				onClick: this.onConfirm,
 				disabled: ! this.state.isConfirmationChecked,
 				isPrimary: true,

diff --git a/client/blocks/site-address-changer/index.jsx b/client/blocks/site-address-changer/index.jsx
@@ -359,7 +359,7 @@ export class SiteAddressChanger extends Component {
 						/>
 						<FormButtonsBar className="site-address-changer__form-footer">
 							<FormButton disabled={ isDisabled } busy={ isBusy } type="submit">
-								{ translate( 'Change Site Address' ) }
+								{ translate( 'Change site address' ) }
 							</FormButton>
 						</FormButtonsBar>
 					</Card>

diff --git a/client/components/site-selector/add-site.jsx b/client/components/site-selector/add-site.jsx
@@ -26,7 +26,7 @@ class SiteSelectorAddSite extends Component {
 		return (
 			<span className="site-selector__add-new-site">
 				<Button borderless href={ this.getAddNewSiteUrl() } onClick={ this.recordAddNewSite }>
-					<Gridicon icon="add-outline" /> { translate( 'Add New Site' ) }
+					<Gridicon icon="add-outline" /> { translate( 'Add new site' ) }
 				</Button>
 			</span>
 		);

diff --git a/client/me/account-password/index.jsx b/client/me/account-password/index.jsx
@@ -188,7 +188,7 @@ const AccountPassword = createReactClass( {
 						}
 						onClick={ this.handleSaveButtonClick }
 					>
-						{ this.state.savingPassword ? translate( 'Saving…' ) : translate( 'Save Password' ) }
+						{ this.state.savingPassword ? translate( 'Saving…' ) : translate( 'Save password' ) }
 					</FormButton>
 
 					<FormButton isPrimary={ false } onClick={ this.handleGenerateButtonClick } type="button">

diff --git a/client/me/account/main.jsx b/client/me/account/main.jsx
@@ -386,7 +386,7 @@ const Account = createReactClass( {
 
 				// We reload here to refresh cookies, user object, and user settings.
 				// @TODO: Do not require reload here.
-				location.reload();
+				window.location.reload();
 			}
 		} );
 	},
@@ -627,7 +627,7 @@ const Account = createReactClass( {
 				>
 					{ this.state.submittingForm
 						? translate( 'Saving…' )
-						: translate( 'Save Account Settings' ) }
+						: translate( 'Save account settings' ) }
 				</FormButton>
 			</div>
 		);
@@ -759,7 +759,7 @@ const Account = createReactClass( {
 						type="button"
 						onClick={ this.getClickHandler( 'Change Username Button', this.submitUsernameForm ) }
 					>
-						{ translate( 'Save Username' ) }
+						{ translate( 'Save username' ) }
 					</FormButton>
 
 					<FormButton

diff --git a/client/me/application-passwords/index.jsx b/client/me/application-passwords/index.jsx
@@ -205,7 +205,7 @@ class ApplicationPasswords extends Component {
 							{ /* eslint-disable wpcalypso/jsx-gridicon-size */ }
 							<Gridicon icon="plus-small" size={ 16 } />
 							{ /* eslint-enable wpcalypso/jsx-gridicon-size */ }
-							{ translate( 'Add New Application Password' ) }
+							{ translate( 'Add new application password' ) }
 						</Button>
 					) }
 				</SectionHeader>

diff --git a/client/me/notification-settings/reader-subscriptions/index.jsx b/client/me/notification-settings/reader-subscriptions/index.jsx
@@ -25,12 +25,13 @@ import FormSelect from 'components/forms/form-select';
 import FormSectionHeading from 'components/forms/form-section-heading';
 import ReauthRequired from 'me/reauth-required';
 import twoStepAuthorization from 'lib/two-step-authorization';
-import observe from 'lib/mixins/data-observe';
+import observe from 'lib/mixins/data-observe'; //eslint-disable-line no-restricted-imports
 import Main from 'components/main';
 import { withLocalizedMoment } from 'components/localized-moment';
 import { recordGoogleEvent } from 'state/analytics/actions';
 import PageViewTracker from 'lib/analytics/page-view-tracker';
 
+/* eslint-disable react/prefer-es6-class */
 const NotificationSubscriptions = createReactClass( {
 	displayName: 'NotificationSubscriptions',
 
@@ -73,7 +74,7 @@ const NotificationSubscriptions = createReactClass( {
 
 	render() {
 		return (
-			<Main className="notifications-settings">
+			<Main className="reader-subscriptions__notifications-settings">
 				<PageViewTracker
 					path="/me/notifications/subscriptions"
 					title="Me > Notifications > Subscriptions Delivery"
@@ -83,7 +84,7 @@ const NotificationSubscriptions = createReactClass( {
 
 				<Navigation path={ this.props.path } />
 
-				<Card className="me-notification-settings">
+				<Card className="reader-subscriptions__notification-settings">
 					<form
 						id="notification-settings"
 						onChange={ this.props.markChanged }
@@ -169,7 +170,7 @@ const NotificationSubscriptions = createReactClass( {
 							</FormLabel>
 							<FormSelect
 								disabled={ this.getDisabledState() }
-								className="me-notification-settings__delivery-window"
+								className="reader-subscriptions__delivery-window"
 								id="subscription_delivery_day"
 								name="subscription_delivery_day"
 								onChange={ this.updateSetting }
@@ -240,7 +241,7 @@ const NotificationSubscriptions = createReactClass( {
 						>
 							{ this.state.submittingForm
 								? this.props.translate( 'Saving…' )
-								: this.props.translate( 'Save Notification Settings' ) }
+								: this.props.translate( 'Save notification settings' ) }
 						</FormButton>
 					</form>
 				</Card>

diff --git a/client/me/notification-settings/settings-form/actions.jsx b/client/me/notification-settings/settings-form/actions.jsx
@@ -35,11 +35,11 @@ class NotificationSettingsFormActions extends React.PureComponent {
 						onClick={ this.props.onSaveToAll }
 						isPrimary={ false }
 					>
-						{ this.props.translate( 'Save to All Sites' ) }
+						{ this.props.translate( 'Save to all sites' ) }
 					</FormButton>
 				) }
 				<FormButton disabled={ this.props.disabled } onClick={ this.props.onSave }>
-					{ this.props.translate( 'Save Settings' ) }
+					{ this.props.translate( 'Save settings' ) }
 				</FormButton>
 			</div>
 			/* eslint-enable wpcalypso/jsx-classname-namespace */

diff --git a/client/me/pending-payments/index.jsx b/client/me/pending-payments/index.jsx
@@ -82,7 +82,7 @@ export class PendingPayments extends Component {
 						line={ translate(
 							'Our plans give your site the power to thrive. Find the plan that works for you.'
 						) }
-						action={ translate( 'Upgrade Now' ) }
+						action={ translate( 'Upgrade now' ) }
 						actionURL={ '/plans' }
 						illustration={ '/calypso/images/illustrations/illustration-nosites.svg' }
 					/>

diff --git a/client/me/privacy/main.jsx b/client/me/privacy/main.jsx
@@ -158,7 +158,7 @@ const Privacy = createReactClass( {
 						>
 							{ this.state.submittingForm
 								? translate( 'Saving…' )
-								: translate( 'Save Privacy Settings' ) }
+								: translate( 'Save privacy settings' ) }
 						</FormButton>
 					</form>
 				</Card>

diff --git a/client/me/profile/index.jsx b/client/me/profile/index.jsx
@@ -21,7 +21,7 @@ import FormTextarea from 'components/forms/form-textarea';
 import FormTextInput from 'components/forms/form-text-input';
 import Main from 'components/main';
 import MeSidebarNavigation from 'me/sidebar-navigation';
-import observe from 'lib/mixins/data-observe';
+import observe from 'lib/mixins/data-observe'; //eslint-disable-line no-restricted-imports
 import ProfileLinks from 'me/profile-links';
 import ReauthRequired from 'me/reauth-required';
 import SectionHeader from 'components/section-header';
@@ -37,6 +37,7 @@ import './style.scss';
 
 const debug = debugFactory( 'calypso:me:profile' );
 
+/* eslint-disable react/prefer-es6-class */
 const Profile = createReactClass( {
 	displayName: 'Profile',
 
@@ -68,7 +69,7 @@ const Profile = createReactClass( {
 				<MeSidebarNavigation />
 				<ReauthRequired twoStepAuthorization={ twoStepAuthorization } />
 				<SectionHeader label={ this.props.translate( 'Profile' ) } />
-				<Card className="me-profile-settings">
+				<Card className="profile__settings">
 					<EditGravatar />
 
 					<form onSubmit={ this.submitForm } onChange={ this.props.markChanged }>
@@ -131,11 +132,11 @@ const Profile = createReactClass( {
 							>
 								{ this.state.submittingForm
 									? this.props.translate( 'Saving…' )
-									: this.props.translate( 'Save Profile Details' ) }
+									: this.props.translate( 'Save profile details' ) }
 							</FormButton>
 						</p>
 					</form>
-					<p className="me-profile-settings__info-text">
+					<p className="profile__info-text">
 						{ this.props.translate(
 							'This information will be displayed publicly on {{profilelink}}your profile{{/profilelink}} and in ' +
 								'{{hovercardslink}}Gravatar Hovercards{{/hovercardslink}}.',

diff --git a/client/me/profile/style.scss b/client/me/profile/style.scss
@@ -1,4 +1,4 @@
-.me-profile-settings .edit-gravatar {
+.profile__settings .edit-gravatar {
 	text-align: center;
 
 	@include breakpoint('>960px') {
@@ -14,14 +14,14 @@
 	}
 }
 
-.me-profile-settings .form-fieldset:nth-child( 1 ),
-.me-profile-settings .form-fieldset:nth-child( 2 ) {
+.profile__settings .form-fieldset:nth-child( 1 ),
+.profile__settings .form-fieldset:nth-child( 2 ) {
 	@include breakpoint('>960px') {
 		clear: right;
 	}
 }
 
-.me-profile-settings__info-text {
+.profile__info-text {
 	margin-bottom: 0;
 }
 

diff --git a/client/me/purchases/concierge-banner/index.jsx b/client/me/purchases/concierge-banner/index.jsx
@@ -81,7 +81,7 @@ class ConciergeBanner extends Component {
 							'Quick Start Session is a one-on-one video session between the user and our support staff.',
 					}
 				);
-				buttonText = translate( 'Schedule Now' );
+				buttonText = translate( 'Schedule now' );
 				buttonHref = '/me/concierge';
 				illustrationUrl = conciergeImage;
 				break;
@@ -95,7 +95,7 @@ class ConciergeBanner extends Component {
 							'Quick Start Session is a one-on-one video session between the user and our support staff.',
 					}
 				);
-				buttonText = translate( 'Schedule Now' );
+				buttonText = translate( 'Schedule now' );
 				buttonHref = '/me/concierge';
 				illustrationUrl = conciergeImage;
 				break;
@@ -109,7 +109,7 @@ class ConciergeBanner extends Component {
 							'Quick Start Session is a one-on-one video session between the user and our support staff.',
 					}
 				);
-				buttonText = translate( 'Learn More' );
+				buttonText = translate( 'Learn more' );
 				buttonHref = '/checkout/offer-quickstart-session';
 				illustrationUrl = '/calypso/images/illustrations/illustration-start.svg';
 				break;

diff --git a/client/me/purchases/credit-cards/index.jsx b/client/me/purchases/credit-cards/index.jsx
@@ -62,7 +62,7 @@ class CreditCards extends Component {
 
 		return (
 			<Button primary compact className="credit-cards__add" onClick={ this.goToAddCreditCard }>
-				{ this.props.translate( 'Add Credit Card' ) }
+				{ this.props.translate( 'Add credit card' ) }
 			</Button>
 		);
 	}

diff --git a/client/me/purchases/manage-purchase/index.jsx b/client/me/purchases/manage-purchase/index.jsx
@@ -166,7 +166,7 @@ class ManagePurchase extends Component {
 
 		return (
 			<Button className="manage-purchase__renew-button" onClick={ this.handleRenew } compact>
-				{ translate( 'Renew Now' ) }
+				{ translate( 'Renew now' ) }
 			</Button>
 		);
 	}

diff --git a/client/me/purchases/purchases-list/index.jsx b/client/me/purchases/purchases-list/index.jsx
@@ -136,7 +136,7 @@ class PurchasesList extends Component {
 								'Our plans give your site the power to thrive. ' +
 									'Find the plan that works for you.'
 							) }
-							action={ this.props.translate( 'Upgrade Now' ) }
+							action={ this.props.translate( 'Upgrade now' ) }
 							actionURL={ '/plans' }
 							illustration={ '/calypso/images/illustrations/illustration-nosites.svg' }
 						/>

diff --git a/client/me/security-2fa-backup-codes/index.jsx b/client/me/security-2fa-backup-codes/index.jsx
@@ -50,9 +50,7 @@ class Security2faBackupCodes extends React.Component {
 	onRequestComplete = ( error, data ) => {
 		if ( error ) {
 			this.setState( {
-				lastError: this.props.translate(
-					'Unable to obtain backup codes.  Please try again later.'
-				),
+				lastError: this.props.translate( 'Unable to obtain backup codes. Please try again later.' ),
 			} );
 			return;
 		}
@@ -147,7 +145,7 @@ class Security2faBackupCodes extends React.Component {
 						disabled={ this.state.generatingCodes || !! this.state.backupCodes.length }
 						onClick={ this.handleGenerateButtonClick }
 					>
-						{ this.props.translate( 'Generate New Backup Codes' ) }
+						{ this.props.translate( 'Generate new backup codes' ) }
 					</Button>
 				</SectionHeader>
 				<Card>

diff --git a/client/me/security-2fa-key/index.jsx b/client/me/security-2fa-key/index.jsx
@@ -105,7 +105,7 @@ class Security2faKey extends React.Component {
 							{ /* eslint-disable wpcalypso/jsx-gridicon-size */ }
 							<Gridicon icon="plus-small" size={ 16 } />
 							{ /* eslint-enable wpcalypso/jsx-gridicon-size */ }
-							{ translate( 'Register Key' ) }
+							{ translate( 'Register key' ) }
 						</Button>
 					) }
 				</SectionHeader>

diff --git a/client/me/security-2fa-setup-backup-codes/index.jsx b/client/me/security-2fa-setup-backup-codes/index.jsx
@@ -37,9 +37,7 @@ class Security2faSetupBackupCodes extends React.Component {
 	onRequestComplete = ( error, data ) => {
 		if ( error ) {
 			this.setState( {
-				lastError: this.props.translate(
-					'Unable to obtain backup codes.  Please try again later.'
-				),
+				lastError: this.props.translate( 'Unable to obtain backup codes. Please try again later.' ),
 			} );
 			return;
 		}

diff --git a/client/me/sidebar/index.jsx b/client/me/sidebar/index.jsx
@@ -127,7 +127,7 @@ class MeSidebar extends React.Component {
 							onClick={ this.onSignOut }
 							title={ translate( 'Log out of WordPress.com' ) }
 						>
-							{ translate( 'Log Out' ) }
+							{ translate( 'Log out' ) }
 						</Button>
 					</div>