Restore the branding UI elements

Author: adamziel

packages/playground/components/src/icons.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export const playgroundLogo = (props?: React.SVGProps<SVGSVGElement>) => {
+export const PlaygroundLogo = (props?: React.SVGProps<SVGSVGElement>) => {
 	return (
 		<svg
 			width="32"

packages/playground/website/src/components/site-manager/sidebar/index.tsx

@@ -14,14 +14,17 @@ import {
 	DropdownMenu,
 } from '@wordpress/components';
 import { moreVertical, page } from '@wordpress/icons';
-import { ClockIcon, WordPressIcon } from '@wp-playground/components';
+import {
+	PlaygroundLogo,
+	ClockIcon,
+	WordPressIcon,
+} from '@wp-playground/components';
 import {
 	setActiveSite,
 	useActiveSite,
 	useAppDispatch,
 	useAppSelector,
 } from '../../../lib/state/redux/store';
-import { SiteLogo } from '../../../lib/site-metadata';
 import {
 	selectSortedSites,
 	selectTemporarySite,
@@ -100,8 +103,7 @@ export function Sidebar({
 			>
 				<h1 className="sr-only">WordPress Playground</h1>
 				<div className={css.sidebarHeader}>
-					{/* Remove Playground logo because branding isn't finalized. */}
-					{/* <Logo className={css.sidebarLogoButton} /> */}
+					<PlaygroundLogo className={css.sidebarLogo} />
 				</div>
 				<DropdownMenu
 					className={css.componentsDropdown}

packages/playground/website/src/components/site-manager/sidebar/style.module.css

@@ -77,8 +77,7 @@
 	flex-shrink: 0;
 }
 
-.sidebar-logo-button {
-	cursor: pointer;
+.sidebar-logo {
 	border: none;
 	background: none;
 	margin: 0;

packages/playground/website/src/components/site-manager/style.module.css

@@ -4,7 +4,7 @@
 	padding: var(--site-manager-border-width);
 	background-color: var(--site-manager-background-color);
 	/* Remove Playground background graphic because branding isn't finalized. */
-	/* background-image: url(../../../public/site-manager-background.svg); */
+	background-image: url(../../../public/site-manager-background.svg);
 	background-position: bottom left;
 	background-repeat: no-repeat;
 	width: 100%;