diff --git a/contrib/docs/tutorials/quickstart-app-plugin/ExampleComponent.md b/contrib/docs/tutorials/quickstart-app-plugin/ExampleComponent.md index 855608c8b1..5d633544e3 100644 --- a/contrib/docs/tutorials/quickstart-app-plugin/ExampleComponent.md +++ b/contrib/docs/tutorials/quickstart-app-plugin/ExampleComponent.md @@ -9,7 +9,6 @@ import { InfoCard, Header, Page, - pageTheme, Content, ContentHeader, HeaderLabel, @@ -25,7 +24,7 @@ const ExampleComponent: FC<{}> = () => { const profile = identityApi.getProfile(); return ( - +
= () => ( - +
@@ -37,5 +36,5 @@ const ExampleComponent: FC<{}> = () => ( ); - + export default ExampleComponent; diff --git a/packages/core/src/layout/Header/Header.stories.tsx b/packages/core/src/layout/Header/Header.stories.tsx index 91045d4bb4..62e6e3e52c 100644 --- a/packages/core/src/layout/Header/Header.stories.tsx +++ b/packages/core/src/layout/Header/Header.stories.tsx @@ -16,7 +16,7 @@ import React from 'react'; import { Header } from '.'; import { HeaderLabel } from '../HeaderLabel'; -import { Page, pageTheme } from '../Page'; +import { Page } from '../Page'; export default { title: 'Layout/Header', @@ -32,7 +32,7 @@ const labels = ( ); export const Home = () => ( - +
{labels}
@@ -46,7 +46,7 @@ export const HomeWithSubtitle = () => ( ); export const Tool = () => ( - +
{labels}
@@ -54,7 +54,7 @@ export const Tool = () => ( ); export const Service = () => ( - +
{labels}
@@ -62,7 +62,7 @@ export const Service = () => ( ); export const Website = () => ( - +
{labels}
@@ -70,7 +70,7 @@ export const Website = () => ( ); export const Library = () => ( - +
{labels}
@@ -78,7 +78,7 @@ export const Library = () => ( ); export const App = () => ( - +
{labels}
@@ -86,7 +86,7 @@ export const App = () => ( ); export const Documentation = () => ( - +
{labels}
@@ -94,7 +94,7 @@ export const Documentation = () => ( ); export const Other = () => ( - +
{labels}
diff --git a/packages/core/src/layout/Header/Header.tsx b/packages/core/src/layout/Header/Header.tsx index 3bd95d0ef3..ec4a3db6e2 100644 --- a/packages/core/src/layout/Header/Header.tsx +++ b/packages/core/src/layout/Header/Header.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { ReactNode, CSSProperties, FC, useContext } from 'react'; +import React, { ReactNode, CSSProperties, FC } from 'react'; import { Helmet } from 'react-helmet'; import { Link, @@ -25,73 +25,70 @@ import { } from '@material-ui/core'; import ChevronRightIcon from '@material-ui/icons/ChevronRight'; import { BackstageTheme } from '@backstage/theme'; -import { PageThemeContext } from '../Page/Page'; -const useStyles = makeStyles( - theme => ({ - header: { - gridArea: 'pageHeader', - padding: theme.spacing(3), - minHeight: 118, - width: '100%', - boxShadow: '0 0 8px 3px rgba(20, 20, 20, 0.3)', - position: 'relative', - zIndex: 100, - display: 'flex', - flexDirection: 'row', - flexWrap: 'wrap', - justifyContent: 'flex-end', - alignItems: 'center', - backgroundImage: props => props.backgroundImage, - backgroundPosition: 'center', - backgroundSize: 'cover', - }, - leftItemsBox: { - flex: '1 1 auto', - }, - rightItemsBox: { - flex: '0 1 auto', - display: 'flex', - flexDirection: 'row', - flexWrap: 'wrap', - alignItems: 'center', - marginRight: theme.spacing(1), - }, - title: { - color: theme.palette.bursts.fontColor, - lineHeight: '1.0em', - wordBreak: 'break-all', - fontSize: 'calc(24px + 6 * ((100vw - 320px) / 680))', - marginBottom: theme.spacing(1), - }, - subtitle: { - color: 'rgba(255, 255, 255, 0.8)', - lineHeight: '1.0em', - }, - type: { - textTransform: 'uppercase', - fontSize: 11, - opacity: 0.8, - marginBottom: theme.spacing(1), - color: theme.palette.bursts.fontColor, - }, - breadcrumb: { - fontSize: 'calc(15px + 1 * ((100vw - 320px) / 680))', - color: theme.palette.bursts.fontColor, - }, - breadcrumbType: { - fontSize: 'inherit', - opacity: 0.7, - marginRight: -theme.spacing(0.3), - marginBottom: theme.spacing(0.3), - }, - breadcrumbTitle: { - fontSize: 'inherit', - marginLeft: -theme.spacing(0.3), - marginBottom: theme.spacing(0.3), - }, - }), -); +const useStyles = makeStyles(theme => ({ + header: { + gridArea: 'pageHeader', + padding: theme.spacing(3), + minHeight: 118, + width: '100%', + boxShadow: '0 0 8px 3px rgba(20, 20, 20, 0.3)', + position: 'relative', + zIndex: 100, + display: 'flex', + flexDirection: 'row', + flexWrap: 'wrap', + justifyContent: 'flex-end', + alignItems: 'center', + backgroundImage: theme.page.backgroundImage, + backgroundPosition: 'center', + backgroundSize: 'cover', + }, + leftItemsBox: { + flex: '1 1 auto', + }, + rightItemsBox: { + flex: '0 1 auto', + display: 'flex', + flexDirection: 'row', + flexWrap: 'wrap', + alignItems: 'center', + marginRight: theme.spacing(1), + }, + title: { + color: theme.palette.bursts.fontColor, + lineHeight: '1.0em', + wordBreak: 'break-all', + fontSize: 'calc(24px + 6 * ((100vw - 320px) / 680))', + marginBottom: theme.spacing(1), + }, + subtitle: { + color: 'rgba(255, 255, 255, 0.8)', + lineHeight: '1.0em', + }, + type: { + textTransform: 'uppercase', + fontSize: 11, + opacity: 0.8, + marginBottom: theme.spacing(1), + color: theme.palette.bursts.fontColor, + }, + breadcrumb: { + fontSize: 'calc(15px + 1 * ((100vw - 320px) / 680))', + color: theme.palette.bursts.fontColor, + }, + breadcrumbType: { + fontSize: 'inherit', + opacity: 0.7, + marginRight: -theme.spacing(0.3), + marginBottom: theme.spacing(0.3), + }, + breadcrumbTitle: { + fontSize: 'inherit', + marginLeft: -theme.spacing(0.3), + marginBottom: theme.spacing(0.3), + }, +})); type HeaderStyles = ReturnType; @@ -200,8 +197,7 @@ export const Header: FC = ({ type, typeLink, }) => { - const theme = useContext(PageThemeContext); - const classes = useStyles({ backgroundImage: theme.backgroundImage }); + const classes = useStyles(); const documentTitle = pageTitleOverride || title; const pageTitle = title || pageTitleOverride; const titleTemplate = `${documentTitle} | %s | Backstage`; diff --git a/packages/core/src/layout/Page/Page.stories.tsx b/packages/core/src/layout/Page/Page.stories.tsx index fd2ddf3153..b3a75c19e9 100644 --- a/packages/core/src/layout/Page/Page.stories.tsx +++ b/packages/core/src/layout/Page/Page.stories.tsx @@ -21,7 +21,6 @@ import { HeaderLabel, ContentHeader, Content, - pageTheme, InfoCard, HeaderTabs, } from '../'; @@ -196,7 +195,7 @@ export const PluginWithData = () => { const [selectedTab, setSelectedTab] = useState(2); return (
- + { export const PluginWithTable = () => { return (
- + diff --git a/packages/core/src/layout/Page/Page.tsx b/packages/core/src/layout/Page/Page.tsx index a5f5e4fd2b..a14f772334 100644 --- a/packages/core/src/layout/Page/Page.tsx +++ b/packages/core/src/layout/Page/Page.tsx @@ -15,10 +15,8 @@ */ import React, { FC } from 'react'; -import { PageTheme, pageTheme } from './PageThemeProvider'; -import { makeStyles } from '@material-ui/core'; - -export const PageThemeContext = React.createContext(pageTheme.home); +import { BackstageTheme } from '@backstage/theme'; +import { makeStyles, ThemeProvider } from '@material-ui/core'; const useStyles = makeStyles(() => ({ root: { @@ -32,14 +30,19 @@ const useStyles = makeStyles(() => ({ })); type Props = { - theme?: PageTheme; + themeId: string; }; -export const Page: FC = ({ theme = pageTheme.home, children }) => { +export const Page: FC = ({ themeId, children }) => { const classes = useStyles(); return ( - + ({ + ...baseTheme, + page: baseTheme.getPageTheme({ themeId }), + })} + >
{children}
- + ); }; diff --git a/packages/core/src/layout/Page/index.ts b/packages/core/src/layout/Page/index.ts index 000a565c83..987aee5cdb 100644 --- a/packages/core/src/layout/Page/index.ts +++ b/packages/core/src/layout/Page/index.ts @@ -15,5 +15,3 @@ */ export { Page } from './Page'; -export { pageTheme } from './PageThemeProvider'; -export type { PageTheme } from './PageThemeProvider'; diff --git a/packages/core/src/layout/SignInPage/SignInPage.tsx b/packages/core/src/layout/SignInPage/SignInPage.tsx index 8a1ff68250..ebc9bf278f 100644 --- a/packages/core/src/layout/SignInPage/SignInPage.tsx +++ b/packages/core/src/layout/SignInPage/SignInPage.tsx @@ -52,7 +52,7 @@ export const SignInPage: FC = ({ } return ( - +
{title && } diff --git a/packages/theme/src/baseTheme.ts b/packages/theme/src/baseTheme.ts index 00a485bb41..b0797c6506 100644 --- a/packages/theme/src/baseTheme.ts +++ b/packages/theme/src/baseTheme.ts @@ -23,6 +23,7 @@ import { BackstageThemeOptions, SimpleThemeOptions, } from './types'; +import { pageTheme as defaultPageThemes } from './pageTheme'; const DEFAULT_FONT_FAMILY = '"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif'; @@ -30,7 +31,16 @@ const DEFAULT_FONT_FAMILY = export function createThemeOptions( options: SimpleThemeOptions, ): BackstageThemeOptions { - const { palette, fontFamily = DEFAULT_FONT_FAMILY } = options; + const { + palette, + fontFamily = DEFAULT_FONT_FAMILY, + defaultPageTheme, + pageTheme = defaultPageThemes, + } = options; + + if (!pageTheme[defaultPageTheme]) { + throw new Error(`${defaultPageTheme} is not defined in pageTheme.`); + } return { palette, @@ -68,6 +78,9 @@ export function createThemeOptions( marginBottom: 10, }, }, + page: pageTheme[defaultPageTheme], + getPageTheme: ({ themeId }) => + pageTheme[themeId] ?? pageTheme[defaultPageTheme], }; } diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts index 862f9b7755..cafad3fc7c 100644 --- a/packages/theme/src/index.ts +++ b/packages/theme/src/index.ts @@ -17,3 +17,4 @@ export * from './themes'; export * from './baseTheme'; export * from './types'; +export * from './pageTheme'; diff --git a/packages/core/src/layout/Page/PageThemeProvider.ts b/packages/theme/src/pageTheme.ts similarity index 92% rename from packages/core/src/layout/Page/PageThemeProvider.ts rename to packages/theme/src/pageTheme.ts index 57411c8786..f86f3a6449 100644 --- a/packages/core/src/layout/Page/PageThemeProvider.ts +++ b/packages/theme/src/pageTheme.ts @@ -13,12 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - -export type PageTheme = { - colors: string[]; - shape: string; - backgroundImage: string; -}; +import { PageTheme } from './types'; /* # How to add a shape @@ -29,7 +24,6 @@ export type PageTheme = { with something like https://npm.runkit.com/mini-svg-data-uri 4. Wrap the output in `url("")` 5. Give it a name and paste it into the `shapes` object below. - */ export const shapes: Record = { wave: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='1368' height='400' fill='none'%3e%3cmask id='a' width='1368' height='401' x='0' y='0' maskUnits='userSpaceOnUse'%3e%3cpath fill='url(%23paint0_linear)' d='M437 116C223 116 112 0 112 0h1256v400c-82 0-225-21-282-109-112-175-436-175-649-175z'/%3e%3cpath fill='url(%23paint1_linear)' d='M1368 400V282C891-29 788 40 711 161 608 324 121 372 0 361v39h1368z'/%3e%3cpath fill='url(%23paint2_linear)' d='M1368 244v156H0V94c92-24 198-46 375 0l135 41c176 51 195 109 858 109z'/%3e%3cpath fill='url(%23paint3_linear)' d='M1252 400h116c-14-7-35-14-116-16-663-14-837-128-1013-258l-85-61C98 28 46 8 0 0v400h1252z'/%3e%3c/mask%3e%3cg mask='url(%23a)'%3e%3cpath fill='white' d='M-172-98h1671v601H-172z'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient id='paint0_linear' x1='602' x2='1093.5' y1='-960.5' y2='272' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint1_linear' x1='482' x2='480' y1='1058.5' y2='70.5' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint2_linear' x1='424' x2='446.1' y1='-587.5' y2='274.6' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint3_linear' x1='587' x2='349' y1='-1120.5' y2='341' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e")`, @@ -49,24 +43,24 @@ export const colorVariants: Record = { pinkSea: ['#C8077A', '#C2297D'], }; -export const pageTheme: Record = { - home: genTheme(colorVariants.teal, shapes.wave), - documentation: genTheme(colorVariants.pinkSea, shapes.wave2), - tool: genTheme(colorVariants.purpleSky, shapes.round), - service: genTheme(colorVariants.marineBlue, shapes.wave), - website: genTheme(colorVariants.veryBlue, shapes.wave), - library: genTheme(colorVariants.rubyRed, shapes.wave), - other: genTheme(colorVariants.darkGrey, shapes.wave), - app: genTheme(colorVariants.toastyOrange, shapes.wave), -}; - // As the background shapes and colors are decorative, we place them onto // the page as a css background-image instead of an html element of its own. // Utility to not have to write colors and shapes twice. -function genTheme(colors: string[], shape: string) { +export function genPageTheme(colors: string[], shape: string): PageTheme { const gradientColors = colors.length === 1 ? [colors[0], colors[0]] : colors; const gradient = `linear-gradient(90deg, ${gradientColors.join(', ')})`; const backgroundImage = `${shape}, ${gradient}`; return { colors, shape, backgroundImage }; } + +export const pageTheme: Record = { + home: genPageTheme(colorVariants.teal, shapes.wave), + documentation: genPageTheme(colorVariants.pinkSea, shapes.wave2), + tool: genPageTheme(colorVariants.purpleSky, shapes.round), + service: genPageTheme(colorVariants.marineBlue, shapes.wave), + website: genPageTheme(colorVariants.veryBlue, shapes.wave), + library: genPageTheme(colorVariants.rubyRed, shapes.wave), + other: genPageTheme(colorVariants.darkGrey, shapes.wave), + app: genPageTheme(colorVariants.toastyOrange, shapes.wave), +}; diff --git a/packages/theme/src/themes.ts b/packages/theme/src/themes.ts index 82076aec3c..5b233ac303 100644 --- a/packages/theme/src/themes.ts +++ b/packages/theme/src/themes.ts @@ -15,6 +15,7 @@ */ import { createTheme } from './baseTheme'; +import { pageTheme } from './pageTheme'; import { yellow } from '@material-ui/core/colors'; export const lightTheme = createTheme({ @@ -75,6 +76,8 @@ export const lightTheme = createTheme({ indicator: '#9BF0E1', }, }, + defaultPageTheme: 'home', + pageTheme, }); export const darkTheme = createTheme({ @@ -135,4 +138,6 @@ export const darkTheme = createTheme({ indicator: '#9BF0E1', }, }, + defaultPageTheme: 'home', + pageTheme, }); diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts index 8eeeddd17d..5acc0f75e9 100644 --- a/packages/theme/src/types.ts +++ b/packages/theme/src/types.ts @@ -74,12 +74,20 @@ type PaletteAdditions = { export type BackstagePalette = Palette & PaletteAdditions; export type BackstagePaletteOptions = PaletteOptions & PaletteAdditions; +export type PageThemeSelector = { + themeId: string; +}; + export interface BackstageTheme extends Theme { palette: BackstagePalette; + page: PageTheme; + getPageTheme: ({ themeId }: PageThemeSelector) => PageTheme; } export interface BackstageThemeOptions extends ThemeOptions { palette: BackstagePaletteOptions; + page: PageTheme; + getPageTheme: ({ themeId }: PageThemeSelector) => PageTheme; } /** @@ -87,5 +95,13 @@ export interface BackstageThemeOptions extends ThemeOptions { */ export type SimpleThemeOptions = { palette: BackstagePaletteOptions; + defaultPageTheme: string; + pageTheme?: Record; fontFamily?: string; }; + +export type PageTheme = { + colors: string[]; + shape: string; + backgroundImage: string; +}; diff --git a/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.test.tsx b/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.test.tsx index af5213e3f1..9a2bc0cfb1 100644 --- a/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.test.tsx +++ b/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.test.tsx @@ -13,14 +13,12 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - -import { Entity } from '@backstage/catalog-model'; import { ApiProvider, ApiRegistry, errorApiRef } from '@backstage/core'; import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog'; import { wrapInTestApp } from '@backstage/test-utils'; import { render, waitFor } from '@testing-library/react'; import * as React from 'react'; -import { ApiEntityPage, getPageTheme } from './ApiEntityPage'; +import { ApiEntityPage } from './ApiEntityPage'; jest.mock('react-router-dom', () => { const actual = jest.requireActual('react-router-dom'); @@ -71,32 +69,3 @@ describe('ApiEntityPage', () => { ); }); }); - -describe('getPageTheme', () => { - const defaultPageTheme = getPageTheme(); - it.each(['service', 'app', 'library', 'tool', 'documentation', 'website'])( - 'should select right theme for predefined type: %p ̰ ', - type => { - const theme = getPageTheme(({ - spec: { - type, - }, - } as any) as Entity); - expect(theme).toBeDefined(); - expect(theme).not.toBe(defaultPageTheme); - }, - ); - - it('should select default theme for unknown/unspecified types', () => { - const theme1 = getPageTheme(({ - spec: { - type: 'unknown-type', - }, - } as any) as Entity); - const theme2 = getPageTheme(({ - spec: {}, - } as any) as Entity); - expect(theme1).toBe(defaultPageTheme); - expect(theme2).toBe(defaultPageTheme); - }); -}); diff --git a/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx b/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx index b7e9996cc0..f755705ac7 100644 --- a/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx +++ b/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx @@ -20,8 +20,6 @@ import { errorApiRef, Header, Page, - pageTheme, - PageTheme, Progress, useApi, } from '@backstage/core'; @@ -54,11 +52,6 @@ function headerProps( }; } -export const getPageTheme = (entity?: Entity): PageTheme => { - const themeKey = entity?.spec?.type?.toString() ?? 'home'; - return pageTheme[themeKey] ?? pageTheme.home; -}; - type EntityPageTitleProps = { title: string; entity: Entity | undefined; @@ -107,7 +100,7 @@ export const ApiEntityPage = () => { ); return ( - +
} pageTitleOverride={headerTitle} diff --git a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx index a111007278..0720ecf45b 100644 --- a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx +++ b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx @@ -14,22 +14,20 @@ * limitations under the License. */ -import { Header, Page, pageTheme } from '@backstage/core'; +import { Header, Page } from '@backstage/core'; import React from 'react'; type Props = { children?: React.ReactNode; }; -export const ApiExplorerLayout = ({ children }: Props) => { - return ( - -
- {children} - - ); -}; +export const ApiExplorerLayout = ({ children }: Props) => ( + +
+ {children} + +); diff --git a/plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx b/plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx index 9d658d7122..298aeacfec 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx +++ b/plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx @@ -20,7 +20,6 @@ import { HomepageTimer, identityApiRef, Page, - pageTheme, useApi, } from '@backstage/core'; import React from 'react'; @@ -37,7 +36,7 @@ const CatalogLayout = ({ children }: Props) => { const orgName = useApi(configApiRef).getOptionalString('organization.name'); return ( - +
{ - const themeKey = entity?.spec?.type?.toString() ?? 'home'; - return pageTheme[themeKey] ?? pageTheme.home; -}; - const EntityPageTitle = ({ entity, title, @@ -100,7 +87,7 @@ export const EntityPageLayout = ({ const showRemovalDialog = () => setConfirmationDialogOpen(true); return ( - +
} pageTitleOverride={headerTitle} diff --git a/plugins/cost-insights/src/components/AlertInstructionsLayout/AlertInstructionsLayout.tsx b/plugins/cost-insights/src/components/AlertInstructionsLayout/AlertInstructionsLayout.tsx index e7ecc8894b..82954baa86 100644 --- a/plugins/cost-insights/src/components/AlertInstructionsLayout/AlertInstructionsLayout.tsx +++ b/plugins/cost-insights/src/components/AlertInstructionsLayout/AlertInstructionsLayout.tsx @@ -17,7 +17,7 @@ import React, { ReactNode } from 'react'; import { Box, Button, Container, makeStyles } from '@material-ui/core'; import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; -import { Header, Page, pageTheme } from '@backstage/core'; +import { Header, Page } from '@backstage/core'; import { CostInsightsThemeProvider } from '../CostInsightsPage/CostInsightsThemeProvider'; import { ConfigProvider, CurrencyProvider } from '../../hooks'; @@ -42,7 +42,7 @@ const AlertInstructionsLayout = ({ - +
{ const classes = useStyles(); return ( - +
{ const classes = useStyles(); + return ( - +
); -export const NewProjectPage = () => { - return ( - -
- {labels} -
- - - - This plugin allows you to view and interact with your gcp projects. - - - - - - ); -}; +export const NewProjectPage = () => ( + +
+ {labels} +
+ + + + This plugin allows you to view and interact with your gcp projects. + + + + + +); diff --git a/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx b/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx index 3dfb4e886b..0c6350b849 100644 --- a/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx +++ b/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx @@ -13,14 +13,12 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - import { Content, ContentHeader, Header, HeaderLabel, Page, - pageTheme, SupportButton, useApi, WarningPanel, @@ -147,18 +145,16 @@ const labels = ( ); -export const ProjectDetailsPage = () => { - return ( - -
- {labels} -
- - - Support Button - - - - - ); -}; +export const ProjectDetailsPage = () => ( + +
+ {labels} +
+ + + Support Button + + + + +); diff --git a/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx b/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx index 542d03d5fd..b911040535 100644 --- a/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx +++ b/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx @@ -15,7 +15,6 @@ */ // NEEDS WORK - import { Content, ContentHeader, @@ -23,7 +22,6 @@ import { HeaderLabel, Link, Page, - pageTheme, SupportButton, useApi, WarningPanel, @@ -134,21 +132,19 @@ const PageContents = () => { ); }; -export const ProjectListPage = () => { - return ( - -
- {labels} -
- - - - All your software catalog entities - - - - - ); -}; +export const ProjectListPage = () => ( + +
+ {labels} +
+ + + + All your software catalog entities + + + + +); diff --git a/plugins/gitops-profiles/src/components/ClusterList/ClusterList.tsx b/plugins/gitops-profiles/src/components/ClusterList/ClusterList.tsx index baab018415..70bf4c8c3f 100644 --- a/plugins/gitops-profiles/src/components/ClusterList/ClusterList.tsx +++ b/plugins/gitops-profiles/src/components/ClusterList/ClusterList.tsx @@ -21,7 +21,6 @@ import { Header, SupportButton, Page, - pageTheme, Progress, HeaderLabel, useApi, @@ -91,7 +90,7 @@ const ClusterList: FC<{}> = () => { } return ( - +
diff --git a/plugins/gitops-profiles/src/components/ClusterPage/ClusterPage.tsx b/plugins/gitops-profiles/src/components/ClusterPage/ClusterPage.tsx index b2d62e8650..9b6e5bdb08 100644 --- a/plugins/gitops-profiles/src/components/ClusterPage/ClusterPage.tsx +++ b/plugins/gitops-profiles/src/components/ClusterPage/ClusterPage.tsx @@ -13,13 +13,11 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - import React, { FC, useEffect, useState } from 'react'; import { Content, Header, Page, - pageTheme, Table, Progress, HeaderLabel, @@ -85,7 +83,7 @@ const ClusterPage: FC<{}> = () => { }, [pollingLog, api, params, githubAuth, githubAccessToken, githubUsername]); return ( - +
diff --git a/plugins/gitops-profiles/src/components/ProfileCatalog/ProfileCatalog.tsx b/plugins/gitops-profiles/src/components/ProfileCatalog/ProfileCatalog.tsx index a5125fb006..a70cf97342 100644 --- a/plugins/gitops-profiles/src/components/ProfileCatalog/ProfileCatalog.tsx +++ b/plugins/gitops-profiles/src/components/ProfileCatalog/ProfileCatalog.tsx @@ -18,7 +18,6 @@ import React, { FC, useEffect, useState } from 'react'; import { Header, Page, - pageTheme, Content, ContentHeader, HeaderLabel, @@ -259,7 +258,7 @@ const ProfileCatalog: FC<{}> = () => { ]; return ( - +
{ } return ( - +
diff --git a/plugins/kubernetes/src/components/KubernetesContent/KubernetesContent.tsx b/plugins/kubernetes/src/components/KubernetesContent/KubernetesContent.tsx index 013c7ad002..a3e82e79a4 100644 --- a/plugins/kubernetes/src/components/KubernetesContent/KubernetesContent.tsx +++ b/plugins/kubernetes/src/components/KubernetesContent/KubernetesContent.tsx @@ -22,7 +22,6 @@ import { configApiRef, Content, Page, - pageTheme, Progress, TabbedCard, useApi, @@ -148,7 +147,7 @@ export const KubernetesContent = ({ entity }: KubernetesContentProps) => { kubernetesObjects?.items.filter(r => r.errors.length > 0) ?? []; return ( - + {kubernetesObjects === undefined && error === undefined && ( diff --git a/plugins/lighthouse/src/components/AuditList/index.tsx b/plugins/lighthouse/src/components/AuditList/index.tsx index a75bb25a0d..117a40a901 100644 --- a/plugins/lighthouse/src/components/AuditList/index.tsx +++ b/plugins/lighthouse/src/components/AuditList/index.tsx @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - import React, { useState, useMemo, FC, ReactNode } from 'react'; import { useLocalStorage, useAsync } from 'react-use'; import { useNavigate } from 'react-router-dom'; @@ -28,7 +27,6 @@ import { ContentHeader, HeaderLabel, Progress, - pageTheme, useApi, } from '@backstage/core'; @@ -95,7 +93,7 @@ const AuditList: FC<{}> = () => { } return ( - +
= () => { }; const ConnectedAuditView = () => ( - +
diff --git a/plugins/lighthouse/src/components/CreateAudit/index.tsx b/plugins/lighthouse/src/components/CreateAudit/index.tsx index ad46b06020..372992a718 100644 --- a/plugins/lighthouse/src/components/CreateAudit/index.tsx +++ b/plugins/lighthouse/src/components/CreateAudit/index.tsx @@ -30,7 +30,6 @@ import { InfoCard, Header, Page, - pageTheme, Content, ContentHeader, HeaderLabel, @@ -170,7 +169,7 @@ export const CreateAuditContent: FC<{}> = () => { }; const CreateAudit = () => ( - +
diff --git a/plugins/newrelic/src/components/NewRelicComponent/NewRelicComponent.tsx b/plugins/newrelic/src/components/NewRelicComponent/NewRelicComponent.tsx index 94d5c530a1..81e28a8c80 100644 --- a/plugins/newrelic/src/components/NewRelicComponent/NewRelicComponent.tsx +++ b/plugins/newrelic/src/components/NewRelicComponent/NewRelicComponent.tsx @@ -19,7 +19,6 @@ import { Grid } from '@material-ui/core'; import { Header, Page, - pageTheme, Content, ContentHeader, HeaderLabel, @@ -28,7 +27,7 @@ import { import NewRelicFetchComponent from '../NewRelicFetchComponent'; const NewRelicComponent: FC<{}> = () => ( - +
diff --git a/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx b/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx index 933b67060a..cd3eb1adbb 100644 --- a/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx +++ b/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx @@ -19,7 +19,6 @@ import { Grid, makeStyles } from '@material-ui/core'; import { InfoCard, Page, - pageTheme, Content, useApi, errorApiRef, @@ -113,7 +112,7 @@ export const RegisterComponentPage = ({ }; return ( - +
diff --git a/plugins/rollbar/src/components/RollbarHome/RollbarHome.tsx b/plugins/rollbar/src/components/RollbarHome/RollbarHome.tsx index d09c2054b1..fe99e70575 100644 --- a/plugins/rollbar/src/components/RollbarHome/RollbarHome.tsx +++ b/plugins/rollbar/src/components/RollbarHome/RollbarHome.tsx @@ -15,7 +15,7 @@ */ import React from 'react'; -import { Content, Header, Page, pageTheme } from '@backstage/core'; +import { Content, Header, Page } from '@backstage/core'; import { RollbarProjectTable } from '../RollbarProjectTable/RollbarProjectTable'; import { useRollbarEntities } from '../../hooks/useRollbarEntities'; @@ -23,7 +23,7 @@ export const RollbarHome = () => { const { entities, loading, error } = useRollbarEntities(); return ( - +
{ const { entity } = useCatalogEntity(); return ( - +
diff --git a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx index b5bdaaef4a..d0cb25f254 100644 --- a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx +++ b/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 ( - +
{ - const theme = pageTheme[type] ?? pageTheme.other; + const backstageTheme = useTheme(); + + const themeId = pageTheme[type] ? type : 'other'; + const theme = backstageTheme.getPageTheme({ themeId }); const classes = useStyles({ backgroundImage: theme.backgroundImage }); const href = generatePath(templateRoute.path, { templateName: name }); diff --git a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx index e68c795bd6..7cd1ce0243 100644 --- a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx +++ b/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 ( - +
= () => { const sentryProjectId = 'sample-sentry-project-id'; return ( - +
diff --git a/plugins/tech-radar/src/components/RadarPage.tsx b/plugins/tech-radar/src/components/RadarPage.tsx index 519c9afeee..84cfef3213 100644 --- a/plugins/tech-radar/src/components/RadarPage.tsx +++ b/plugins/tech-radar/src/components/RadarPage.tsx @@ -23,7 +23,6 @@ import { Header, HeaderLabel, SupportButton, - pageTheme, } from '@backstage/core'; import RadarComponent from '../components/RadarComponent'; import { TechRadarComponentProps } from '../api'; @@ -40,7 +39,7 @@ export const RadarPage = ({ pageTitle, ...props }: TechRadarPageProps): JSX.Element => ( - +
diff --git a/plugins/techdocs/src/reader/components/TechDocsHome.tsx b/plugins/techdocs/src/reader/components/TechDocsHome.tsx index cbef46f6c1..0408a540ca 100644 --- a/plugins/techdocs/src/reader/components/TechDocsHome.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsHome.tsx @@ -24,7 +24,6 @@ import { useApi, Content, Page, - pageTheme, Header, } from '@backstage/core'; import { catalogApiRef } from '@backstage/plugin-catalog'; @@ -43,7 +42,7 @@ export const TechDocsHome = () => { if (loading) { return ( - +
{ if (error) { return ( - +
{ } return ( - +
{ }; return ( - + { ]; return ( - +
{content[activeTab]} diff --git a/plugins/welcome/src/components/WelcomePage/WelcomePage.tsx b/plugins/welcome/src/components/WelcomePage/WelcomePage.tsx index 1afdb53ad4..7b94024948 100644 --- a/plugins/welcome/src/components/WelcomePage/WelcomePage.tsx +++ b/plugins/welcome/src/components/WelcomePage/WelcomePage.tsx @@ -30,7 +30,6 @@ import { Header, HomepageTimer, Page, - pageTheme, ContentHeader, SupportButton, WarningPanel, @@ -44,7 +43,7 @@ const WelcomePage = () => { const profile = { givenName: '' }; return ( - +