Clean up styling and class names in post publish modal

WordPress · Aug 23, 2019 · 49d184a · 49d184a
1 parent fab116e
commit 49d184a
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 21 deletions.
diff --git a/packages/editor/src/components/post-publish-modal/index.js b/packages/editor/src/components/post-publish-modal/index.js
@@ -101,7 +101,7 @@ export class PostPublishModal extends Component {
 				<div className="editor-post-publish-modal__content" { ...propsForModal }>
 					{ isPrePublish && (
 						isSaving ?
-							<div className="editor-post-publish-modal-pending">
+							<div className="editor-post-publish-modal__publishing-animation">
 								<Spinner />
 							</div> :
 							<>
@@ -113,16 +113,15 @@ export class PostPublishModal extends Component {
 									checked={ isPublishSidebarEnabled }
 									onChange={ onTogglePublishSidebar }
 								/>
-								<div className="editor-post-publish-modal__content-publish-controls">
+								<div className="editor-post-publish-modal__prepublish-controls">
 									<Button
 										isLink
-										className="editor-post-publish-modal__content-cancel-button"
+										className="editor-post-publish-modal__prepublish-cancel-button"
 										onClick={ onClose }
 									>
 										{ __( 'Cancel' ) }
 									</Button>
-									<PostPublishButton isLarge className="editor-post-publish-modal__content-cancel-button" focusOnMount={ true } onSubmit={ this.onSubmit } forceIsDirty={ forceIsDirty } forceIsSaving={ forceIsSaving } />
-									<span className="editor-post-publish-modal__spacer"></span>
+									<PostPublishButton isLarge className="editor-post-publish-modal__content-publish-button" focusOnMount={ true } onSubmit={ this.onSubmit } forceIsDirty={ forceIsDirty } forceIsSaving={ forceIsSaving } />
 								</div>
 							</>
 					) }

diff --git a/packages/editor/src/components/post-publish-modal/postpublish.js b/packages/editor/src/components/post-publish-modal/postpublish.js
@@ -62,19 +62,19 @@ class PostPublishModalPostpublish extends Component {
 		const viewPostLabel = get( postType, [ 'labels', 'view_item' ] );
 
 		return (
-			<div className="post-publish-modal__postpublish">
-				<p className="post-publish-modal__postpublish-post-text">
+			<div className="editor-editor-post-publish-modal__prepublish">
+				<p className="editor-post-publish-modal__postpublish-post-text">
 					{
 						sprintf(
 							/* translators: %s: post type singular name */
 							__( 'Great Work! You\'ve just published your first %s. You can review it here to check for any mistakes, or start on a new %s.' ), postLabel.toLowerCase(), postLabel.toLowerCase()
 						)
 					}
 				</p>
-				<div className="post-publish-modal__postpublish-post-address">
+				<div className="editor-post-publish-modal__postpublish-post-address">
 					<TextControl
 						disabled
-						className="post-publish-modal__postpublish-post-url"
+						className="editor-post-publish-modal__postpublish-post-url"
 						label={
 							sprintf(
 								/* translators: %s: post type singular name */
@@ -86,15 +86,15 @@ class PostPublishModalPostpublish extends Component {
 					<ClipboardButton
 						isDefault
 						isLarge
-						className="post-publish-modal__postpublish-post-copy"
+						className="editor-post-publish-modal__postpublish-post-copy"
 						text={ post.link }
 						onCopy={ this.onCopy }
 					>
 						{ this.state.showCopyConfirmation ? __( 'Copied!' ) : __( 'Copy Link' ) }
 					</ClipboardButton>
 				</div>
 				{ ! isScheduled && (
-					<div className="editor-post-publish-modal__content-publish-controls">
+					<div className="editor-post-publish-modal__postpublish-controls">
 						<Button
 							href={ post.link }
 							isPrimary

diff --git a/packages/editor/src/components/post-publish-modal/style.scss b/packages/editor/src/components/post-publish-modal/style.scss
@@ -3,6 +3,7 @@
 	width: 35vw;
 }
 
+/* Override default modal styles */
 .editor-post-publish-modal .components-modal__header {
 	border-bottom: none;
 	margin-bottom: 12px;
@@ -44,30 +45,40 @@
 	clear: both;
 }
 
-.editor-post-publish-modal-pending {
+/* Pre-publish Modal Styles */
+.editor-post-publish-modal__prepublish-controls {
+	text-align: right;
+	padding: 24px 0 0;
+}
+
+.editor-post-publish-modal__prepublish-controls .editor-post-publish-modal__prepublish-cancel-button,
+.editor-post-publish-modal__prepublish-controls .editor-post-publish-modal__prepublish-publish-button {
+	padding: 0 24px 2px;
+}
+
+/* Publishing Modal Styles */
+.editor-post-publish-modal__publishing-animation {
 	display: flex;
 	justify-content: center;
 }
 
-.post-publish-modal__postpublish-post-address {
+/* Post Publish Modal Styles */
+.editor-post-publish-modal__postpublish-post-address {
 	display: flex;
 	align-items: flex-end;
 	padding: 12px 0;
 }
-.post-publish-modal__postpublish-post-url {
+
+.editor-post-publish-modal__postpublish-post-url {
 	flex: auto;
 	padding-right: 8px;
 }
-.post-publish-modal__postpublish-post-copy {
+
+.editor-post-publish-modal__postpublish-post-copy {
 	margin-bottom: 9px;
 }
 
-.editor-post-publish-modal__content-publish-controls {
+.editor-post-publish-modal__postpublish-controls {
 	text-align: right;
 	padding: 24px 0 0;
 }
-
-.editor-post-publish-modal__content-publish-controls button.is-link,
-.editor-post-publish-modal__content-publish-controls button.is-large {
-	padding: 0 24px 2px;
-}