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](#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.

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>
  );
 }

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;
 }