[Website] Refresh button icons next to the browser bar (#2807)

## Motivation for the change, related issues

Refreshes the buttons in the Playground UI.

### Before

<img width="1392" height="758" alt="CleanShot 2025-10-22 at 19 24 41@2x"
src="https://github.com/user-attachments/assets/7850323b-1237-436c-86bf-6b8ceddc3202"
/>


### After

<img width="1380" height="1036" alt="CleanShot 2025-10-22 at 19 23
41@2x"
src="https://github.com/user-attachments/assets/d7c621a2-2581-4578-80da-8b33195e5ab5"
/>

cc @fellyph @akirk

Author: adamziel

packages/playground/components/src/icons.tsx

@@ -144,21 +144,29 @@ export function getLogoDataURL(logo: { mime: string; data: string }): string {
 	return `data:${logo.mime};base64,${logo.data}`;
 }
 
-export function SiteManagerIcon() {
+export function SiteManagerIcon({ size = 24 }: { size?: number }) {
 	return (
 		<svg
-			width="14"
-			height="14"
-			viewBox="0 0 14 14"
-			fill="none"
+			width={size}
+			height={size}
+			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			stroke="currentColor"
+			strokeWidth="2"
+			strokeLinecap="round"
+			strokeLinejoin="round"
 		>
-			<path
-				fillRule="evenodd"
-				clipRule="evenodd"
-				d="M1.99967 1.58301H4.49967C4.72979 1.58301 4.91634 1.76956 4.91634 1.99967V4.49967C4.91634 4.72979 4.72979 4.91634 4.49967 4.91634H1.99967C1.76956 4.91634 1.58301 4.72979 1.58301 4.49967V1.99967C1.58301 1.76956 1.76956 1.58301 1.99967 1.58301ZM0.333008 1.99967C0.333008 1.0792 1.0792 0.333008 1.99967 0.333008H4.49967C5.42015 0.333008 6.16634 1.0792 6.16634 1.99967V4.49967C6.16634 5.42015 5.42015 6.16634 4.49967 6.16634H1.99967C1.0792 6.16634 0.333008 5.42015 0.333008 4.49967V1.99967ZM9.49967 1.58301H11.9997C12.2298 1.58301 12.4163 1.76956 12.4163 1.99967V4.49967C12.4163 4.72979 12.2298 4.91634 11.9997 4.91634H9.49967C9.26956 4.91634 9.08301 4.72979 9.08301 4.49967V1.99967C9.08301 1.76956 9.26956 1.58301 9.49967 1.58301ZM7.83301 1.99967C7.83301 1.0792 8.5792 0.333008 9.49967 0.333008H11.9997C12.9201 0.333008 13.6663 1.0792 13.6663 1.99967V4.49967C13.6663 5.42015 12.9201 6.16634 11.9997 6.16634H9.49967C8.5792 6.16634 7.83301 5.42015 7.83301 4.49967V1.99967ZM11.9997 9.08301H9.49967C9.26956 9.08301 9.08301 9.26956 9.08301 9.49967V11.9997C9.08301 12.2298 9.26956 12.4163 9.49967 12.4163H11.9997C12.2298 12.4163 12.4163 12.2298 12.4163 11.9997V9.49967C12.4163 9.26956 12.2298 9.08301 11.9997 9.08301ZM9.49967 7.83301C8.5792 7.83301 7.83301 8.5792 7.83301 9.49967V11.9997C7.83301 12.9201 8.5792 13.6663 9.49967 13.6663H11.9997C12.9201 13.6663 13.6663 12.9201 13.6663 11.9997V9.49967C13.6663 8.5792 12.9201 7.83301 11.9997 7.83301H9.49967ZM1.99967 9.08301H4.49967C4.72979 9.08301 4.91634 9.26956 4.91634 9.49967V11.9997C4.91634 12.2298 4.72979 12.4163 4.49967 12.4163H1.99967C1.76956 12.4163 1.58301 12.2298 1.58301 11.9997V9.49967C1.58301 9.26956 1.76956 9.08301 1.99967 9.08301ZM0.333008 9.49967C0.333008 8.5792 1.0792 7.83301 1.99967 7.83301H4.49967C5.42015 7.83301 6.16634 8.5792 6.16634 9.49967V11.9997C6.16634 12.9201 5.42015 13.6663 4.49967 13.6663H1.99967C1.0792 13.6663 0.333008 12.9201 0.333008 11.9997V9.49967Z"
-				fill="white"
-			/>
+			<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+			<rect
+				x="3"
+				y="3"
+				width="6"
+				height="18"
+				rx="2"
+				ry="2"
+				fill="currentColor"
+			></rect>
 		</svg>
 	);
 }

packages/playground/website/src/components/address-bar/style.module.css

@@ -2,11 +2,13 @@
 	position: relative;
 	display: flex;
 	transition: opacity 0.5s ease;
+	width: 100%;
 }
 
 .input-container {
 	display: flex;
 	width: 100%;
+	align-items: center;
 }
 
 .submit {

packages/playground/website/src/components/browser-chrome/index.tsx

@@ -61,12 +61,11 @@ export default function BrowserChrome({
 						<Button
 							variant="browser-chrome"
 							aria-label="Open Site Manager"
-							className={css.openSiteManagerButton}
 							onClick={() => {
 								dispatch(setSiteManagerOpen(true));
 							}}
 						>
-							<SiteManagerIcon />
+							<SiteManagerIcon size={26} />
 						</Button>
 					</div>
 
@@ -94,7 +93,7 @@ export default function BrowserChrome({
 										display: 'flex',
 									}}
 								>
-									<Icon icon={cog} />
+									<Icon icon={cog} size={28} />
 								</Button>
 								{isModalOpen && (
 									<Modal
@@ -126,7 +125,7 @@ export default function BrowserChrome({
 											display: 'flex',
 										}}
 									>
-										<Icon icon={cog} />
+										<Icon icon={cog} size={28} />
 									</Button>
 								)}
 								renderContent={({ onClose }) => (

packages/playground/website/src/components/browser-chrome/style.module.css

@@ -74,6 +74,7 @@ body.is-embedded .fake-window-wrapper {
 }
 
 .address-bar-slot {
+	display: flex;
 	flex-grow: 1;
 	min-width: 200px;
 	width: 100%;

packages/playground/website/src/components/button/style.module.css

@@ -21,9 +21,11 @@
 }
 
 .button.button.button.is-browser-chrome {
-	min-height: 26px;
-	min-width: 26px;
-	padding: 0px 15px;
+	display: flex;
+	align-items: center;
+	min-height: 40px;
+	min-width: 40px;
+	background: transparent;
 }
 
 .button.button.button:not(.is-browser-chrome) {