From bdda543d0083c7eda9a04d30d13f51de0250d376 Mon Sep 17 00:00:00 2001 From: "Marcucella, Henry" Date: Tue, 4 Nov 2025 17:25:41 -0500 Subject: [PATCH] fix(widgetoverlay): light mode wrong background color Signed-off-by: Marcucella, Henry --- .changeset/yummy-clowns-fetch.md | 5 +++++ .../components/CustomHomepage/WidgetSettingsOverlay.tsx | 9 +++++++-- 2 files changed, 12 insertions(+), 2 deletions(-) create mode 100644 .changeset/yummy-clowns-fetch.md diff --git a/.changeset/yummy-clowns-fetch.md b/.changeset/yummy-clowns-fetch.md new file mode 100644 index 0000000000..3042490d0e --- /dev/null +++ b/.changeset/yummy-clowns-fetch.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-home': patch +--- + +Updated WidgetOverlay color to use `alpha(theme.palette.background.paper, 0.93)` for better theme alignment instead of hardcoded RGBA diff --git a/plugins/home/src/components/CustomHomepage/WidgetSettingsOverlay.tsx b/plugins/home/src/components/CustomHomepage/WidgetSettingsOverlay.tsx index e6aa448ca0..41c8ce1176 100644 --- a/plugins/home/src/components/CustomHomepage/WidgetSettingsOverlay.tsx +++ b/plugins/home/src/components/CustomHomepage/WidgetSettingsOverlay.tsx @@ -21,7 +21,12 @@ import DialogContent from '@material-ui/core/DialogContent'; import Grid from '@material-ui/core/Grid'; import IconButton from '@material-ui/core/IconButton'; import Tooltip from '@material-ui/core/Tooltip'; -import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; +import { + alpha, + createStyles, + makeStyles, + Theme, +} from '@material-ui/core/styles'; import DeleteIcon from '@material-ui/icons/Delete'; import SettingsIcon from '@material-ui/icons/Settings'; import { useState } from 'react'; @@ -44,7 +49,7 @@ const useStyles = makeStyles((theme: Theme) => }, settingsOverlay: { position: 'absolute', - backgroundColor: 'rgba(40, 40, 40, 0.93)', + backgroundColor: alpha(theme.palette.background.paper, 0.93), width: '100%', height: '100%', top: 0,