Style (#36822)

WordPress · Nov 29, 2021 · 308eff8 · 308eff8
1 parent 3c89f4c
commit 308eff8
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 16 deletions.
diff --git a/packages/edit-site/src/components/list/style.scss b/packages/edit-site/src/components/list/style.scss
@@ -61,10 +61,12 @@
 
 .edit-site-list-table {
 	width: 100%;
-	border: $border-width solid $gray-200;
+	border: $border-width solid $gray-300;
 	border-radius: 2px;
 	margin: 0;
 	overflow: hidden;
+	border-spacing: 0;
+	max-width: 960px;
 
 	tr {
 		display: flex;
@@ -74,17 +76,18 @@
 		border-top: $border-width solid $gray-100;
 		margin: 0;
 
+		&:first-child {
+			border-top: 0;
+		}
+
 		@include break-medium() {
 			padding: $grid-unit-30 $grid-unit-40;
 		}
 
 		// Template.
 		.edit-site-list-table-column:nth-child(1) {
-			width: calc(60% - 36px);
-			flex-grow: 1;
-			display: flex;
-			flex-direction: column;
-			align-items: flex-start;
+			width: calc(60% - 18px);
+			padding-right: $grid-unit-30;
 
 			a {
 				display: inline-block;
@@ -96,7 +99,7 @@
 
 		// Added by.
 		.edit-site-list-table-column:nth-child(2) {
-			width: calc(40% - 36px);
+			width: calc(40% - 18px);
 		}
 
 		// Actions.
@@ -110,8 +113,13 @@
 		font-size: 16px;
 		font-weight: 600;
 		text-align: left;
-		color: #050505;
+		color: $gray-900;
 		border-top: none;
+		border-bottom: $border-width solid $gray-300;
+
+		th {
+			font-weight: inherit;
+		}
 	}
 }
 

diff --git a/packages/edit-site/src/components/list/table.js b/packages/edit-site/src/components/list/table.js
@@ -9,6 +9,7 @@ import {
 	DropdownMenu,
 	MenuGroup,
 	MenuItem,
+	__experimentalHeading as Heading,
 } from '@wordpress/components';
 import { moreVertical } from '@wordpress/icons';
 import { addQueryArgs } from '@wordpress/url';
@@ -167,14 +168,16 @@ export default function Table( { templateType } ) {
 						role="row"
 					>
 						<td className="edit-site-list-table-column" role="cell">
-							<a
-								href={ addQueryArgs( window.location.href, {
-									postId: template.id,
-									postType: template.type,
-								} ) }
-							>
-								{ template.title.rendered }
-							</a>
+							<Heading level={ 4 }>
+								<a
+									href={ addQueryArgs( window.location.href, {
+										postId: template.id,
+										postType: template.type,
+									} ) }
+								>
+									{ template.title.rendered }
+								</a>
+							</Heading>
 							{ template.description }
 						</td>