Fix style of header

Automattic · Dec 13, 2024 · cdda5dd · cdda5dd
1 parent 0e3c762
commit cdda5dd
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 2 deletions.
diff --git a/client/my-sites/domains/domain-management/domain-overview-pane/index.tsx b/client/my-sites/domains/domain-management/domain-overview-pane/index.tsx
@@ -73,12 +73,15 @@ const DomainOverviewPane = ( {
 
 		return (
 			<>
-				<Button onClick={ closeSitePreviewPane } className="item-preview__close-preview-button">
+				<Button
+					onClick={ closeSitePreviewPane }
+					className="button item-preview__close-preview-button"
+				>
 					{ __( 'Close' ) }
 				</Button>
 				<Button
 					variant="primary"
-					className="item-preview__admin-button"
+					className="button item-preview__admin-button"
 					href={ adminUrl }
 					ref={ useMergeRefs( [ adminButtonRef, focusRef ] ) }
 				>

diff --git a/client/my-sites/domains/domain-management/domain-overview-pane/style.scss b/client/my-sites/domains/domain-management/domain-overview-pane/style.scss
@@ -12,4 +12,56 @@
 .a4a-layout.domains-overview .domains-overview__details .section-nav-tabs__list {
     box-sizing: border-box;
     overflow-x: auto;
+}
+
+.item-preview__header-actions .button {
+	border-radius: 4px;
+	height: auto;
+}
+
+.a4a-layout.domains-overview .item-preview__header {
+	.item-preview__header-info .item-preview__header-title-summary .item-preview__header-title {
+		font-family: Recoleta, sans-serif;
+		font-weight: 400;
+		line-height: 1;
+		letter-spacing: normal;
+	}
+
+	.item-preview__header-content {
+		.item-preview__header-info {
+			flex-wrap: wrap;
+		}
+
+		@media (max-width: $break-large) {
+			padding: 0;
+		}
+	}
+
+	.item-preview__header-content .item-preview__header-title-summary .item-preview__header-summary {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.5rem;
+		.item-preview__header-summary-link {
+			color: var(--studio-gray-70, #3c434a);
+			text-decoration: none;
+			&:hover {
+				color: var(--color-accent, #3858e9);
+			}
+		}
+	}
+
+	.item-preview__header-actions .button {
+		border-radius: 4px;
+	}
+
+	.item-preview__header-content .item-preview__close-preview {
+		height: 16px;
+		padding-left: 0;
+		padding-right: 0;
+		color: var(--color-link);
+
+		@include break-medium {
+			height: 32px;
+		}
+	}
 }