fix: conflicts

plugins/scaffolder/package.json

@@ -28,8 +28,8 @@
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.45",
-    "@rjsf/core": "^2.1.0",
-    "@rjsf/material-ui": "^2.1.0",
+    "@rjsf/core": "^2.4.0",
+    "@rjsf/material-ui": "^2.4.0",
     "classnames": "^2.2.6",
     "moment": "^2.26.0",
     "react": "^16.13.1",
@@ -49,9 +49,8 @@
     "@testing-library/user-event": "^12.0.7",
     "@types/jest": "^26.0.7",
     "@types/node": "^12.0.0",
-    "jest-fetch-mock": "^3.0.3",
-    "msw": "^0.20.5",
-    "node-fetch": "^2.6.1"
+    "msw": "^0.21.2",
+    "cross-fetch": "^3.0.6"
   },
   "files": [
     "dist"

plugins/scaffolder/src/components/JobStage/JobStage.tsx

@@ -125,7 +125,9 @@ export const JobStage = ({ endedAt, startedAt, name, log, status }: Props) => {
       </AccordionSummary>
       <AccordionDetails className={classes.accordionDetails}>
         {log.length === 0 ? (
-          <Box px={4}>No logs available for this step</Box>
+          <Box px={9} pb={2} width="100%">
+            No logs available for this step
+          </Box>
         ) : (
           <Suspense fallback={<LinearProgress />}>
             <div style={{ height: '20vh', width: '100%' }}>

plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx

@@ -22,7 +22,6 @@ import {
   Header,
   Lifecycle,
   Page,
-  pageTheme,
   Progress,
   SupportButton,
   useApi,
@@ -66,7 +65,7 @@ export const ScaffolderPage = () => {
   }, [error, errorApi]);
 
   return (
-    <Page theme={pageTheme.home}>
+    <Page themeId="home">
       <Header
         pageTitleOverride="Create a New Component"
         title={

plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx

@@ -13,8 +13,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Button, pageTheme } from '@backstage/core';
-import { Card, Chip, makeStyles, Typography } from '@material-ui/core';
+import { Button } from '@backstage/core';
+import { BackstageTheme, pageTheme } from '@backstage/theme';
+import {
+  Card,
+  Chip,
+  makeStyles,
+  Typography,
+  useTheme,
+} from '@material-ui/core';
 import React from 'react';
 import { generatePath } from 'react-router-dom';
 import { templateRoute } from '../../routes';
@@ -56,7 +63,10 @@ export const TemplateCard = ({
   type,
   name,
 }: TemplateCardProps) => {
-  const theme = pageTheme[type] ?? pageTheme.other;
+  const backstageTheme = useTheme<BackstageTheme>();
+
+  const themeId = pageTheme[type] ? type : 'other';
+  const theme = backstageTheme.getPageTheme({ themeId });
   const classes = useStyles({ backgroundImage: theme.backgroundImage });
   const href = generatePath(templateRoute.path, { templateName: name });
 

plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx

@@ -22,7 +22,6 @@ import {
   Lifecycle,
   Page,
   useApi,
-  pageTheme,
 } from '@backstage/core';
 import { catalogApiRef } from '@backstage/plugin-catalog';
 import { LinearProgress } from '@material-ui/core';
@@ -145,7 +144,7 @@ export const TemplatePage = () => {
   }
 
   return (
-    <Page theme={pageTheme.home}>
+    <Page themeId="home">
       <Header
         pageTitleOverride="Create a new component"
         title={

plugins/scaffolder/src/setupTests.ts

@@ -15,5 +15,3 @@
  */
 
 import '@testing-library/jest-dom';
-
-require('jest-fetch-mock').enableMocks();