chore: refactor

plugins/techdocs/src/reader/components/TechDocsHome.tsx

@@ -14,11 +14,10 @@
  * limitations under the License.
  */
 
-import { BackstageTheme } from '@backstage/theme';
 import React from 'react';
 import { useAsync } from 'react-use';
 import { useNavigate, generatePath } from 'react-router-dom';
-import { Grid, useTheme } from '@material-ui/core';
+import { Grid } from '@material-ui/core';
 import {
   ItemCard,
   Progress,
@@ -31,7 +30,6 @@ import { catalogApiRef } from '@backstage/plugin-catalog';
 import { rootDocsRouteRef } from '../../plugin';
 
 export const TechDocsHome = () => {
-  const backstageTheme = useTheme<BackstageTheme>();
   const catalogApi = useApi(catalogApiRef);
   const navigate = useNavigate();
 
@@ -44,11 +42,7 @@ export const TechDocsHome = () => {
 
   if (loading) {
     return (
-      <Page
-        theme={backstageTheme.getPageTheme({
-          themeId: 'documentation',
-        })}
-      >
+      <Page themeId="documentation">
         <Header
           title="Documentation"
           subtitle="Documentation available in Backstage"
@@ -62,11 +56,7 @@ export const TechDocsHome = () => {
 
   if (error) {
     return (
-      <Page
-        theme={backstageTheme.getPageTheme({
-          themeId: 'documentation',
-        })}
-      >
+      <Page themeId="documentation">
         <Header
           title="Documentation"
           subtitle="Documentation available in Backstage"
@@ -79,11 +69,7 @@ export const TechDocsHome = () => {
   }
 
   return (
-    <Page
-      theme={backstageTheme.getPageTheme({
-        themeId: 'documentation',
-      })}
-    >
+    <Page themeId="documentation">
       <Header
         title="Documentation"
         subtitle="Documentation available in Backstage"

plugins/techdocs/src/reader/components/TechDocsPage.tsx

@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-import { BackstageTheme } from '@backstage/theme';
-import { useTheme } from '@material-ui/core';
 import React, { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { Content, Page, useApi } from '@backstage/core';
@@ -25,7 +23,6 @@ import { TechDocsPageHeader } from './TechDocsPageHeader';
 import { techdocsApiRef } from '../../api';
 
 export const TechDocsPage = () => {
-  const backstageTheme = useTheme<BackstageTheme>();
   const [documentReady, setDocumentReady] = useState<boolean>(false);
   const { namespace, kind, name } = useParams();
 
@@ -48,11 +45,7 @@ export const TechDocsPage = () => {
   };
 
   return (
-    <Page
-      theme={backstageTheme.getPageTheme({
-        themeId: 'documentation',
-      })}
-    >
+    <Page themeId="documentation">
       <TechDocsPageHeader
         metadataRequest={{
           mkdocs: mkdocsMetadataRequest,