From df8a09e267e26a29b309d8069958f42abe13266f Mon Sep 17 00:00:00 2001
From: Bero <berislav.grgicak@gmail.com>
Date: Thu, 8 Aug 2024 12:01:37 +0200
Subject: [PATCH] Fix site manager button styles (#1676)

## Motivation for the change, related issues

The site manager button looks different in production from other buttons
and they should all look the same.

## Implementation details

Use the button component for the site manager toolbar button.

For some reason buttons a development server look different from buttons
in production.
[The toolbar will soon be
replaced](https://github.com/WordPress/wordpress-playground/issues/1655),
so there is no need to fix that now.

## Testing Instructions (or ideally a Blueprint)

- Open a Playground preview locally
- Switch to site storage
- Confirm that all toolbar buttons have the same style.
---
 .../open-site-manager-button/index.tsx         | 18 ++++++++++++------
 .../open-site-manager-button/style.module.css  |  8 ++------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/playground/website/src/components/open-site-manager-button/index.tsx b/packages/playground/website/src/components/open-site-manager-button/index.tsx
index 99b1c5d24f..f922763677 100644
--- a/packages/playground/website/src/components/open-site-manager-button/index.tsx
+++ b/packages/playground/website/src/components/open-site-manager-button/index.tsx
@@ -1,6 +1,7 @@
 import css from './style.module.css';
 
-import { __experimentalNavigatorButton as NavigatorButton } from '@wordpress/components';
+import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
+import Button from '../button';
 
 function SiteManagerIcon() {
 	return (
@@ -22,13 +23,18 @@ function SiteManagerIcon() {
 }
 
 export function OpenSiteManagerButton() {
+	const { goTo } = useNavigator();
+	const onClick = () => {
+		goTo('/manager');
+	};
 	return (
-		<NavigatorButton
-			path="/manager"
+		<Button
+			variant="browser-chrome"
 			aria-label="Open Site Manager"
 			className={css.openSiteManagerButton}
-			iconSize={14}
-			icon={<SiteManagerIcon />}
-		></NavigatorButton>
+			onClick={onClick}
+		>
+			<SiteManagerIcon />
+		</Button>
 	);
 }
diff --git a/packages/playground/website/src/components/open-site-manager-button/style.module.css b/packages/playground/website/src/components/open-site-manager-button/style.module.css
index f61a3974e3..94c84dd084 100644
--- a/packages/playground/website/src/components/open-site-manager-button/style.module.css
+++ b/packages/playground/website/src/components/open-site-manager-button/style.module.css
@@ -1,7 +1,3 @@
-/* TODO: remove these styles when the new toolbar is implemented. */
-.open-site-manager-button {
-	background-color: rgb(107, 107, 107);
-	border-radius: 6px;
-	height: 26px;
-	padding: 0px 15px;
+.open-site-manager-button:global(> svg) {
+	margin-top: 4px;
 }