Addressed review comments:

Signed-off-by: Yi Cai <yicai@redhat.com>
backstage · Oct 23, 2024 · d5e5c1e · d5e5c1e
1 parent 0a60dac
commit d5e5c1e
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 28 deletions.
diff --git a/workspaces/topology/packages/app/src/App.tsx b/workspaces/topology/packages/app/src/App.tsx
@@ -40,8 +40,6 @@ import { apis } from './apis';
 import { entityPage } from './components/catalog/EntityPage';
 import { searchPage } from './components/search/SearchPage';
 import { Root } from './components/Root';
-// import { getThemes } from '@redhat-developer/red-hat-developer-hub-theme';
-import { StyledEngineProvider } from '@mui/material/styles';
 
 import {
   AlertDisplay,
@@ -53,6 +51,10 @@ import { AppRouter, FlatRoutes } from '@backstage/core-app-api';
 import { CatalogGraphPage } from '@backstage/plugin-catalog-graph';
 import { RequirePermission } from '@backstage/plugin-permission-react';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';
+import {
+  UnifiedThemeProvider,
+  themes as builtinThemes,
+} from '@backstage/theme';
 
 const app = createApp({
   apis,
@@ -76,7 +78,24 @@ const app = createApp({
   components: {
     SignInPage: props => <SignInPage {...props} auto providers={['guest']} />,
   },
-  // themes: getThemes(),
+  themes: [
+    {
+      Provider: ({ children }) => (
+        <UnifiedThemeProvider theme={builtinThemes.light} children={children} />
+      ),
+      id: 'light',
+      title: 'Backstage Light',
+      variant: 'light',
+    },
+    {
+      Provider: ({ children }) => (
+        <UnifiedThemeProvider theme={builtinThemes.dark} children={children} />
+      ),
+      id: 'dark',
+      title: 'Backstage Dark',
+      variant: 'dark',
+    },
+  ],
 });
 
 const routes = (
@@ -120,10 +139,8 @@ export default app.createRoot(
   <>
     <AlertDisplay />
     <OAuthRequestDialog />
-    <StyledEngineProvider injectFirst>
-      <AppRouter>
-        <Root>{routes}</Root>
-      </AppRouter>
-    </StyledEngineProvider>
+    <AppRouter>
+      <Root>{routes}</Root>
+    </AppRouter>
   </>,
 );
diff --git a/workspaces/topology/packages/app/src/components/Root/Root.tsx b/workspaces/topology/packages/app/src/components/Root/Root.tsx
@@ -44,7 +44,6 @@ import { MyGroupsSidebarItem } from '@backstage/plugin-org';
 import GroupIcon from '@mui/icons-material/People';
 
 import { ThemeProvider, useTheme } from '@mui/material/styles';
-import { IconComponent } from '@backstage/core-plugin-api';
 
 const useSidebarLogoStyles = makeStyles({
   root: {
@@ -87,28 +86,16 @@ export const Root = ({ children }: PropsWithChildren<{}>) => {
           <SidebarDivider />
           <SidebarGroup label="Menu" icon={<MenuIcon />}>
             {/* Global nav, not org-specific */}
-            <SidebarItem
-              icon={HomeIcon as IconComponent}
-              to="catalog"
-              text="Home"
-            />
+            <SidebarItem icon={HomeIcon} to="catalog" text="Home" />
             <MyGroupsSidebarItem
               singularTitle="My Group"
               pluralTitle="My Groups"
-              icon={GroupIcon as IconComponent}
-            />
-            <SidebarItem
-              icon={ExtensionIcon as IconComponent}
-              to="api-docs"
-              text="APIs"
-            />
-            <SidebarItem
-              icon={LibraryBooks as IconComponent}
-              to="docs"
-              text="Docs"
+              icon={GroupIcon}
             />
+            <SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
+            <SidebarItem icon={LibraryBooks} to="docs" text="Docs" />
             <SidebarItem
-              icon={CreateComponentIcon as IconComponent}
+              icon={CreateComponentIcon}
               to="create"
               text="Create..."
             />

diff --git a/workspaces/topology/packages/app/src/components/catalog/EntityPage.tsx b/workspaces/topology/packages/app/src/components/catalog/EntityPage.tsx
@@ -15,7 +15,7 @@
  */
 import React from 'react';
 import Button from '@mui/material/Button';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid';
 
 import {
   EntityApiDefinitionCard,

diff --git a/workspaces/topology/packages/app/src/components/search/SearchPage.tsx b/workspaces/topology/packages/app/src/components/search/SearchPage.tsx
@@ -16,7 +16,7 @@
 import React from 'react';
 import { Theme } from '@mui/material/styles';
 import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid';
 import { makeStyles } from '@mui/styles';
 
 import { CatalogSearchResultListItem } from '@backstage/plugin-catalog';