Merged PR 338049: [React Wrapper]: Update Footer for demo app to match Vue wrapper

Updating the footer to match with Vue wrapper.

Current footer:
![image (3).png](https://dev.azure.com/powerbi/4c7b5adb-c2d0-4f18-b23c-edc4ac30f4e1/_apis/git/repositories/bba389a3-7c99-498f-82a4-b903a33a7997/pullRequests/338049/attachments/image%20%283%29.png)

Footer after completing the PR:
![image.png](https://dev.azure.com/powerbi/4c7b5adb-c2d0-4f18-b23c-edc4ac30f4e1/_apis/git/repositories/bba389a3-7c99-498f-82a4-b903a33a7997/pullRequests/338049/attachments/image.png)

![image (2).png](https://dev.azure.com/powerbi/4c7b5adb-c2d0-4f18-b23c-edc4ac30f4e1/_apis/git/repositories/bba389a3-7c99-498f-82a4-b903a33a7997/pullRequests/338049/attachments/image%20%282%29.png)

Related work items: #973894, #982636

demo/DemoApp.css

@@ -51,29 +51,27 @@ body {
 }
 
 .footer {
-	background: #eef3f8 0 0 no-repeat padding-box;
-	bottom: 0;
-	height: 39px;
-	opacity: 1;
-	position: absolute;
+	align-items: center;
+	background: #f7f8fa 0 0 no-repeat padding-box;
+	display: flex;
+	font: 400 16px/21px 'Segoe UI';
+	height: 42px;
+	justify-content: center;
 	width: 100%;
 }
 
-.footer-text {
-	font: Regular 16px/21px Segoe UI;
-	height: 21px;
-	letter-spacing: 0;
-	margin-top: 9px;
-	opacity: 1;
-	position: relative;
-	text-align: center;
-	width: 100%;
+.footer * {
+	padding: 0 3px;
 }
 
-.footer-text > a {
-	color: #278ce2;
-	font: Regular 16px/21px Segoe UI;
-	letter-spacing: 0;
+.footer-icon {
+	border-radius: 50%;
+	height: 22px;
+	vertical-align: middle;
+}
+
+.footer a {
+	color: #3a3a3a;
 	text-decoration: underline;
 }
 

demo/DemoApp.tsx

@@ -229,10 +229,13 @@ function DemoApp (): JSX.Element {
 
 	const footer =
 		<div className = "footer">
-			<div className = "footer-text">
-				GitHub: &nbsp;
-				<a href="https://github.com/microsoft/PowerBI-client-react">https://github.com/microsoft/PowerBI-client-react</a>
-			</div>
+			<p>This demo is powered by Power BI Embedded Analytics</p>
+			<label className = "separator-pipe">|</label>
+			<img title = "Power-BI" alt = "PowerBI_Icon" className = "footer-icon" src = "./assets/PowerBI_Icon.png" />
+			<p>Explore our<a href = "https://aka.ms/pbijs/" target = "_blank" rel = "noreferrer noopener">Playground</a></p>
+			<label className = "separator-pipe">|</label>
+			<img title = "GitHub" alt = "GitHub_Icon" className = "footer-icon" src = "./assets/GitHub_Icon.png" />
+			<p>Find the<a href = "https://github.com/microsoft/PowerBI-client-react" target = "_blank" rel = "noreferrer noopener">source code</a></p>
 		</div>;
 
 	return (