Post Lock: Adjust avatar design and update message (#37979)

WordPress · Jan 14, 2022 · e1042c1 · e1042c1
1 parent 3eb3d1d
commit e1042c1
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 26 deletions.
diff --git a/packages/editor/src/components/post-locked-modal/index.js b/packages/editor/src/components/post-locked-modal/index.js
@@ -185,6 +185,8 @@ export default function PostLockedModal() {
 					src={ userAvatar }
 					alt={ __( 'Avatar' ) }
 					className="editor-post-locked-modal__avatar"
+					width={ 64 }
+					height={ 64 }
 				/>
 			) }
 			<div>
@@ -214,29 +216,36 @@ export default function PostLockedModal() {
 					</p>
 				) }
 				{ ! isTakeover && (
-					<p>
-						{ createInterpolateElement(
-							userDisplayName
-								? sprintf(
-										/* translators: %s: user's display name */
-										__(
-											'<strong>%s</strong> is currently working on this post (<PreviewLink />), which means you cannot make changes, unless you take over.'
-										),
-										userDisplayName
-								  )
-								: __(
-										'Another user is currently working on this post (<PreviewLink />), which means you cannot make changes, unless you take over.'
-								  ),
-							{
-								strong: <strong />,
-								PreviewLink: (
-									<ExternalLink href={ previewLink }>
-										{ __( 'preview' ) }
-									</ExternalLink>
-								),
-							}
-						) }
-					</p>
+					<>
+						<p>
+							{ createInterpolateElement(
+								userDisplayName
+									? sprintf(
+											/* translators: %s: user's display name */
+											__(
+												'<strong>%s</strong> is currently working on this post (<PreviewLink />), which means you cannot make changes, unless you take over.'
+											),
+											userDisplayName
+									  )
+									: __(
+											'Another user is currently working on this post (<PreviewLink />), which means you cannot make changes, unless you take over.'
+									  ),
+								{
+									strong: <strong />,
+									PreviewLink: (
+										<ExternalLink href={ previewLink }>
+											{ __( 'preview' ) }
+										</ExternalLink>
+									),
+								}
+							) }
+						</p>
+						<p>
+							{ __(
+								'If you take over, the other user will lose editing control to the post, but their changes will be saved.'
+							) }
+						</p>
+					</>
 				) }
 
 				<Flex

diff --git a/packages/editor/src/components/post-locked-modal/style.scss b/packages/editor/src/components/post-locked-modal/style.scss
@@ -2,14 +2,18 @@
 	@include break-small() {
 		max-width: $break-mobile;
 	}
+
+	.components-modal__content {
+		display: flex;
+	}
 }
 
 .editor-post-locked-modal__buttons {
 	margin-top: $grid-unit-30;
 }
 
 .editor-post-locked-modal__avatar {
-	float: left;
-	margin: $grid-unit-10;
-	margin-right: $grid-unit-15;
+	border-radius: $radius-block-ui;
+	margin-top: $grid-unit-20;
+	margin-right: $grid-unit-30;
 }