Simplify template author token (#56566)

* Simplify author token * template details panel
WordPress · Nov 27, 2023 · 1f7d32a · 1f7d32a
1 parent 1b30918
commit 1f7d32a
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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 {