feat: consume theme provided by Page theme provider

plugins/gcp-projects/src/components/NewProjectPage/NewProjectPage.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { customPageTheme } from '@backstage/theme';
+import { BackstageTheme } from '@backstage/theme';
 import {
   Content,
   ContentHeader,
@@ -27,7 +27,7 @@ import {
   StructuredMetadataTable,
   SupportButton,
 } from '@backstage/core';
-import { Button, Grid, TextField } from '@material-ui/core';
+import { Button, Grid, TextField, useTheme } from '@material-ui/core';
 import React, { useState } from 'react';
 
 export const Project = () => {
@@ -112,8 +112,14 @@ const labels = (
 );
 
 export const NewProjectPage = () => {
+  const backstageTheme = useTheme<BackstageTheme>();
+
   return (
-    <Page pageTheme={customPageTheme.pageTheme.service}>
+    <Page
+      theme={backstageTheme.getPageTheme({
+        themeId: 'service',
+      })}
+    >
       <Header title="New GCP Project" type="tool">
         {labels}
       </Header>

plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { customPageTheme } from '@backstage/theme';
+import { BackstageTheme } from '@backstage/theme';
 import {
   Content,
   ContentHeader,
@@ -36,6 +36,7 @@ import {
   TableRow,
   Theme,
   Typography,
+  useTheme,
 } from '@material-ui/core';
 import React from 'react';
 import { useAsync } from 'react-use';
@@ -147,8 +148,13 @@ const labels = (
 );
 
 export const ProjectDetailsPage = () => {
+  const backstageTheme = useTheme<BackstageTheme>();
   return (
-    <Page pageTheme={customPageTheme.pageTheme.service}>
+    <Page
+      theme={backstageTheme.getPageTheme({
+        themeId: 'service',
+      })}
+    >
       <Header title="GCP Project Details" type="other">
         {labels}
       </Header>

plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx

@@ -15,7 +15,7 @@
  */
 
 //  NEEDS WORK
-import { customPageTheme } from '@backstage/theme';
+import { BackstageTheme } from '@backstage/theme';
 import {
   Content,
   ContentHeader,
@@ -38,6 +38,7 @@ import {
   TableRow,
   Tooltip,
   Typography,
+  useTheme,
 } from '@material-ui/core';
 import React from 'react';
 import { useAsync } from 'react-use';
@@ -134,8 +135,14 @@ const PageContents = () => {
 };
 
 export const ProjectListPage = () => {
+  const backstageTheme = useTheme<BackstageTheme>();
+
   return (
-    <Page pageTheme={customPageTheme.pageTheme.service}>
+    <Page
+      theme={backstageTheme.getPageTheme({
+        themeId: 'service',
+      })}
+    >
       <Header title="GCP Projects" type="tool">
         {labels}
       </Header>