From 3c96e77b51395b937aab7398580efc738e03275e Mon Sep 17 00:00:00 2001 From: Axel Hecht Date: Mon, 6 Mar 2023 14:14:41 +0100 Subject: [PATCH 1/3] Use page theme fontColor consistently in scaffolder headers and cards. This fixes problems with themes with white header background, which end up with white-on-white text for card heads and context menus. Signed-off-by: Axel Hecht --- .changeset/cool-feet-speak.md | 6 ++++ .../components/TemplateCard/CardHeader.tsx | 28 +++++++++++-------- .../ScaffolderPageContextMenu.tsx | 5 ++-- .../components/TemplateCard/TemplateCard.tsx | 13 +++++++-- .../src/next/TemplateListPage/ContextMenu.tsx | 5 ++-- 5 files changed, 39 insertions(+), 18 deletions(-) create mode 100644 .changeset/cool-feet-speak.md diff --git a/.changeset/cool-feet-speak.md b/.changeset/cool-feet-speak.md new file mode 100644 index 0000000000..8cf3df759a --- /dev/null +++ b/.changeset/cool-feet-speak.md @@ -0,0 +1,6 @@ +--- +'@backstage/plugin-scaffolder-react': minor +'@backstage/plugin-scaffolder': minor +--- + +Make scaffolder adhere to page themes by using page fontColor consistently. If your theme overwrites template list or card headers, review those stylings. diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.tsx index 3a5785a4f6..608af1a0bf 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.tsx @@ -21,17 +21,22 @@ import { BackstageTheme } from '@backstage/theme'; import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common'; import { FavoriteEntity } from '@backstage/plugin-catalog-react'; -const useStyles = makeStyles( - () => ({ - header: { - backgroundImage: ({ cardBackgroundImage }) => cardBackgroundImage, - }, - subtitleWrapper: { - display: 'flex', - justifyContent: 'space-between', - }, - }), -); +const useStyles = makeStyles< + BackstageTheme, + { + cardFontColor: string; + cardBackgroundImage: string; + } +>(() => ({ + header: { + backgroundImage: ({ cardBackgroundImage }) => cardBackgroundImage, + color: ({ cardFontColor }) => cardFontColor, + }, + subtitleWrapper: { + display: 'flex', + justifyContent: 'space-between', + }, +})); /** * Props for the CardHeader component @@ -54,6 +59,7 @@ export const CardHeader = (props: CardHeaderProps) => { const themeForType = getPageTheme({ themeId: type }); const styles = useStyles({ + cardFontColor: themeForType.fontColor, cardBackgroundImage: themeForType.backgroundImage, }); diff --git a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPageContextMenu.tsx b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPageContextMenu.tsx index ca7648546e..ef79eda406 100644 --- a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPageContextMenu.tsx +++ b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPageContextMenu.tsx @@ -15,6 +15,7 @@ */ import { useRouteRef } from '@backstage/core-plugin-api'; +import { BackstageTheme } from '@backstage/theme'; import IconButton from '@material-ui/core/IconButton'; import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemText from '@material-ui/core/ListItemText'; @@ -34,9 +35,9 @@ import { scaffolderListTaskRouteRef, } from '../../routes'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles(theme => ({ button: { - color: theme.palette.common.white, + color: theme.page.fontColor, }, })); diff --git a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx b/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx index 80aba04060..825317ef73 100644 --- a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx +++ b/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx @@ -64,12 +64,16 @@ import WarningIcon from '@material-ui/icons/Warning'; import React from 'react'; import { selectedTemplateRouteRef, viewTechDocRouteRef } from '../../routes'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles< + BackstageTheme, + { fontColor: string; backgroundImage: string } +>(theme => ({ cardHeader: { position: 'relative', }, title: { - backgroundImage: ({ backgroundImage }: any) => backgroundImage, + backgroundImage: ({ backgroundImage }) => backgroundImage, + color: ({ fontColor }) => fontColor, }, box: { overflow: 'hidden', @@ -186,7 +190,10 @@ export const TemplateCard = ({ template, deprecated }: TemplateCardProps) => { ? templateProps.type : 'other'; const theme = backstageTheme.getPageTheme({ themeId }); - const classes = useStyles({ backgroundImage: theme.backgroundImage }); + const classes = useStyles({ + fontColor: theme.fontColor, + backgroundImage: theme.backgroundImage, + }); const { name, namespace } = parseEntityRef(stringifyEntityRef(template)); const href = templateRoute({ templateName: name, namespace }); diff --git a/plugins/scaffolder/src/next/TemplateListPage/ContextMenu.tsx b/plugins/scaffolder/src/next/TemplateListPage/ContextMenu.tsx index 6165d40e7c..d78b8a62c4 100644 --- a/plugins/scaffolder/src/next/TemplateListPage/ContextMenu.tsx +++ b/plugins/scaffolder/src/next/TemplateListPage/ContextMenu.tsx @@ -15,6 +15,7 @@ */ import { useRouteRef } from '@backstage/core-plugin-api'; +import { BackstageTheme } from '@backstage/theme'; import IconButton from '@material-ui/core/IconButton'; import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemText from '@material-ui/core/ListItemText'; @@ -34,9 +35,9 @@ import { nextScaffolderListTaskRouteRef, } from '../routes'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme: BackstageTheme) => ({ button: { - color: theme.palette.common.white, + color: theme.page.fontColor, }, })); From d571c111946582966f41e2d2699b77a3a5643cff Mon Sep 17 00:00:00 2001 From: Axel Hecht Date: Mon, 6 Mar 2023 14:33:46 +0100 Subject: [PATCH 2/3] Fix vale Signed-off-by: Axel Hecht --- .changeset/cool-feet-speak.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/cool-feet-speak.md b/.changeset/cool-feet-speak.md index 8cf3df759a..f6c3eb3035 100644 --- a/.changeset/cool-feet-speak.md +++ b/.changeset/cool-feet-speak.md @@ -3,4 +3,4 @@ '@backstage/plugin-scaffolder': minor --- -Make scaffolder adhere to page themes by using page fontColor consistently. If your theme overwrites template list or card headers, review those stylings. +Make scaffolder adhere to page themes by using page `fontColor` consistently. If your theme overwrites template list or card headers, review those styles. From 9ab5675d76f5a2a335629c1010ef1d6eafcde789 Mon Sep 17 00:00:00 2001 From: Ben Lambert Date: Mon, 6 Mar 2023 19:16:15 +0100 Subject: [PATCH 3/3] Update cool-feet-speak.md Signed-off-by: Ben Lambert --- .changeset/cool-feet-speak.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/cool-feet-speak.md b/.changeset/cool-feet-speak.md index f6c3eb3035..9240c5bb52 100644 --- a/.changeset/cool-feet-speak.md +++ b/.changeset/cool-feet-speak.md @@ -1,6 +1,6 @@ --- -'@backstage/plugin-scaffolder-react': minor -'@backstage/plugin-scaffolder': minor +'@backstage/plugin-scaffolder-react': patch +'@backstage/plugin-scaffolder': patch --- Make scaffolder adhere to page themes by using page `fontColor` consistently. If your theme overwrites template list or card headers, review those styles.