From ac42d044a7cb1f71bc159001aedbfa7f39b36350 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Fri, 13 Jan 2023 17:32:26 +0000
Subject: [PATCH] Update spacing + dimensions in the Site Hub (#47120)

* Remove some internal site hub spacing

* Icon dimensions
---
 packages/edit-site/src/components/site-hub/index.js    | 1 +
 packages/edit-site/src/components/site-hub/style.scss  | 8 +++++++-
 packages/edit-site/src/components/site-icon/index.js   | 2 +-
 packages/edit-site/src/components/site-icon/style.scss | 4 ++--
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/edit-site/src/components/site-hub/index.js b/packages/edit-site/src/components/site-hub/index.js
index 213f0a973eb0f4..a6a7f2cc0dcc7c 100644
--- a/packages/edit-site/src/components/site-hub/index.js
+++ b/packages/edit-site/src/components/site-hub/index.js
@@ -100,6 +100,7 @@ const SiteHub = forwardRef(
 				<HStack
 					justify="flex-start"
 					className="edit-site-site-hub__text-content"
+					spacing="0"
 				>
 					<motion.div
 						className="edit-site-site-hub__view-mode-toggle-container"
diff --git a/packages/edit-site/src/components/site-hub/style.scss b/packages/edit-site/src/components/site-hub/style.scss
index 51bb78a75a1d3f..e1f3c95e3ed7a4 100644
--- a/packages/edit-site/src/components/site-hub/style.scss
+++ b/packages/edit-site/src/components/site-hub/style.scss
@@ -15,10 +15,16 @@
 
 .edit-site-site-hub__view-mode-toggle-container {
 	height: $header-height;
-	width: $header-height;
+	width: $header-height + 4px;
 	flex-shrink: 0;
 }
 
+.edit-site-layout.is-edit-mode {
+	.edit-site-site-hub__view-mode-toggle-container {
+		width: $header-height;
+	}
+}
+
 .edit-site-site-hub__text-content {
 	// Necessary for the ellipsis to work.
 	overflow: hidden;
diff --git a/packages/edit-site/src/components/site-icon/index.js b/packages/edit-site/src/components/site-icon/index.js
index f5ba13262c2e0d..967c0ebe460c62 100644
--- a/packages/edit-site/src/components/site-icon/index.js
+++ b/packages/edit-site/src/components/site-icon/index.js
@@ -41,7 +41,7 @@ function SiteIcon( { className } ) {
 	) : (
 		<Icon
 			className="edit-site-site-icon__icon"
-			size="36px"
+			size="32px"
 			icon={ wordpress }
 		/>
 	);
diff --git a/packages/edit-site/src/components/site-icon/style.scss b/packages/edit-site/src/components/site-icon/style.scss
index 8eea7683f39e4d..40b8000122cf56 100644
--- a/packages/edit-site/src/components/site-icon/style.scss
+++ b/packages/edit-site/src/components/site-icon/style.scss
@@ -3,8 +3,8 @@
 }
 
 .edit-site-site-icon__image {
-	width: $button-size;
-	height: $button-size;
+	width: $grid-unit-40;
+	height: $grid-unit-40;
 	border-radius: $radius-block-ui;
 	object-fit: cover;
 }