use cnoe theme

Signed-off-by: Manabu McCloskey <manabu.mccloskey@gmail.com>

packages/app/src/App.tsx

@@ -32,8 +32,6 @@ import { createApp } from '@backstage/app-defaults';
 import { AppRouter, FlatRoutes } from '@backstage/core-app-api';
 import { CatalogGraphPage } from '@backstage/plugin-catalog-graph';
 import { RequirePermission } from '@backstage/plugin-permission-react';
-import { ThemeProvider } from '@material-ui/core/styles';
-import CssBaseline from '@material-ui/core/CssBaseline';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';
 import LightIcon from '@material-ui/icons/WbSunny';
 import {
@@ -44,6 +42,10 @@ import {
 import {configApiRef, useApi} from "@backstage/core-plugin-api";
 import { ArgoWorkflowsPage } from '@internal/plugin-argo-workflows';
 import { ApacheSparkPage } from '@internal/plugin-apache-spark';
+import {
+  UnifiedThemeProvider
+} from "@backstage/theme";
+
 
 const app = createApp({
   apis,
@@ -66,7 +68,6 @@ const app = createApp({
       );
     },
   },
-
   bindRoutes({ bind }) {
     bind(catalogPlugin.externalRoutes, {
       createComponent: scaffolderPlugin.routes.root,
@@ -91,9 +92,7 @@ const app = createApp({
       variant: 'light',
       icon: <LightIcon />,
       Provider: ({ children }) => (
-        <ThemeProvider theme={cnoeLightTheme}>
-          <CssBaseline>{children}</CssBaseline>
-        </ThemeProvider>
+        <UnifiedThemeProvider theme={cnoeLightTheme} children={children} />
       ),
     },
     {
@@ -102,9 +101,7 @@ const app = createApp({
       variant: 'dark',
       icon: <LightIcon />,
       Provider: ({ children }) => (
-        <ThemeProvider theme={cnoeDarkTheme}>
-          <CssBaseline>{children}</CssBaseline>
-        </ThemeProvider>
+        <UnifiedThemeProvider theme={cnoeDarkTheme} children={children} />
       ),
     },
   ],
@@ -112,7 +109,7 @@ const app = createApp({
 
 const routes = (
   <FlatRoutes>
-    <Route path="/" element={<Navigate to="catalog" />} />
+    <Route path="/" element={<Navigate to="home" />} />
     <Route path="/home" element={<CNOEHomepage />} />
     <Route path="/catalog" element={<CatalogIndexPage />} />
     <Route
@@ -163,3 +160,4 @@ export default app.createRoot(
     </AppRouter>
   </>,
 );
+

packages/app/src/components/Root/Root.tsx

@@ -5,8 +5,7 @@ import ExtensionIcon from '@material-ui/icons/Extension';
 import MapIcon from '@material-ui/icons/MyLocation';
 import LibraryBooks from '@material-ui/icons/LibraryBooks';
 import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
-import LogoFull from './LogoFull';
-import LogoIcon from './LogoIcon';
+import {LogoFull, LogoIcon} from '@internal/plugin-cnoe-ui';
 import {
   Settings as SidebarSettings,
   UserSettingsSignInAvatar,

plugins/cnoe-ui/src/components/themes/dark-theme.ts

@@ -1,15 +1,23 @@
-import {createTheme, darkTheme, genPageTheme, shapes} from '@backstage/theme';
 
-export const cnoeDarkTheme = createTheme({
-  palette: {
-    ...darkTheme.palette,
-    primary: {
-      main: '#25a0c2',
+import {
+  genPageTheme,
+  shapes,
+  createUnifiedTheme,
+  createBaseThemeOptions, palettes,
+} from '@backstage/theme';
+
+export const cnoeDarkTheme = createUnifiedTheme({
+  ...createBaseThemeOptions({
+    palette: {
+      ...palettes.dark,
+      primary: {
+        main: '#25a0c2',
+      },
+      secondary: {
+        main: '#00568c',
+      },
     },
-    secondary: {
-      main: '#00568c',
-    },
-  },
+  }),
   defaultPageTheme: 'home',
   pageTheme: {
     home: genPageTheme({colors: ['#25a0c2', '#00568c'], shape: shapes.wave}),
@@ -35,4 +43,3 @@ export const cnoeDarkTheme = createTheme({
     apis: genPageTheme({colors: ['#25a0c2', '#00568c'], shape: shapes.wave}),
   },
 });
-

plugins/cnoe-ui/src/components/themes/light-theme.ts

@@ -1,15 +1,22 @@
-import {createTheme, lightTheme, genPageTheme, shapes} from '@backstage/theme';
+import {
+  genPageTheme,
+  shapes,
+  createUnifiedTheme,
+  createBaseThemeOptions, palettes,
+} from '@backstage/theme';
 
-export const cnoeLightTheme = createTheme({
-  palette: {
-    ...lightTheme.palette,
-    primary: {
-      main: '#00568c',
+export const cnoeLightTheme = createUnifiedTheme({
+  ...createBaseThemeOptions({
+    palette: {
+      ...palettes.light,
+      primary: {
+        main: '#00568c',
+      },
+      secondary: {
+        main: '#00adee',
+      },
     },
-    secondary: {
-      main: '#00adee',
-    },
-  },
+  }),
   defaultPageTheme: 'home',
   pageTheme: {
     home: genPageTheme({colors: ['#00568c', '#00adee'], shape: shapes.wave}),