From dc73ec9aa2d98d6aaf323dab06df48c5d4eafab8 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Thu, 20 May 2021 12:59:08 +0100
Subject: [PATCH 1/3] Update the appearance of the template details popover

---
 .../header/template-title/delete-template.js  |  4 ++--
 .../template-title/edit-template-title.js     |  3 +++
 .../header/template-title/style.scss          | 19 ++++++++++++++++++-
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/packages/edit-post/src/components/header/template-title/delete-template.js b/packages/edit-post/src/components/header/template-title/delete-template.js
index 7a3f5d5c382073..d87246d758c417 100644
--- a/packages/edit-post/src/components/header/template-title/delete-template.js
+++ b/packages/edit-post/src/components/header/template-title/delete-template.js
@@ -45,9 +45,9 @@ export default function DeleteTemplate() {
 	return (
 		<MenuGroup className="edit-post-template-top-area__second-menu-group">
 			<MenuItem
+				className="edit-post-template-top-area__delete-template-button"
 				isDestructive
-				isTertiary
-				isLink
+				isSecondary
 				aria-label={ __( 'Delete template' ) }
 				onClick={ () => {
 					if (
diff --git a/packages/edit-post/src/components/header/template-title/edit-template-title.js b/packages/edit-post/src/components/header/template-title/edit-template-title.js
index feabafcb9fdd09..c39ba80ed73111 100644
--- a/packages/edit-post/src/components/header/template-title/edit-template-title.js
+++ b/packages/edit-post/src/components/header/template-title/edit-template-title.js
@@ -40,6 +40,9 @@ export default function EditTemplateTitle() {
 		<TextControl
 			label={ __( 'Title' ) }
 			value={ templateTitle }
+			help={ __(
+				'Give the template a title that indicates its purpose, e.g. "Full Width"'
+			) }
 			onChange={ ( newTitle ) => {
 				const settings = getEditorSettings();
 				const newAvailableTemplates = mapValues(
diff --git a/packages/edit-post/src/components/header/template-title/style.scss b/packages/edit-post/src/components/header/template-title/style.scss
index 40262e0573ee87..b0e1c10f55115f 100644
--- a/packages/edit-post/src/components/header/template-title/style.scss
+++ b/packages/edit-post/src/components/header/template-title/style.scss
@@ -13,5 +13,22 @@
 }
 
 .edit-post-template-top-area__popover .components-popover__content {
-	min-width: 360px;
+	min-width: 280px;
+}
+
+.edit-post-template-top-area__second-menu-group {
+	margin-left: - $grid-unit-15;
+	margin-right: - $grid-unit-15;
+	padding: $grid-unit-15;
+	padding-bottom: 0;
+	border-top: 1px solid $gray-300;
+
+	.edit-post-template-top-area__delete-template-button {
+		display: flex;
+		justify-content: center;
+
+		.components-menu-item__item {
+			margin-right: 0;
+		}
+	}
 }

From f8af7edf75199fae95a5f109e6c691a418603ae2 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Thu, 20 May 2021 13:45:14 +0100
Subject: [PATCH 2/3] Tweaks

---
 .../components/header/template-title/edit-template-title.js | 2 +-
 .../src/components/header/template-title/style.scss         | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/edit-post/src/components/header/template-title/edit-template-title.js b/packages/edit-post/src/components/header/template-title/edit-template-title.js
index c39ba80ed73111..301574541f6f53 100644
--- a/packages/edit-post/src/components/header/template-title/edit-template-title.js
+++ b/packages/edit-post/src/components/header/template-title/edit-template-title.js
@@ -41,7 +41,7 @@ export default function EditTemplateTitle() {
 			label={ __( 'Title' ) }
 			value={ templateTitle }
 			help={ __(
-				'Give the template a title that indicates its purpose, e.g. "Full Width"'
+				'Give the template a title that indicates its purpose, e.g. "Full Width".'
 			) }
 			onChange={ ( newTitle ) => {
 				const settings = getEditorSettings();
diff --git a/packages/edit-post/src/components/header/template-title/style.scss b/packages/edit-post/src/components/header/template-title/style.scss
index b0e1c10f55115f..653e0c04b0d5fd 100644
--- a/packages/edit-post/src/components/header/template-title/style.scss
+++ b/packages/edit-post/src/components/header/template-title/style.scss
@@ -17,11 +17,11 @@
 }
 
 .edit-post-template-top-area__second-menu-group {
-	margin-left: - $grid-unit-15;
-	margin-right: - $grid-unit-15;
+	margin-left: -$grid-unit-15;
+	margin-right: -$grid-unit-15;
 	padding: $grid-unit-15;
 	padding-bottom: 0;
-	border-top: 1px solid $gray-300;
+	border-top: $border-width solid $gray-300;
 
 	.edit-post-template-top-area__delete-template-button {
 		display: flex;

From a760e3c4fc31f5936556fefe2bff4d2a20c3ded2 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Tue, 1 Jun 2021 09:21:36 +0100
Subject: [PATCH 3/3] use secondary variant for delete button

---
 .../src/components/header/template-title/delete-template.js     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-post/src/components/header/template-title/delete-template.js b/packages/edit-post/src/components/header/template-title/delete-template.js
index 101dbbd5328097..6e6d19af4f4d59 100644
--- a/packages/edit-post/src/components/header/template-title/delete-template.js
+++ b/packages/edit-post/src/components/header/template-title/delete-template.js
@@ -47,7 +47,7 @@ export default function DeleteTemplate() {
 			<MenuItem
 				className="edit-post-template-top-area__delete-template-button"
 				isDestructive
-				variant="tertiary"
+				variant="secondary"
 				aria-label={ __( 'Delete template' ) }
 				onClick={ () => {
 					if (