Change wordings and a bit of style for p2 creation (#60640)

* Change wordings and a bit of style for signup * Feedback from review
Automattic · Feb 1, 2022 · 50fd9c4 · 50fd9c4
1 parent 5b74b1b
commit 50fd9c4
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 6 deletions.
diff --git a/client/signup/p2-processing-screen/index.jsx b/client/signup/p2-processing-screen/index.jsx
@@ -11,7 +11,7 @@ function P2SignupProcessingScreen() {
 			</div>
 
 			<div className="p2-processing-screen__text">
-				{ translate( '{{h2}}Hooray!{{/h2}} {{p}}Your new P2 is almost ready.{{/p}}', {
+				{ translate( '{{h2}}Hooray!{{/h2}} {{p}}Your new P2 workspace is almost ready.{{/p}}', {
 					components: {
 						// eslint-disable-next-line jsx-a11y/heading-has-content
 						h2: <h2 />,

diff --git a/client/signup/p2-step-wrapper/index.jsx b/client/signup/p2-step-wrapper/index.jsx
@@ -1,5 +1,6 @@
 import { Path, SVG } from '@wordpress/components';
 import { Icon } from '@wordpress/icons';
+import classnames from 'classnames';
 import { useTranslate } from 'i18n-calypso';
 import PropTypes from 'prop-types';
 import StepWrapper from 'calypso/signup/step-wrapper';
@@ -14,11 +15,12 @@ function P2StepWrapper( {
 	subHeaderText,
 	positionInFlow,
 	children,
+	className,
 } ) {
 	const translate = useTranslate();
 
 	return (
-		<div className="p2-step-wrapper">
+		<div className={ classnames( 'p2-step-wrapper', className ) }>
 			<div className="p2-step-wrapper__header">
 				<div className="p2-step-wrapper__header-logo">
 					<SVG xmlns="http://www.w3.org/2000/svg" width="67" height="32" viewBox="0 0 67 32">

diff --git a/client/signup/steps/p2-site/index.jsx b/client/signup/steps/p2-site/index.jsx
@@ -383,7 +383,7 @@ class P2Site extends Component {
 					className="p2-site__validation-site-title"
 				>
 					<FormLabel htmlFor="site-title-input">
-						{ this.props.translate( 'Name your team' ) }
+						{ this.props.translate( 'Name your workspace' ) }
 					</FormLabel>
 					<FormTextInput
 						id="site-title-input"
@@ -404,7 +404,7 @@ class P2Site extends Component {
 					className="p2-site__validation-site"
 				>
 					<FormLabel htmlFor="site-address-input">
-						{ this.props.translate( 'Choose an address for your P2 workspace' ) }
+						{ this.props.translate( 'Choose an address for your workspace' ) }
 					</FormLabel>
 					<div className="p2-site__site-url-container">
 						<FormTextInput
@@ -461,11 +461,13 @@ class P2Site extends Component {
 	render() {
 		return (
 			<P2StepWrapper
+				className="p2-site__create"
 				flowName={ this.props.flowName }
 				stepName={ this.props.stepName }
 				positionInFlow={ this.props.positionInFlow }
-				headerText={ this.props.translate(
-					'Share, discuss, review, and collaborate across time zones, without interruptions.'
+				headerText={ this.props.translate( 'Create a workspace' ) }
+				subHeaderText={ this.props.translate(
+					'Your workspace is where you will create all the different P2s for teams, projects, topics, etc.'
 				) }
 			>
 				<form className="p2-site__form" onSubmit={ this.handleSubmit } noValidate>

diff --git a/client/signup/steps/p2-site/style.scss b/client/signup/steps/p2-site/style.scss
@@ -1,3 +1,10 @@
+.p2-site__create {
+	.p2-step-wrapper__header-text {
+		font-size: var( --p2-font-size-form-xl );
+		font-weight: 700;
+	}
+}
+
 .p2-site__site-url-container {
 	position: relative;
 }