Add header title to list view sidebar

WordPress · May 10, 2024 · c3f69dd · c3f69dd
1 parent 9b77e39
commit c3f69dd
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 5 deletions.
diff --git a/packages/editor/src/components/list-view-sidebar/index.js b/packages/editor/src/components/list-view-sidebar/index.js
@@ -130,13 +130,18 @@ export default function ListViewSidebar() {
 				defaultTabId="list-view"
 			>
 				<div className="editor-list-view-sidebar__header">
+					<span className="editor-list-view-sidebar__header-title">
+						{ __( 'Document Overview' ) }
+					</span>
 					<Button
 						className="editor-list-view-sidebar__close-button"
 						icon={ closeSmall }
 						label={ __( 'Close' ) }
 						onClick={ closeListView }
 						size="small"
 					/>
+				</div>
+				<div className="editor-list-view-sidebar__tabs">
 					<Tabs.TabList
 						className="editor-list-view-sidebar__tabs-tablist"
 						ref={ tabsRef }

diff --git a/packages/editor/src/components/list-view-sidebar/style.scss b/packages/editor/src/components/list-view-sidebar/style.scss
@@ -10,13 +10,29 @@
 	}
 	.editor-list-view-sidebar__header {
 		display: flex;
-		border-bottom: $border-width solid $gray-300;
+		justify-content: space-between;
+		padding: $grid-unit-05 $grid-unit-05 0 $grid-unit-20;
+		background-color: $gray-100;
+	}
+
+	.editor-list-view-sidebar__header-title {
+		font-size: 12px;
+		font-weight: 500;
+		color: $gray-600;
+		text-transform: uppercase;
+		position: relative;
+		top: $grid-unit-10;
 	}
+
 	.editor-list-view-sidebar__close-button {
-		background: $white;
-		order: 1;
-		align-self: center;
-		margin-right: $grid-unit-15;
+		background: transparent;
+		color: $gray-600;
+	}
+
+	.editor-list-view-sidebar__tabs {
+		display: flex;
+		background-color: $gray-100;
+		border-bottom: $border-width solid $gray-300;
 	}
 }