From 1f7d32a5819645c53bd93b7a9f15f9f123894716 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Mon, 27 Nov 2023 17:56:35 +0000
Subject: [PATCH] Simplify template author token (#56566)

* Simplify author token

* template details panel
---
 .../edit-site/src/components/list/style.scss  | 24 +++++++++----------
 .../page-templates/dataviews-templates.js     |  2 +-
 .../style.scss                                |  7 +++++-
 3 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/packages/edit-site/src/components/list/style.scss b/packages/edit-site/src/components/list/style.scss
index 0979b7ac7e3a6a..cfc65252c8e685 100644
--- a/packages/edit-site/src/components/list/style.scss
+++ b/packages/edit-site/src/components/list/style.scss
@@ -148,33 +148,31 @@
 .edit-site-list-added-by__icon {
 	display: flex;
 	flex-shrink: 0;
-	align-items: center;
-	justify-content: center;
-	width: $grid-unit-40;
-	height: $grid-unit-40;
-	background: $gray-800;
-	border-radius: 100%;
+	width: $grid-unit-30;
+	height: $grid-unit-30;
 
 	svg {
-		fill: $white;
+		fill: currentColor;
 	}
 }
 
 .edit-site-list-added-by__avatar {
 	flex-shrink: 0;
 	overflow: hidden;
-	border-radius: 100%;
-	background: $gray-800;
-	width: $grid-unit-40;
-	height: $grid-unit-40;
+	width: $grid-unit-30;
+	height: $grid-unit-30;
+	align-items: center;
+	justify-content: center;
+	display: flex;
 
 	img {
-		width: $grid-unit-40;
-		height: $grid-unit-40;
+		width: 20px;
+		height: 20px;
 		object-fit: cover;
 		opacity: 0;
 		transition: opacity 0.1s linear;
 		@include reduce-motion("transition");
+		border-radius: 100%;
 	}
 
 	&.is-loaded {
diff --git a/packages/edit-site/src/components/page-templates/dataviews-templates.js b/packages/edit-site/src/components/page-templates/dataviews-templates.js
index 1b342b414db765..49e15dfe81c71a 100644
--- a/packages/edit-site/src/components/page-templates/dataviews-templates.js
+++ b/packages/edit-site/src/components/page-templates/dataviews-templates.js
@@ -97,7 +97,7 @@ function TemplateTitle( { item } ) {
 function AuthorField( { item } ) {
 	const { text, icon, imageUrl } = useAddedBy( item.type, item.id );
 	return (
-		<HStack alignment="left">
+		<HStack alignment="left" spacing={ 1 }>
 			{ imageUrl ? (
 				<AvatarImage imageUrl={ imageUrl } />
 			) : (
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-template/style.scss
index 20b39d8e89817a..4e6fcc3700fc4d 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-template/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-template/style.scss
@@ -11,6 +11,8 @@
 
 	img {
 		border-radius: $grid-unit-15;
+		width: 20px;
+		height: 20px;
 	}
 
 	svg {
@@ -21,7 +23,10 @@
 .edit-site-sidebar-navigation-screen-template__added-by-description-author-icon {
 	width: 24px;
 	height: 24px;
-	margin-right: $grid-unit-10;
+	margin-right: $grid-unit-05;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
 }
 
 .edit-site-sidebar-navigation-screen-template__template-area-button {