From fe47cb9f070aa776b947ec453b437e727fbc74d3 Mon Sep 17 00:00:00 2001
From: Marvin9 <marvinduff97@gmail.com>
Date: Thu, 15 Oct 2020 09:37:13 +0530
Subject: [PATCH] chore: update example component

---
 .../tutorials/quickstart-app-plugin/ExampleComponent.md    | 7 ++-----
 .../components/ExampleComponent/ExampleComponent.tsx.hbs   | 3 +--
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/contrib/docs/tutorials/quickstart-app-plugin/ExampleComponent.md b/contrib/docs/tutorials/quickstart-app-plugin/ExampleComponent.md
index 83b18bf4c2..5d633544e3 100644
--- a/contrib/docs/tutorials/quickstart-app-plugin/ExampleComponent.md
+++ b/contrib/docs/tutorials/quickstart-app-plugin/ExampleComponent.md
@@ -3,14 +3,12 @@
 ExampleComponent.tsx reference
 
 ```tsx
-import { BackstageTheme } from '@backstage/theme';
 import React, { FC } from 'react';
-import { Typography, Grid, useTheme } from '@material-ui/core';
+import { Typography, Grid } from '@material-ui/core';
 import {
   InfoCard,
   Header,
   Page,
-  pageTheme,
   Content,
   ContentHeader,
   HeaderLabel,
@@ -21,13 +19,12 @@ import { useApi } from '@backstage/core-api';
 import ExampleFetchComponent from '../ExampleFetchComponent';
 
 const ExampleComponent: FC<{}> = () => {
-  const backstageTheme = useTheme<BackstageTheme>();
   const identityApi = useApi(identityApiRef);
   const userId = identityApi.getUserId();
   const profile = identityApi.getProfile();
 
   return (
-    <Page theme={backstageTheme.getPageTheme({ themeId: 'tool' })}>
+    <Page themeId="tool">
       <Header
         title="Welcome to github-playground!"
         subtitle="Optional subtitle"
diff --git a/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs b/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs
index d4be6d87ac..616f2cd2fc 100644
--- a/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs
+++ b/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs
@@ -1,4 +1,3 @@
-import { pageTheme } from '@backstage/theme';
 import React, { FC } from 'react';
 import { Typography, Grid } from '@material-ui/core';
 import {
@@ -14,7 +13,7 @@ import ExampleFetchComponent from '../ExampleFetchComponent';
 
 const ExampleComponent: FC<{}> = () => {
   return (
-    <Page theme={pageTheme.tool}>
+    <Page themeId="tool">
       <Header title="Welcome to {{ id }}!" subtitle="Optional subtitle">
         <HeaderLabel label="Owner" value="Team X" />
         <HeaderLabel label="Lifecycle" value="Alpha" />