From 1d7c989db2ad74450c2fa9731b9abd2e341aa196 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= Date: Mon, 20 Nov 2023 15:52:05 +0100 Subject: [PATCH] remove even more BackstageTheme usages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Fredrik Adelöw --- packages/core-components/api-report.md | 1 - .../src/components/CodeSnippet/CodeSnippet.tsx | 4 ++-- .../components/CreateButton/CreateButton.tsx | 4 ++-- .../components/DependencyGraph/DefaultLabel.tsx | 3 +-- .../components/DependencyGraph/DefaultNode.tsx | 3 +-- .../DependencyGraph/DependencyGraph.tsx | 3 +-- .../src/components/DependencyGraph/Edge.tsx | 3 +-- .../DismissableBanner/DismissableBanner.tsx | 3 +-- .../EmptyState/MissingAnnotationEmptyState.tsx | 3 +-- .../HorizontalScrollGrid.tsx | 4 ++-- .../MarkdownContent/MarkdownContent.tsx | 3 +-- .../OAuthRequestDialog/LoginRequestListItem.tsx | 4 ++-- .../OAuthRequestDialog/OAuthRequestDialog.tsx | 4 ++-- .../src/components/Progress/Progress.tsx | 4 ++-- .../src/components/ProgressBars/Gauge.tsx | 6 +++--- .../src/components/ProgressBars/LinearGauge.tsx | 4 ++-- .../src/components/Status/Status.tsx | 4 ++-- .../components/SupportButton/SupportButton.tsx | 6 +++--- .../src/components/Table/Filters.tsx | 4 ++-- .../src/components/Table/SubvalueCell.tsx | 4 ++-- .../src/components/Table/Table.tsx | 17 +++++++++++------ .../src/components/TrendLine/TrendLine.tsx | 7 +++---- .../components/WarningPanel/WarningPanel.tsx | 12 ++++++------ .../src/layout/BottomLink/BottomLink.tsx | 3 +-- .../src/layout/ErrorPage/ErrorPage.tsx | 3 +-- .../src/layout/Header/Header.tsx | 3 +-- .../src/layout/HeaderLabel/HeaderLabel.tsx | 3 +-- .../src/layout/ItemCard/ItemCardHeader.tsx | 11 ++++++++--- .../core-components/src/layout/Page/Page.tsx | 7 +++---- .../core-components/src/layout/Sidebar/Bar.tsx | 7 +++---- .../src/layout/Sidebar/Intro.tsx | 6 +++--- .../src/layout/Sidebar/Items.tsx | 8 ++++---- .../src/layout/Sidebar/MobileSidebar.tsx | 5 ++--- .../core-components/src/layout/Sidebar/Page.tsx | 13 ++++++------- .../src/layout/Sidebar/SidebarGroup.tsx | 5 ++--- .../src/layout/Sidebar/SidebarSubmenu.tsx | 6 +++--- .../src/layout/Sidebar/SidebarSubmenuItem.tsx | 4 ++-- .../EntityGridItem/EntityGridItem.tsx | 5 ++--- .../EntityAirbrakeWidget.tsx | 5 ++--- .../ApiDefinitionDialog/ApiDefinitionDialog.tsx | 3 +-- .../GraphQlDefinition.tsx | 5 ++--- .../GrpcApiDefinitionWidget.tsx | 3 +-- .../TrpcApiDefinitionWidget.tsx | 3 +-- .../ApolloExplorerBrowser.tsx | 4 ++-- .../AzureSitesOverviewTable.tsx | 3 +-- plugins/catalog-graph/README.md | 2 +- .../CatalogFilterLayout/CatalogFilterLayout.tsx | 6 +++--- .../MissingAnnotationEmptyState.tsx | 3 +-- .../UserListPicker/UserListPicker.tsx | 3 +-- .../EntityLabelsCard/EntityLabelsEmptyState.tsx | 3 +-- .../EntityLinksCard/EntityLinksEmptyState.tsx | 3 +-- .../EntityNotFound/EntityNotFound.tsx | 3 +-- .../src/components/chart-filters.tsx | 3 +-- .../cicd-statistics/src/components/label.tsx | 4 ++-- plugins/cicd-statistics/src/entity-page.tsx | 4 ++-- .../cloudbuild/src/components/Cards/Cards.tsx | 4 ++-- .../WorkflowRunDetails/WorkflowRunDetails.tsx | 3 +-- .../CoverageHistoryChart.tsx | 3 +-- .../codescene/src/components/Gauge/Gauge.tsx | 10 +++++----- plugins/cost-insights/src/utils/styles.ts | 4 ++-- .../FeedbackResponseTable.tsx | 3 +-- .../src/components/ToolCard/ToolCard.tsx | 4 ++-- .../ProjectDetailsPage/ProjectDetailsPage.tsx | 3 +-- .../src/components/Cards/Cards.tsx | 9 ++------- .../WorkflowRunLogs/WorkflowRunLogs.tsx | 3 +-- .../GraphiQLBrowser/GraphiQLBrowser.tsx | 3 +-- .../GraphQLVoyagerBrowser.tsx | 6 +++--- .../FeaturedDocsCard/Content.tsx | 4 ++-- .../ILertCard/ILertCardEmptyState.tsx | 3 +-- plugins/jenkins/src/components/Cards/Cards.tsx | 4 ++-- .../ChangeEvents/ChangeEventListItem.tsx | 3 +-- .../components/Incident/IncidentListItem.tsx | 3 +-- .../src/components/TriggerButton/index.tsx | 5 ++--- .../CreatePlaylistButton.tsx | 5 ++--- .../PersonalListPicker/PersonalListPicker.tsx | 3 +-- .../ReportDetailsLogsTable.tsx | 4 ++-- .../ReportDetailsPage/ReportDetailsPage.tsx | 4 ++-- .../next/components/TemplateCard/CardHeader.tsx | 7 +++---- .../next/components/TemplateCard/CardLink.tsx | 4 ++-- .../components/TemplateCard/TemplateCard.tsx | 5 +++-- .../src/next/components/Workflow/Workflow.tsx | 7 +++---- .../ListTasksPage/OwnerListPicker.tsx | 3 +-- .../src/components/OngoingTask/ContextMenu.tsx | 7 ++++--- .../ScaffolderPageContextMenu.tsx | 3 +-- .../src/legacy/TemplateCard/TemplateCard.tsx | 6 +++--- .../TemplateListPage/RegisterExistingButton.tsx | 4 ++-- .../src/components/ErrorCell/ErrorCell.tsx | 4 ++-- .../src/components/RadarBubble/RadarBubble.tsx | 4 ++-- .../src/components/RadarEntry/RadarEntry.tsx | 4 ++-- .../src/components/RadarGrid/RadarGrid.tsx | 4 ++-- .../src/components/RadarLegend/RadarLegend.tsx | 5 +++-- .../TechDocsReaderPageContent/dom.tsx | 3 +-- .../reader/transformers/styles/rules/types.ts | 4 ++-- .../reader/transformers/styles/transformer.ts | 6 +----- .../AuthProviders/ProviderSettingsAvatar.tsx | 5 ++--- .../General/UserSettingsSignInAvatar.tsx | 5 ++--- .../BuildListFilter/BuildListFilter.tsx | 3 +-- .../OverviewTrends/OverviewTrends.tsx | 4 ++-- .../src/components/StatusCell/StatusCell.tsx | 6 +++--- .../components/StatusMatrix/StatusMatrix.tsx | 4 ++-- 100 files changed, 206 insertions(+), 253 deletions(-) diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index 0361b81f0d..cca7017089 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -8,7 +8,6 @@ import { ApiRef } from '@backstage/core-plugin-api'; import { BackstageIdentityApi } from '@backstage/core-plugin-api'; import { BackstagePalette } from '@backstage/theme'; -import { BackstageTheme } from '@backstage/theme'; import { BackstageUserIdentity } from '@backstage/core-plugin-api'; import { BottomNavigationActionProps } from '@material-ui/core/BottomNavigationAction'; import { ButtonProps as ButtonProps_2 } from '@material-ui/core/Button'; diff --git a/packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx b/packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx index 3270cac176..6eb274b015 100644 --- a/packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx +++ b/packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; + import Box from '@material-ui/core/Box'; import { useTheme } from '@material-ui/core/styles'; import React from 'react'; @@ -83,7 +83,7 @@ export function CodeSnippet(props: CodeSnippetProps) { customStyle, showCopyCodeButton = false, } = props; - const theme = useTheme(); + const theme = useTheme(); const mode = theme.palette.type === 'dark' ? dark : docco; const highlightColor = theme.palette.type === 'dark' ? '#256bf3' : '#e6ffed'; diff --git a/packages/core-components/src/components/CreateButton/CreateButton.tsx b/packages/core-components/src/components/CreateButton/CreateButton.tsx index d5d7080851..beca7e8c73 100644 --- a/packages/core-components/src/components/CreateButton/CreateButton.tsx +++ b/packages/core-components/src/components/CreateButton/CreateButton.tsx @@ -14,13 +14,13 @@ * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; import Button from '@material-ui/core/Button'; import IconButton from '@material-ui/core/IconButton'; import useMediaQuery from '@material-ui/core/useMediaQuery'; import React from 'react'; import { Link as RouterLink, LinkProps } from 'react-router-dom'; import AddCircleOutline from '@material-ui/icons/AddCircleOutline'; +import { Theme } from '@material-ui/core/styles'; /** * Properties for {@link CreateButton} @@ -38,7 +38,7 @@ export type CreateButtonProps = { */ export function CreateButton(props: CreateButtonProps) { const { title, to } = props; - const isXSScreen = useMediaQuery(theme => + const isXSScreen = useMediaQuery(theme => theme.breakpoints.down('xs'), ); diff --git a/packages/core-components/src/components/DependencyGraph/DefaultLabel.tsx b/packages/core-components/src/components/DependencyGraph/DefaultLabel.tsx index 677782cf57..d4a91e50db 100644 --- a/packages/core-components/src/components/DependencyGraph/DefaultLabel.tsx +++ b/packages/core-components/src/components/DependencyGraph/DefaultLabel.tsx @@ -16,14 +16,13 @@ import React from 'react'; import makeStyles from '@material-ui/core/styles/makeStyles'; -import { BackstageTheme } from '@backstage/theme'; import { DependencyGraphTypes as Types } from './types'; /** @public */ export type DependencyGraphDefaultLabelClassKey = 'text'; const useStyles = makeStyles( - (theme: BackstageTheme) => ({ + theme => ({ text: { fill: theme.palette.textContrast, }, diff --git a/packages/core-components/src/components/DependencyGraph/DefaultNode.tsx b/packages/core-components/src/components/DependencyGraph/DefaultNode.tsx index 5c28375118..81a918c7b8 100644 --- a/packages/core-components/src/components/DependencyGraph/DefaultNode.tsx +++ b/packages/core-components/src/components/DependencyGraph/DefaultNode.tsx @@ -16,14 +16,13 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; -import { BackstageTheme } from '@backstage/theme'; import { DependencyGraphTypes as Types } from './types'; /** @public */ export type DependencyGraphDefaultNodeClassKey = 'node' | 'text'; const useStyles = makeStyles( - (theme: BackstageTheme) => ({ + theme => ({ node: { fill: theme.palette.primary.light, stroke: theme.palette.primary.light, diff --git a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx index 3dd1025b8f..d4907d2a18 100644 --- a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx +++ b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx @@ -20,7 +20,6 @@ import * as d3Selection from 'd3-selection'; import useTheme from '@material-ui/core/styles/useTheme'; import dagre from 'dagre'; import debounce from 'lodash/debounce'; -import { BackstageTheme } from '@backstage/theme'; import { DependencyGraphTypes as Types } from './types'; import { Node } from './Node'; import { Edge, GraphEdge } from './Edge'; @@ -205,7 +204,7 @@ export function DependencyGraph( fit = 'grow', ...svgProps } = props; - const theme: BackstageTheme = useTheme(); + const theme = useTheme(); const [containerWidth, setContainerWidth] = React.useState(100); const [containerHeight, setContainerHeight] = React.useState(100); diff --git a/packages/core-components/src/components/DependencyGraph/Edge.tsx b/packages/core-components/src/components/DependencyGraph/Edge.tsx index 4e3ba96e48..05e068eca4 100644 --- a/packages/core-components/src/components/DependencyGraph/Edge.tsx +++ b/packages/core-components/src/components/DependencyGraph/Edge.tsx @@ -18,7 +18,6 @@ import React from 'react'; import * as d3Shape from 'd3-shape'; import isFinite from 'lodash/isFinite'; import makeStyles from '@material-ui/core/styles/makeStyles'; -import { BackstageTheme } from '@backstage/theme'; import { DependencyGraphTypes as Types } from './types'; import { EDGE_TEST_ID, LABEL_TEST_ID } from './constants'; import { DefaultLabel } from './DefaultLabel'; @@ -42,7 +41,7 @@ export type GraphEdge = Types.DependencyEdge & export type DependencyGraphEdgeClassKey = 'path' | 'label'; const useStyles = makeStyles( - (theme: BackstageTheme) => ({ + theme => ({ path: { strokeWidth: 1, stroke: theme.palette.textSubtle, diff --git a/packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx b/packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx index 9b74b1e9b8..649043fc21 100644 --- a/packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx +++ b/packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx @@ -19,7 +19,6 @@ import { useApi, storageApiRef } from '@backstage/core-plugin-api'; import useObservable from 'react-use/lib/useObservable'; import classNames from 'classnames'; import { makeStyles } from '@material-ui/core/styles'; -import { BackstageTheme } from '@backstage/theme'; import Snackbar from '@material-ui/core/Snackbar'; import SnackbarContent from '@material-ui/core/SnackbarContent'; import IconButton from '@material-ui/core/IconButton'; @@ -42,7 +41,7 @@ export type DismissableBannerClassKey = export type DismissbleBannerClassKey = DismissableBannerClassKey; const useStyles = makeStyles( - (theme: BackstageTheme) => ({ + theme => ({ root: { padding: theme.spacing(0), marginBottom: theme.spacing(0), diff --git a/packages/core-components/src/components/EmptyState/MissingAnnotationEmptyState.tsx b/packages/core-components/src/components/EmptyState/MissingAnnotationEmptyState.tsx index efbfdb9999..81b4714531 100644 --- a/packages/core-components/src/components/EmptyState/MissingAnnotationEmptyState.tsx +++ b/packages/core-components/src/components/EmptyState/MissingAnnotationEmptyState.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; import Box from '@material-ui/core/Box'; import Button from '@material-ui/core/Button'; import { makeStyles } from '@material-ui/core/styles'; @@ -54,7 +53,7 @@ type Props = { */ export type MissingAnnotationEmptyStateClassKey = 'code'; -const useStyles = makeStyles( +const useStyles = makeStyles( theme => ({ code: { borderRadius: 6, diff --git a/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx b/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx index c4c9dadb78..e89b7896dd 100644 --- a/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx +++ b/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx @@ -16,7 +16,7 @@ import Box from '@material-ui/core/Box'; import Grid from '@material-ui/core/Grid'; import IconButton from '@material-ui/core/IconButton'; -import { makeStyles, Theme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core/styles'; import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; import ChevronRightIcon from '@material-ui/icons/ChevronRight'; import classNames from 'classnames'; @@ -68,7 +68,7 @@ export type HorizontalScrollGridClassKey = | 'buttonLeft' | 'buttonRight'; -const useStyles = makeStyles( +const useStyles = makeStyles( theme => ({ root: { position: 'relative', diff --git a/packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx b/packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx index 425e723052..b422a62b6c 100644 --- a/packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx +++ b/packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx @@ -18,13 +18,12 @@ import { makeStyles } from '@material-ui/core/styles'; import ReactMarkdown, { Options } from 'react-markdown'; import gfm from 'remark-gfm'; import React from 'react'; -import { BackstageTheme } from '@backstage/theme'; import { CodeSnippet } from '../CodeSnippet'; import { HeadingProps } from 'react-markdown/lib/ast-to-react'; export type MarkdownContentClassKey = 'markdown'; -const useStyles = makeStyles( +const useStyles = makeStyles( theme => ({ markdown: { '& table': { diff --git a/packages/core-components/src/components/OAuthRequestDialog/LoginRequestListItem.tsx b/packages/core-components/src/components/OAuthRequestDialog/LoginRequestListItem.tsx index c7707c07d5..782624362d 100644 --- a/packages/core-components/src/components/OAuthRequestDialog/LoginRequestListItem.tsx +++ b/packages/core-components/src/components/OAuthRequestDialog/LoginRequestListItem.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { makeStyles, Theme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core/styles'; import ListItem from '@material-ui/core/ListItem'; import ListItemAvatar from '@material-ui/core/ListItemAvatar'; import ListItemText from '@material-ui/core/ListItemText'; @@ -26,7 +26,7 @@ import { PendingOAuthRequest } from '@backstage/core-plugin-api'; export type LoginRequestListItemClassKey = 'root'; -const useItemStyles = makeStyles( +const useItemStyles = makeStyles( theme => ({ root: { paddingLeft: theme.spacing(3), diff --git a/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx b/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx index 8fdace3766..7c17e74e4a 100644 --- a/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx +++ b/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { makeStyles, Theme } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core/styles'; import Dialog from '@material-ui/core/Dialog'; import DialogActions from '@material-ui/core/DialogActions'; import DialogContent from '@material-ui/core/DialogContent'; @@ -37,7 +37,7 @@ export type OAuthRequestDialogClassKey = | 'contentList' | 'actionButtons'; -const useStyles = makeStyles( +const useStyles = makeStyles( theme => ({ dialog: { paddingTop: theme.spacing(1), diff --git a/packages/core-components/src/components/Progress/Progress.tsx b/packages/core-components/src/components/Progress/Progress.tsx index eb17b9eb25..6d1281edd5 100644 --- a/packages/core-components/src/components/Progress/Progress.tsx +++ b/packages/core-components/src/components/Progress/Progress.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; + import Box from '@material-ui/core/Box'; import LinearProgress, { LinearProgressProps, @@ -22,7 +22,7 @@ import { useTheme } from '@material-ui/core/styles'; import React, { PropsWithChildren, useEffect, useState } from 'react'; export function Progress(props: PropsWithChildren) { - const theme = useTheme(); + const theme = useTheme(); const [isVisible, setIsVisible] = useState(false); useEffect(() => { diff --git a/packages/core-components/src/components/ProgressBars/Gauge.tsx b/packages/core-components/src/components/ProgressBars/Gauge.tsx index ca84a5f480..088e369e62 100644 --- a/packages/core-components/src/components/ProgressBars/Gauge.tsx +++ b/packages/core-components/src/components/ProgressBars/Gauge.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { BackstagePalette, BackstageTheme } from '@backstage/theme'; +import { BackstagePalette } from '@backstage/theme'; import { makeStyles, useTheme } from '@material-ui/core/styles'; import { Circle } from 'rc-progress'; import React, { ReactNode, useEffect, useState } from 'react'; @@ -28,7 +28,7 @@ export type GaugeClassKey = | 'circle' | 'colorUnknown'; -const useStyles = makeStyles( +const useStyles = makeStyles( theme => ({ root: { position: 'relative', @@ -123,7 +123,7 @@ export function Gauge(props: GaugeProps) { const [hoverRef, setHoverRef] = useState(null); const { getColor = getProgressColor } = props; const classes = useStyles(props); - const { palette } = useTheme(); + const { palette } = useTheme(); const { value, fractional, inverse, unit, max, description } = { ...defaultGaugeProps, ...props, diff --git a/packages/core-components/src/components/ProgressBars/LinearGauge.tsx b/packages/core-components/src/components/ProgressBars/LinearGauge.tsx index 8d45b83571..a41b41f3dc 100644 --- a/packages/core-components/src/components/ProgressBars/LinearGauge.tsx +++ b/packages/core-components/src/components/ProgressBars/LinearGauge.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; + import { useTheme } from '@material-ui/core/styles'; import Tooltip from '@material-ui/core/Tooltip'; import Typography from '@material-ui/core/Typography'; @@ -33,7 +33,7 @@ type Props = { export function LinearGauge(props: Props) { const { value, getColor = getProgressColor, width = 'thick' } = props; - const { palette } = useTheme(); + const { palette } = useTheme(); if (isNaN(value)) { return null; } diff --git a/packages/core-components/src/components/Status/Status.tsx b/packages/core-components/src/components/Status/Status.tsx index 364193e383..615eed6aec 100644 --- a/packages/core-components/src/components/Status/Status.tsx +++ b/packages/core-components/src/components/Status/Status.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; + import { makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import classNames from 'classnames'; @@ -28,7 +28,7 @@ export type StatusClassKey = | 'running' | 'aborted'; -const useStyles = makeStyles( +const useStyles = makeStyles( theme => ({ status: { fontWeight: theme.typography.fontWeightMedium, diff --git a/packages/core-components/src/components/SupportButton/SupportButton.tsx b/packages/core-components/src/components/SupportButton/SupportButton.tsx index a07c03b7d2..726500c77e 100644 --- a/packages/core-components/src/components/SupportButton/SupportButton.tsx +++ b/packages/core-components/src/components/SupportButton/SupportButton.tsx @@ -13,8 +13,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import { useApp } from '@backstage/core-plugin-api'; -import { BackstageTheme } from '@backstage/theme'; import Box from '@material-ui/core/Box'; import Button from '@material-ui/core/Button'; import DialogActions from '@material-ui/core/DialogActions'; @@ -24,7 +24,7 @@ import ListItemText from '@material-ui/core/ListItemText'; import MenuItem from '@material-ui/core/MenuItem'; import MenuList from '@material-ui/core/MenuList'; import Popover from '@material-ui/core/Popover'; -import { makeStyles } from '@material-ui/core/styles'; +import { Theme, makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import useMediaQuery from '@material-ui/core/useMediaQuery'; import React, { MouseEventHandler, useState } from 'react'; @@ -91,7 +91,7 @@ export function SupportButton(props: SupportButtonProps) { const [popoverOpen, setPopoverOpen] = useState(false); const [anchorEl, setAnchorEl] = useState(null); const classes = useStyles(); - const isSmallScreen = useMediaQuery(theme => + const isSmallScreen = useMediaQuery(theme => theme.breakpoints.down('sm'), ); diff --git a/packages/core-components/src/components/Table/Filters.tsx b/packages/core-components/src/components/Table/Filters.tsx index 24eaa98cb5..568b22b933 100644 --- a/packages/core-components/src/components/Table/Filters.tsx +++ b/packages/core-components/src/components/Table/Filters.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; + import Box from '@material-ui/core/Box'; import Button from '@material-ui/core/Button'; import { makeStyles } from '@material-ui/core/styles'; @@ -24,7 +24,7 @@ import { SelectProps } from '../Select/Select'; export type TableFiltersClassKey = 'root' | 'value' | 'heder' | 'filters'; -const useFilterStyles = makeStyles( +const useFilterStyles = makeStyles( theme => ({ root: { height: '100%', diff --git a/packages/core-components/src/components/Table/SubvalueCell.tsx b/packages/core-components/src/components/Table/SubvalueCell.tsx index cc577b7456..8ccebbe65a 100644 --- a/packages/core-components/src/components/Table/SubvalueCell.tsx +++ b/packages/core-components/src/components/Table/SubvalueCell.tsx @@ -13,14 +13,14 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; + import Box from '@material-ui/core/Box'; import { makeStyles } from '@material-ui/core/styles'; import React from 'react'; export type SubvalueCellClassKey = 'value' | 'subvalue'; -const useSubvalueCellStyles = makeStyles( +const useSubvalueCellStyles = makeStyles( theme => ({ value: { marginBottom: theme.spacing(0.75), diff --git a/packages/core-components/src/components/Table/Table.tsx b/packages/core-components/src/components/Table/Table.tsx index e4ee9b5995..c529c757bc 100644 --- a/packages/core-components/src/components/Table/Table.tsx +++ b/packages/core-components/src/components/Table/Table.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; + import MTable, { Column, Icons, @@ -25,7 +25,12 @@ import MTable, { } from '@material-table/core'; import Box from '@material-ui/core/Box'; import IconButton from '@material-ui/core/IconButton'; -import { makeStyles, useTheme, withStyles } from '@material-ui/core/styles'; +import { + makeStyles, + Theme, + useTheme, + withStyles, +} from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import AddBox from '@material-ui/icons/AddBox'; import ArrowUpward from '@material-ui/icons/ArrowUpward'; @@ -136,7 +141,7 @@ const StyledMTableToolbar = withStyles( /** @public */ export type FiltersContainerClassKey = 'root' | 'title'; -const useFilterStyles = makeStyles( +const useFilterStyles = makeStyles( theme => ({ root: { display: 'flex', @@ -154,7 +159,7 @@ const useFilterStyles = makeStyles( export type TableClassKey = 'root'; -const useTableStyles = makeStyles( +const useTableStyles = makeStyles( () => ({ root: { display: 'flex', @@ -166,7 +171,7 @@ const useTableStyles = makeStyles( function convertColumns( columns: TableColumn[], - theme: BackstageTheme, + theme: Theme, ): TableColumn[] { return columns.map(column => { const headerStyle: React.CSSProperties = column.headerStyle ?? {}; @@ -316,7 +321,7 @@ export function Table(props: TableProps) { } = props; const tableClasses = useTableStyles(); - const theme = useTheme(); + const theme = useTheme(); const calculatedInitialState = { ...defaultInitialState, ...initialState }; diff --git a/packages/core-components/src/components/TrendLine/TrendLine.tsx b/packages/core-components/src/components/TrendLine/TrendLine.tsx index b59d748c2c..25d1045e09 100644 --- a/packages/core-components/src/components/TrendLine/TrendLine.tsx +++ b/packages/core-components/src/components/TrendLine/TrendLine.tsx @@ -21,10 +21,9 @@ import { SparklinesLineProps, SparklinesProps, } from 'react-sparklines'; -import { useTheme } from '@material-ui/core/styles'; -import { BackstageTheme } from '@backstage/theme'; +import { Theme, useTheme } from '@material-ui/core/styles'; -function color(data: number[], theme: BackstageTheme): string | undefined { +function color(data: number[], theme: Theme): string | undefined { const lastNum = data[data.length - 1]; if (!lastNum) return undefined; if (lastNum >= 0.9) return theme.palette.status.ok; @@ -36,7 +35,7 @@ export function TrendLine( props: SparklinesProps & Pick & { title?: string }, ) { - const theme = useTheme(); + const theme = useTheme(); if (!props.data) return null; return ( diff --git a/packages/core-components/src/components/WarningPanel/WarningPanel.tsx b/packages/core-components/src/components/WarningPanel/WarningPanel.tsx index 1ed356024c..634b8f7b09 100644 --- a/packages/core-components/src/components/WarningPanel/WarningPanel.tsx +++ b/packages/core-components/src/components/WarningPanel/WarningPanel.tsx @@ -13,8 +13,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; -import { makeStyles, darken, lighten } from '@material-ui/core/styles'; + +import { makeStyles, darken, lighten, Theme } from '@material-ui/core/styles'; import Accordion from '@material-ui/core/Accordion'; import AccordionSummary from '@material-ui/core/AccordionSummary'; import AccordionDetails from '@material-ui/core/AccordionDetails'; @@ -27,7 +27,7 @@ import { MarkdownContent } from '../MarkdownContent'; const getWarningTextColor = ( severity: NonNullable, - theme: BackstageTheme, + theme: Theme, ) => { const getColor = theme.palette.type === 'light' ? darken : lighten; return getColor(theme.palette[severity].light, 0.6); @@ -35,13 +35,13 @@ const getWarningTextColor = ( const getWarningBackgroundColor = ( severity: NonNullable, - theme: BackstageTheme, + theme: Theme, ) => { const getBackgroundColor = theme.palette.type === 'light' ? lighten : darken; return getBackgroundColor(theme.palette[severity].light, 0.9); }; -const useErrorOutlineStyles = makeStyles(theme => ({ +const useErrorOutlineStyles = makeStyles(theme => ({ root: { marginRight: theme.spacing(1), fill: ({ severity }: WarningProps) => @@ -68,7 +68,7 @@ export type WarningPanelClassKey = | 'message' | 'details'; -const useStyles = makeStyles( +const useStyles = makeStyles( theme => ({ panel: { backgroundColor: ({ severity }: WarningProps) => diff --git a/packages/core-components/src/layout/BottomLink/BottomLink.tsx b/packages/core-components/src/layout/BottomLink/BottomLink.tsx index f385d9ce11..ea706002a4 100644 --- a/packages/core-components/src/layout/BottomLink/BottomLink.tsx +++ b/packages/core-components/src/layout/BottomLink/BottomLink.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; import Box from '@material-ui/core/Box'; import Divider from '@material-ui/core/Divider'; import { makeStyles } from '@material-ui/core/styles'; @@ -26,7 +25,7 @@ import { Link } from '../../components/Link'; /** @public */ export type BottomLinkClassKey = 'root' | 'boxTitle' | 'arrow'; -const useStyles = makeStyles( +const useStyles = makeStyles( theme => ({ root: { maxWidth: 'fit-content', diff --git a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx b/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx index 9cfaac363e..73acf1f650 100644 --- a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx +++ b/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; import Grid from '@material-ui/core/Grid'; import { makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; @@ -34,7 +33,7 @@ interface IErrorPageProps { /** @public */ export type ErrorPageClassKey = 'container' | 'title' | 'subtitle'; -const useStyles = makeStyles( +const useStyles = makeStyles( theme => ({ container: { padding: theme.spacing(8), diff --git a/packages/core-components/src/layout/Header/Header.tsx b/packages/core-components/src/layout/Header/Header.tsx index cd2f281d65..c6ceda1070 100644 --- a/packages/core-components/src/layout/Header/Header.tsx +++ b/packages/core-components/src/layout/Header/Header.tsx @@ -15,7 +15,6 @@ */ import { configApiRef, useApi } from '@backstage/core-plugin-api'; -import { BackstageTheme } from '@backstage/theme'; import Box from '@material-ui/core/Box'; import Grid from '@material-ui/core/Grid'; import { makeStyles } from '@material-ui/core/styles'; @@ -39,7 +38,7 @@ export type HeaderClassKey = | 'breadcrumbType' | 'breadcrumbTitle'; -const useStyles = makeStyles( +const useStyles = makeStyles( theme => ({ header: { gridArea: 'pageHeader', diff --git a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx b/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx index fdd48a5d81..6a41d6aedc 100644 --- a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx +++ b/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; import Grid from '@material-ui/core/Grid'; import { alpha, makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; @@ -24,7 +23,7 @@ import { Link } from '../../components/Link'; /** @public */ export type HeaderLabelClassKey = 'root' | 'label' | 'value'; -const useStyles = makeStyles( +const useStyles = makeStyles( theme => ({ root: { textAlign: 'left', diff --git a/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx b/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx index 1e4e7dc316..6dc4725f09 100644 --- a/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx +++ b/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx @@ -13,16 +13,21 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; + import Box from '@material-ui/core/Box'; -import { createStyles, makeStyles, WithStyles } from '@material-ui/core/styles'; +import { + createStyles, + makeStyles, + Theme, + WithStyles, +} from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import React from 'react'; /** @public */ export type ItemCardHeaderClassKey = 'root'; -const styles = (theme: BackstageTheme) => +const styles = (theme: Theme) => createStyles({ root: { color: theme.palette.common.white, diff --git a/packages/core-components/src/layout/Page/Page.tsx b/packages/core-components/src/layout/Page/Page.tsx index e388e0366a..28194b2889 100644 --- a/packages/core-components/src/layout/Page/Page.tsx +++ b/packages/core-components/src/layout/Page/Page.tsx @@ -15,12 +15,11 @@ */ import React from 'react'; -import { BackstageTheme } from '@backstage/theme'; -import { makeStyles, ThemeProvider } from '@material-ui/core/styles'; +import { makeStyles, Theme, ThemeProvider } from '@material-ui/core/styles'; export type PageClassKey = 'root'; -const useStyles = makeStyles( +const useStyles = makeStyles( theme => ({ root: { display: 'grid', @@ -53,7 +52,7 @@ export function Page(props: Props) { const classes = useStyles(); return ( ({ + theme={(baseTheme: Theme) => ({ ...baseTheme, page: baseTheme.getPageTheme({ themeId }), })} diff --git a/packages/core-components/src/layout/Sidebar/Bar.tsx b/packages/core-components/src/layout/Sidebar/Bar.tsx index 8cb43ba007..550c614522 100644 --- a/packages/core-components/src/layout/Sidebar/Bar.tsx +++ b/packages/core-components/src/layout/Sidebar/Bar.tsx @@ -14,10 +14,9 @@ * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; import Box from '@material-ui/core/Box'; import Button from '@material-ui/core/Button'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles, Theme } from '@material-ui/core/styles'; import useMediaQuery from '@material-ui/core/useMediaQuery'; import classnames from 'classnames'; import React, { useContext, useRef, useState } from 'react'; @@ -38,7 +37,7 @@ import { useSidebarPinState } from './SidebarPinStateContext'; /** @public */ export type SidebarClassKey = 'drawer' | 'drawerOpen'; -const useStyles = makeStyles( +const useStyles = makeStyles( theme => ({ drawer: { display: 'flex', @@ -133,7 +132,7 @@ const DesktopSidebar = (props: DesktopSidebarProps) => { } = props; const classes = useStyles({ sidebarConfig }); - const isSmallScreen = useMediaQuery( + const isSmallScreen = useMediaQuery( theme => theme.breakpoints.down('md'), { noSsr: true }, ); diff --git a/packages/core-components/src/layout/Sidebar/Intro.tsx b/packages/core-components/src/layout/Sidebar/Intro.tsx index 824e9e42fd..6f75f096fb 100644 --- a/packages/core-components/src/layout/Sidebar/Intro.tsx +++ b/packages/core-components/src/layout/Sidebar/Intro.tsx @@ -13,11 +13,11 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; + import Box from '@material-ui/core/Box'; import Collapse from '@material-ui/core/Collapse'; import IconButton from '@material-ui/core/IconButton'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles, Theme } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import CloseIcon from '@material-ui/icons/Close'; import { useLocalStorageValue } from '@react-hookz/web'; @@ -39,7 +39,7 @@ export type SidebarIntroClassKey = | 'introDismissText' | 'introDismissIcon'; -const useStyles = makeStyles( +const useStyles = makeStyles( theme => ({ introCard: props => ({ color: '#b5b5b5', diff --git a/packages/core-components/src/layout/Sidebar/Items.tsx b/packages/core-components/src/layout/Sidebar/Items.tsx index aba4c79181..f9970749d0 100644 --- a/packages/core-components/src/layout/Sidebar/Items.tsx +++ b/packages/core-components/src/layout/Sidebar/Items.tsx @@ -13,12 +13,12 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import { IconComponent, useAnalytics, useElementFilter, } from '@backstage/core-plugin-api'; -import { BackstageTheme } from '@backstage/theme'; import Badge from '@material-ui/core/Badge'; import Box from '@material-ui/core/Box'; import { makeStyles, styled, Theme } from '@material-ui/core/styles'; @@ -90,7 +90,7 @@ export type SidebarItemClassKey = | 'selected'; const makeSidebarStyles = (sidebarConfig: SidebarConfig) => - makeStyles( + makeStyles( theme => ({ root: { color: theme.palette.navigation.color, @@ -501,7 +501,7 @@ const SidebarItemWithSubmenu = ({ const [isHoveredOn, setIsHoveredOn] = useState(false); const location = useLocation(); const isActive = useLocationMatch(children, location); - const isSmallScreen = useMediaQuery((theme: BackstageTheme) => + const isSmallScreen = useMediaQuery((theme: Theme) => theme.breakpoints.down('sm'), ); @@ -726,7 +726,7 @@ export const SidebarExpandButton = () => { const { sidebarConfig } = useContext(SidebarConfigContext); const classes = useMemoStyles(sidebarConfig); const { isOpen, setOpen } = useSidebarOpenState(); - const isSmallScreen = useMediaQuery( + const isSmallScreen = useMediaQuery( theme => theme.breakpoints.down('md'), { noSsr: true }, ); diff --git a/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx b/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx index 88d653cea5..bc38f5510c 100644 --- a/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx +++ b/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx @@ -15,11 +15,10 @@ */ import { useElementFilter } from '@backstage/core-plugin-api'; -import { BackstageTheme } from '@backstage/theme'; import BottomNavigation from '@material-ui/core/BottomNavigation'; import Box from '@material-ui/core/Box'; import IconButton from '@material-ui/core/IconButton'; -import { makeStyles } from '@material-ui/core/styles'; +import { Theme, makeStyles } from '@material-ui/core/styles'; import Drawer from '@material-ui/core/Drawer'; import Typography from '@material-ui/core/Typography'; import CloseIcon from '@material-ui/icons/Close'; @@ -51,7 +50,7 @@ type OverlayMenuProps = { children?: React.ReactNode; }; -const useStyles = makeStyles( +const useStyles = makeStyles( theme => ({ root: { position: 'fixed', diff --git a/packages/core-components/src/layout/Sidebar/Page.tsx b/packages/core-components/src/layout/Sidebar/Page.tsx index c0107256e1..09d5bd910c 100644 --- a/packages/core-components/src/layout/Sidebar/Page.tsx +++ b/packages/core-components/src/layout/Sidebar/Page.tsx @@ -13,9 +13,9 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; + import Box from '@material-ui/core/Box'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles, Theme } from '@material-ui/core/styles'; import useMediaQuery from '@material-ui/core/useMediaQuery'; import React, { createContext, @@ -34,7 +34,7 @@ import { SidebarPinStateProvider } from './SidebarPinStateContext'; export type SidebarPageClassKey = 'root'; const useStyles = makeStyles< - BackstageTheme, + Theme, { sidebarConfig: SidebarConfig; isPinned: boolean } >( theme => ({ @@ -107,10 +107,9 @@ export function SidebarPage(props: SidebarPageProps) { LocalStorage.setSidebarPinState(isPinned); }, [isPinned]); - const isMobile = useMediaQuery( - theme => theme.breakpoints.down('xs'), - { noSsr: true }, - ); + const isMobile = useMediaQuery(theme => theme.breakpoints.down('xs'), { + noSsr: true, + }); const toggleSidebarPinState = () => setIsPinned(!isPinned); diff --git a/packages/core-components/src/layout/Sidebar/SidebarGroup.tsx b/packages/core-components/src/layout/Sidebar/SidebarGroup.tsx index 2ce68cd51a..7944728af6 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarGroup.tsx +++ b/packages/core-components/src/layout/Sidebar/SidebarGroup.tsx @@ -15,11 +15,10 @@ * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; import BottomNavigationAction, { BottomNavigationActionProps, } from '@material-ui/core/BottomNavigationAction'; -import { makeStyles } from '@material-ui/core/styles'; +import { Theme, makeStyles } from '@material-ui/core/styles'; import React, { useContext } from 'react'; import { useLocation } from 'react-router-dom'; import { Link } from '../../components/Link/Link'; @@ -48,7 +47,7 @@ export interface SidebarGroupProps extends BottomNavigationActionProps { children?: React.ReactNode; } -const useStyles = makeStyles( +const useStyles = makeStyles( theme => ({ root: { flexGrow: 0, diff --git a/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx b/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx index 85ba923672..6b6951d023 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx +++ b/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx @@ -13,9 +13,9 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; + import Box from '@material-ui/core/Box'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles, Theme } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import classnames from 'classnames'; import React, { ReactNode, useContext, useEffect, useState } from 'react'; @@ -28,7 +28,7 @@ import { import { useSidebarOpenState } from './SidebarOpenStateContext'; const useStyles = makeStyles< - BackstageTheme, + Theme, { submenuConfig: SubmenuConfig; left: number } >( theme => ({ diff --git a/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx b/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx index d1925036bb..0503f58f1c 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx +++ b/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import React, { useContext, useState } from 'react'; import { resolvePath, useLocation, useResolvedPath } from 'react-router-dom'; import { makeStyles } from '@material-ui/core/styles'; @@ -21,7 +22,6 @@ import Typography from '@material-ui/core/Typography'; import { Link } from '../../components/Link'; import { IconComponent } from '@backstage/core-plugin-api'; import classnames from 'classnames'; -import { BackstageTheme } from '@backstage/theme'; import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown'; import ArrowDropUpIcon from '@material-ui/icons/ArrowDropUp'; import { SidebarItemWithSubmenuContext } from './config'; @@ -29,7 +29,7 @@ import { isLocationMatch } from './utils'; import Box from '@material-ui/core/Box'; import Button from '@material-ui/core/Button'; -const useStyles = makeStyles( +const useStyles = makeStyles( theme => ({ item: { height: 48, diff --git a/packages/dev-utils/src/components/EntityGridItem/EntityGridItem.tsx b/packages/dev-utils/src/components/EntityGridItem/EntityGridItem.tsx index a66550a4d2..55bac24a34 100644 --- a/packages/dev-utils/src/components/EntityGridItem/EntityGridItem.tsx +++ b/packages/dev-utils/src/components/EntityGridItem/EntityGridItem.tsx @@ -16,11 +16,10 @@ import { Entity } from '@backstage/catalog-model'; import { EntityProvider } from '@backstage/plugin-catalog-react'; -import { BackstageTheme } from '@backstage/theme'; -import { Grid, GridProps, makeStyles } from '@material-ui/core'; +import { Grid, GridProps, Theme, makeStyles } from '@material-ui/core'; import React from 'react'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles(theme => ({ root: ({ entity }) => ({ position: 'relative', diff --git a/plugins/airbrake/src/components/EntityAirbrakeWidget/EntityAirbrakeWidget.tsx b/plugins/airbrake/src/components/EntityAirbrakeWidget/EntityAirbrakeWidget.tsx index 3e82d60d81..666a7ffea2 100644 --- a/plugins/airbrake/src/components/EntityAirbrakeWidget/EntityAirbrakeWidget.tsx +++ b/plugins/airbrake/src/components/EntityAirbrakeWidget/EntityAirbrakeWidget.tsx @@ -22,7 +22,6 @@ import { Progress, } from '@backstage/core-components'; import { useApi } from '@backstage/core-plugin-api'; -import { BackstageTheme } from '@backstage/theme'; import { Grid, Typography } from '@material-ui/core'; import { makeStyles } from '@material-ui/core/styles'; import React from 'react'; @@ -31,11 +30,11 @@ import { airbrakeApiRef } from '../../api'; import { MissingAnnotationEmptyState } from '@backstage/plugin-catalog-react'; import { AIRBRAKE_PROJECT_ID_ANNOTATION, useProjectId } from '../useProjectId'; -const useStyles = makeStyles(() => ({ +const useStyles = makeStyles({ multilineText: { whiteSpace: 'pre-wrap', }, -})); +}); export const EntityAirbrakeWidget = ({ entity }: { entity: Entity }) => { const classes = useStyles(); diff --git a/plugins/api-docs/src/components/ApiDefinitionDialog/ApiDefinitionDialog.tsx b/plugins/api-docs/src/components/ApiDefinitionDialog/ApiDefinitionDialog.tsx index 2f82a0cc5a..6673420732 100644 --- a/plugins/api-docs/src/components/ApiDefinitionDialog/ApiDefinitionDialog.tsx +++ b/plugins/api-docs/src/components/ApiDefinitionDialog/ApiDefinitionDialog.tsx @@ -16,7 +16,6 @@ import { ApiEntity } from '@backstage/catalog-model'; import { useApi } from '@backstage/core-plugin-api'; -import { BackstageTheme } from '@backstage/theme'; import { Box, Button, @@ -33,7 +32,7 @@ import React, { useEffect } from 'react'; import { apiDocsConfigRef } from '../../config'; import { PlainApiDefinitionWidget } from '../PlainApiDefinitionWidget'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles(theme => ({ fullHeightDialog: { height: 'calc(100% - 64px)', }, diff --git a/plugins/api-docs/src/components/GraphQlDefinitionWidget/GraphQlDefinition.tsx b/plugins/api-docs/src/components/GraphQlDefinitionWidget/GraphQlDefinition.tsx index 6ad8643111..bf45a0e637 100644 --- a/plugins/api-docs/src/components/GraphQlDefinitionWidget/GraphQlDefinition.tsx +++ b/plugins/api-docs/src/components/GraphQlDefinitionWidget/GraphQlDefinition.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; import { makeStyles } from '@material-ui/core/styles'; import { DocExplorer, @@ -26,7 +25,7 @@ import 'graphiql/graphiql.css'; import { buildSchema } from 'graphql'; import React from 'react'; -const useStyles = makeStyles(() => ({ +const useStyles = makeStyles({ root: { height: '100%', display: 'flex', @@ -46,7 +45,7 @@ const useStyles = makeStyles(() => ({ }, }, }, -})); +}); type Props = { definition: string; diff --git a/plugins/api-docs/src/components/GrpcApiDefinitionWidget/GrpcApiDefinitionWidget.tsx b/plugins/api-docs/src/components/GrpcApiDefinitionWidget/GrpcApiDefinitionWidget.tsx index b6bf317099..8363ebaedc 100644 --- a/plugins/api-docs/src/components/GrpcApiDefinitionWidget/GrpcApiDefinitionWidget.tsx +++ b/plugins/api-docs/src/components/GrpcApiDefinitionWidget/GrpcApiDefinitionWidget.tsx @@ -17,7 +17,6 @@ import React from 'react'; import { CodeSnippet } from '@backstage/core-components'; import { useTheme } from '@material-ui/core/styles'; -import { BackstageTheme } from '@backstage/theme'; /** @public */ export type GrpcApiDefinitionWidgetProps = { @@ -28,7 +27,7 @@ export type GrpcApiDefinitionWidgetProps = { export const GrpcApiDefinitionWidget = ( props: GrpcApiDefinitionWidgetProps, ) => { - const theme = useTheme(); + const theme = useTheme(); return ( { const { definition } = props; - const theme = useTheme(); + const theme = useTheme(); return ( (theme => ({ +const useStyles = makeStyles(theme => ({ tabs: { background: theme.palette.background.paper, }, diff --git a/plugins/azure-sites/src/components/AzureSitesOverviewTableComponent/AzureSitesOverviewTable.tsx b/plugins/azure-sites/src/components/AzureSitesOverviewTableComponent/AzureSitesOverviewTable.tsx index 16321cd464..44f5f1697d 100644 --- a/plugins/azure-sites/src/components/AzureSitesOverviewTableComponent/AzureSitesOverviewTable.tsx +++ b/plugins/azure-sites/src/components/AzureSitesOverviewTableComponent/AzureSitesOverviewTable.tsx @@ -39,7 +39,6 @@ import OpenInNewIcon from '@material-ui/icons/OpenInNew'; import { DateTime } from 'luxon'; import { useApi } from '@backstage/core-plugin-api'; import { azureSiteApiRef } from '../../api'; -import { BackstageTheme } from '@backstage/theme'; type States = 'Waiting' | 'Running' | 'Paused' | 'Failed' | 'Stopped'; type Kinds = 'app' | 'functionapp'; @@ -50,7 +49,7 @@ const State = ({ value }: { value: States }) => { common: { black }, status: { ok, error }, }, - } = useTheme(); + } = useTheme(); const colorMap = { Waiting: '#dcbc21', diff --git a/plugins/catalog-graph/README.md b/plugins/catalog-graph/README.md index 010a129b0f..f00d11810f 100644 --- a/plugins/catalog-graph/README.md +++ b/plugins/catalog-graph/README.md @@ -90,7 +90,7 @@ To use the catalog graph plugin, you have to add some things to your Backstage a Copy the default implementation `DefaultRenderNode.tsx` and add more classes to the styles: ```typescript -const useStyles = makeStyles( +const useStyles = makeStyles( theme => ({ node: { … diff --git a/plugins/catalog-react/src/components/CatalogFilterLayout/CatalogFilterLayout.tsx b/plugins/catalog-react/src/components/CatalogFilterLayout/CatalogFilterLayout.tsx index 1a1404edf2..1a0c446c9e 100644 --- a/plugins/catalog-react/src/components/CatalogFilterLayout/CatalogFilterLayout.tsx +++ b/plugins/catalog-react/src/components/CatalogFilterLayout/CatalogFilterLayout.tsx @@ -20,12 +20,12 @@ import { Button, Drawer, Grid, + Theme, Typography, useMediaQuery, useTheme, } from '@material-ui/core'; import FilterListIcon from '@material-ui/icons/FilterList'; -import { BackstageTheme } from '@backstage/theme'; /** @public */ export const Filters = (props: { @@ -35,10 +35,10 @@ export const Filters = (props: { drawerAnchor?: 'left' | 'right' | 'top' | 'bottom'; }; }) => { - const isScreenSmallerThanBreakpoint = useMediaQuery(theme => + const isScreenSmallerThanBreakpoint = useMediaQuery((theme: Theme) => theme.breakpoints.down(props.options?.drawerBreakpoint ?? 'md'), ); - const theme = useTheme(); + const theme = useTheme(); const [filterDrawerOpen, setFilterDrawerOpen] = useState(false); return isScreenSmallerThanBreakpoint ? ( diff --git a/plugins/catalog-react/src/components/MissingAnnotationEmptyState/MissingAnnotationEmptyState.tsx b/plugins/catalog-react/src/components/MissingAnnotationEmptyState/MissingAnnotationEmptyState.tsx index 284025d8cd..4d9329e664 100644 --- a/plugins/catalog-react/src/components/MissingAnnotationEmptyState/MissingAnnotationEmptyState.tsx +++ b/plugins/catalog-react/src/components/MissingAnnotationEmptyState/MissingAnnotationEmptyState.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; import Box from '@material-ui/core/Box'; import Button from '@material-ui/core/Button'; import { makeStyles } from '@material-ui/core/styles'; @@ -27,7 +26,7 @@ import { useEntity } from '../../hooks'; /** @public */ export type MissingAnnotationEmptyStateClassKey = 'code'; -const useStyles = makeStyles( +const useStyles = makeStyles( theme => ({ code: { borderRadius: 6, diff --git a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx index d9b32289ae..950bf5ea70 100644 --- a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx +++ b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx @@ -27,7 +27,6 @@ import { ListItemText, makeStyles, MenuItem, - Theme, Typography, } from '@material-ui/core'; import SettingsIcon from '@material-ui/icons/Settings'; @@ -48,7 +47,7 @@ export type CatalogReactUserListPickerClassKey = | 'menuItem' | 'groupWrapper'; -const useStyles = makeStyles( +const useStyles = makeStyles( theme => ({ root: { backgroundColor: 'rgba(0, 0, 0, .11)', diff --git a/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx b/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx index a193a90d05..8878cb827f 100644 --- a/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx +++ b/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; import { Button, makeStyles, Typography } from '@material-ui/core'; import React from 'react'; import { CodeSnippet } from '@backstage/core-components'; @@ -24,7 +23,7 @@ const ENTITY_YAML = `metadata: labels: javaVersion: 1.2.3`; -const useStyles = makeStyles( +const useStyles = makeStyles( theme => ({ code: { borderRadius: 6, diff --git a/plugins/catalog/src/components/EntityLinksCard/EntityLinksEmptyState.tsx b/plugins/catalog/src/components/EntityLinksCard/EntityLinksEmptyState.tsx index f55527c78a..59ab3f3db2 100644 --- a/plugins/catalog/src/components/EntityLinksCard/EntityLinksEmptyState.tsx +++ b/plugins/catalog/src/components/EntityLinksCard/EntityLinksEmptyState.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; import { Button, makeStyles, Typography } from '@material-ui/core'; import React from 'react'; import { CodeSnippet } from '@backstage/core-components'; @@ -29,7 +28,7 @@ const ENTITY_YAML = `metadata: /** @public */ export type EntityLinksEmptyStateClassKey = 'code'; -const useStyles = makeStyles( +const useStyles = makeStyles( theme => ({ code: { borderRadius: 6, diff --git a/plugins/catalog/src/components/EntityNotFound/EntityNotFound.tsx b/plugins/catalog/src/components/EntityNotFound/EntityNotFound.tsx index fca763c37b..d8d9fe0855 100644 --- a/plugins/catalog/src/components/EntityNotFound/EntityNotFound.tsx +++ b/plugins/catalog/src/components/EntityNotFound/EntityNotFound.tsx @@ -17,10 +17,9 @@ import React from 'react'; import { Grid, Button, Typography } from '@material-ui/core'; import { makeStyles } from '@material-ui/core/styles'; -import { BackstageTheme } from '@backstage/theme'; import { Illo } from './Illo'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles(theme => ({ container: { paddingTop: theme.spacing(24), paddingLeft: theme.spacing(8), diff --git a/plugins/cicd-statistics/src/components/chart-filters.tsx b/plugins/cicd-statistics/src/components/chart-filters.tsx index 03cbea5dd0..026e81fd74 100644 --- a/plugins/cicd-statistics/src/components/chart-filters.tsx +++ b/plugins/cicd-statistics/src/components/chart-filters.tsx @@ -27,7 +27,6 @@ import { Switch, Tooltip, Typography, - Theme, makeStyles, } from '@material-ui/core'; import ShowChartIcon from '@material-ui/icons/ShowChart'; @@ -54,7 +53,7 @@ import { Toggle } from './toggle'; import { DurationSlider } from './duration-slider'; import { Label } from './label'; -export const useStyles = makeStyles( +export const useStyles = makeStyles( theme => ({ rootCard: { padding: theme.spacing(0, 0, 0, 0), diff --git a/plugins/cicd-statistics/src/components/label.tsx b/plugins/cicd-statistics/src/components/label.tsx index fe064d30a6..1c9a05b303 100644 --- a/plugins/cicd-statistics/src/components/label.tsx +++ b/plugins/cicd-statistics/src/components/label.tsx @@ -15,9 +15,9 @@ */ import React, { PropsWithChildren } from 'react'; -import { Typography, Theme, makeStyles } from '@material-ui/core'; +import { Typography, makeStyles } from '@material-ui/core'; -export const useStyles = makeStyles( +export const useStyles = makeStyles( theme => ({ label: { fontWeight: 'normal', diff --git a/plugins/cicd-statistics/src/entity-page.tsx b/plugins/cicd-statistics/src/entity-page.tsx index db5cba42aa..25b8477f61 100644 --- a/plugins/cicd-statistics/src/entity-page.tsx +++ b/plugins/cicd-statistics/src/entity-page.tsx @@ -15,7 +15,7 @@ */ import React, { useCallback, useState, useMemo, useEffect } from 'react'; -import { Grid, makeStyles, Theme } from '@material-ui/core'; +import { Grid, makeStyles } from '@material-ui/core'; import { Alert } from '@material-ui/lab'; import { useEntity } from '@backstage/plugin-catalog-react'; import { useApi, errorApiRef } from '@backstage/core-plugin-api'; @@ -57,7 +57,7 @@ export function EntityPageCicdCharts() { )); } -const useStyles = makeStyles( +const useStyles = makeStyles( theme => ({ pane: { padding: theme.spacing(1, 1, 1, 1), diff --git a/plugins/cloudbuild/src/components/Cards/Cards.tsx b/plugins/cloudbuild/src/components/Cards/Cards.tsx index 2b7a8607b7..11efe520e0 100644 --- a/plugins/cloudbuild/src/components/Cards/Cards.tsx +++ b/plugins/cloudbuild/src/components/Cards/Cards.tsx @@ -19,7 +19,7 @@ import { useWorkflowRuns, WorkflowRun } from '../useWorkflowRuns'; import { WorkflowRunsTable } from '../WorkflowRunsTable'; import { useEntity } from '@backstage/plugin-catalog-react'; import { WorkflowRunStatus } from '../WorkflowRunStatus'; -import { Theme, makeStyles, LinearProgress } from '@material-ui/core'; +import { makeStyles, LinearProgress } from '@material-ui/core'; import ExternalLinkIcon from '@material-ui/icons/Launch'; import { CLOUDBUILD_ANNOTATION } from '../useProjectName'; @@ -31,7 +31,7 @@ import { } from '@backstage/core-components'; import { errorApiRef, useApi } from '@backstage/core-plugin-api'; -const useStyles = makeStyles({ +const useStyles = makeStyles({ externalLinkIcon: { fontSize: 'inherit', verticalAlign: 'bottom', diff --git a/plugins/cloudbuild/src/components/WorkflowRunDetails/WorkflowRunDetails.tsx b/plugins/cloudbuild/src/components/WorkflowRunDetails/WorkflowRunDetails.tsx index a35d9b6f6c..f55d7957a3 100644 --- a/plugins/cloudbuild/src/components/WorkflowRunDetails/WorkflowRunDetails.tsx +++ b/plugins/cloudbuild/src/components/WorkflowRunDetails/WorkflowRunDetails.tsx @@ -25,7 +25,6 @@ import { TableCell, TableContainer, TableRow, - Theme, Typography, } from '@material-ui/core'; import ExternalLinkIcon from '@material-ui/icons/Launch'; @@ -36,7 +35,7 @@ import { WorkflowRunStatus } from '../WorkflowRunStatus'; import { useWorkflowRunsDetails } from './useWorkflowRunsDetails'; import { Breadcrumbs, Link, WarningPanel } from '@backstage/core-components'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles(theme => ({ root: { maxWidth: 720, margin: theme.spacing(2), diff --git a/plugins/code-coverage/src/components/CoverageHistoryChart/CoverageHistoryChart.tsx b/plugins/code-coverage/src/components/CoverageHistoryChart/CoverageHistoryChart.tsx index 09f499fafd..3cb4ad5d56 100644 --- a/plugins/code-coverage/src/components/CoverageHistoryChart/CoverageHistoryChart.tsx +++ b/plugins/code-coverage/src/components/CoverageHistoryChart/CoverageHistoryChart.tsx @@ -15,7 +15,6 @@ */ import { useEntity } from '@backstage/plugin-catalog-react'; -import { BackstageTheme } from '@backstage/theme'; import { Box, Card, @@ -50,7 +49,7 @@ import { DateTime } from 'luxon'; type Coverage = 'line' | 'branch'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles(theme => ({ trendDown: { color: theme.palette.status.warning, }, diff --git a/plugins/codescene/src/components/Gauge/Gauge.tsx b/plugins/codescene/src/components/Gauge/Gauge.tsx index 97e6b33daf..df91136b6a 100644 --- a/plugins/codescene/src/components/Gauge/Gauge.tsx +++ b/plugins/codescene/src/components/Gauge/Gauge.tsx @@ -13,13 +13,14 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { BackstagePalette, BackstageTheme } from '@backstage/theme'; + import { makeStyles, useTheme } from '@material-ui/core/styles'; +import { Palette } from '@material-ui/core/styles/createPalette'; import Tooltip from '@material-ui/core/Tooltip'; import { Circle } from 'rc-progress'; import React, { useEffect, useState } from 'react'; -const useStyles = makeStyles( +const useStyles = makeStyles( theme => ({ root: { position: 'relative', @@ -51,7 +52,7 @@ export type GaugeProps = { }; export type GaugePropsGetColorOptions = { - palette: BackstagePalette; + palette: Palette; value: number; max: number; }; @@ -78,11 +79,10 @@ export const getProgressColor: GaugePropsGetColor = ({ /** * Circular Progress Bar - * */ export function Gauge(props: GaugeProps) { const classes = useStyles(props); - const { palette } = useTheme(); + const { palette } = useTheme(); const [hoverRef, setHoverRef] = useState(null); const [open, setOpen] = useState(false); const { value, max, tooltipDelay, tooltipText } = { diff --git a/plugins/cost-insights/src/utils/styles.ts b/plugins/cost-insights/src/utils/styles.ts index cec9c0150d..c4c330138b 100644 --- a/plugins/cost-insights/src/utils/styles.ts +++ b/plugins/cost-insights/src/utils/styles.ts @@ -21,9 +21,9 @@ import { getLuminance, lighten, makeStyles, + Theme, } from '@material-ui/core'; import { CostInsightsTheme, CostInsightsThemeOptions } from '../types'; -import { BackstageTheme } from '@backstage/theme'; export const costInsightsLightTheme = { palette: { @@ -231,7 +231,7 @@ export const useCostInsightsStyles = makeStyles(theme => ({ }, })); -export const useCostInsightsTabsStyles = makeStyles(theme => ({ +export const useCostInsightsTabsStyles = makeStyles(theme => ({ tabs: { borderBottom: `1px solid ${theme.palette.textVerySubtle}`, backgroundColor: brighten(theme.palette.background.default), diff --git a/plugins/entity-feedback/src/components/FeedbackResponseTable/FeedbackResponseTable.tsx b/plugins/entity-feedback/src/components/FeedbackResponseTable/FeedbackResponseTable.tsx index 654cfd1413..863cdcc6b6 100644 --- a/plugins/entity-feedback/src/components/FeedbackResponseTable/FeedbackResponseTable.tsx +++ b/plugins/entity-feedback/src/components/FeedbackResponseTable/FeedbackResponseTable.tsx @@ -18,7 +18,6 @@ import { ErrorPanel, Table } from '@backstage/core-components'; import { useApi } from '@backstage/core-plugin-api'; import { EntityRefLink } from '@backstage/plugin-catalog-react'; import { FeedbackResponse } from '@backstage/plugin-entity-feedback-common'; -import { BackstageTheme } from '@backstage/theme'; import { Chip, makeStyles } from '@material-ui/core'; import CheckIcon from '@material-ui/icons/Check'; import React from 'react'; @@ -28,7 +27,7 @@ import { entityFeedbackApiRef } from '../../api'; type ResponseRow = Omit; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles(theme => ({ consentCheck: { color: theme.palette.status.ok, }, diff --git a/plugins/explore/src/components/ToolCard/ToolCard.tsx b/plugins/explore/src/components/ToolCard/ToolCard.tsx index c2d9079f8f..47c2cfb41d 100644 --- a/plugins/explore/src/components/ToolCard/ToolCard.tsx +++ b/plugins/explore/src/components/ToolCard/ToolCard.tsx @@ -15,7 +15,6 @@ */ import { ExploreTool } from '@backstage/plugin-explore-react'; -import { BackstageTheme } from '@backstage/theme'; import { Box, Card, @@ -24,6 +23,7 @@ import { CardMedia, Chip, makeStyles, + Theme, Typography, } from '@material-ui/core'; import { LinkButton } from '@backstage/core-components'; @@ -32,7 +32,7 @@ import React from 'react'; // TODO: Align styling between Domain and ToolCard -const useStyles = makeStyles( +const useStyles = makeStyles( theme => ({ media: { height: 128, diff --git a/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx b/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx index 364033ce73..9cde3a51c2 100644 --- a/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx +++ b/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx @@ -23,7 +23,6 @@ import { TableBody, TableCell, TableRow, - Theme, Typography, } from '@material-ui/core'; import React from 'react'; @@ -43,7 +42,7 @@ import { import { useApi, useRouteRef } from '@backstage/core-plugin-api'; import { rootRouteRef } from '../../routes'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles(theme => ({ root: { maxWidth: 720, margin: theme.spacing(2), diff --git a/plugins/github-actions/src/components/Cards/Cards.tsx b/plugins/github-actions/src/components/Cards/Cards.tsx index 205288cba7..0075e3f775 100644 --- a/plugins/github-actions/src/components/Cards/Cards.tsx +++ b/plugins/github-actions/src/components/Cards/Cards.tsx @@ -15,12 +15,7 @@ */ import { useEntity } from '@backstage/plugin-catalog-react'; -import { - LinearProgress, - makeStyles, - Theme, - Typography, -} from '@material-ui/core'; +import { LinearProgress, makeStyles, Typography } from '@material-ui/core'; import ExternalLinkIcon from '@material-ui/icons/Launch'; import React, { useEffect } from 'react'; import { GITHUB_ACTIONS_ANNOTATION } from '../getProjectNameFromEntity'; @@ -36,7 +31,7 @@ import { } from '@backstage/core-components'; import { getHostnameFromEntity } from '../getHostnameFromEntity'; -const useStyles = makeStyles({ +const useStyles = makeStyles({ externalLinkIcon: { fontSize: 'inherit', verticalAlign: 'bottom', diff --git a/plugins/github-actions/src/components/WorkflowRunLogs/WorkflowRunLogs.tsx b/plugins/github-actions/src/components/WorkflowRunLogs/WorkflowRunLogs.tsx index 2bf8d3356b..c83da2efdd 100644 --- a/plugins/github-actions/src/components/WorkflowRunLogs/WorkflowRunLogs.tsx +++ b/plugins/github-actions/src/components/WorkflowRunLogs/WorkflowRunLogs.tsx @@ -23,7 +23,6 @@ import { Fade, makeStyles, Modal, - Theme, Tooltip, Typography, Zoom, @@ -35,7 +34,7 @@ import { getProjectNameFromEntity } from '../getProjectNameFromEntity'; import { useDownloadWorkflowRunLogs } from './useDownloadWorkflowRunLogs'; import { getHostnameFromEntity } from '../getHostnameFromEntity'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles(theme => ({ button: { order: -1, marginRight: 0, diff --git a/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx b/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx index 40c2c168a8..cdd924a6d1 100644 --- a/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx +++ b/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx @@ -19,14 +19,13 @@ import { Tabs, Tab, makeStyles, Typography, Divider } from '@material-ui/core'; import 'graphiql/graphiql.css'; import { StorageBucket } from '../../lib/storage'; import { GraphQLEndpoint } from '../../lib/api'; -import { BackstageTheme } from '@backstage/theme'; import { Progress } from '@backstage/core-components'; const GraphiQL = React.lazy(() => import('graphiql').then(m => ({ default: m.GraphiQL })), ); -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles(theme => ({ root: { height: '100%', display: 'flex', diff --git a/plugins/graphql-voyager/src/components/GraphQLVoyagerBrowser/GraphQLVoyagerBrowser.tsx b/plugins/graphql-voyager/src/components/GraphQLVoyagerBrowser/GraphQLVoyagerBrowser.tsx index d2f9262983..772c70b0fa 100644 --- a/plugins/graphql-voyager/src/components/GraphQLVoyagerBrowser/GraphQLVoyagerBrowser.tsx +++ b/plugins/graphql-voyager/src/components/GraphQLVoyagerBrowser/GraphQLVoyagerBrowser.tsx @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import { GraphQLVoyagerEndpoint, introspectionQuery, @@ -20,18 +21,17 @@ import { import { useState } from 'react'; import { makeStyles, Tab, Tabs, Typography } from '@material-ui/core'; import React, { Suspense } from 'react'; -import { BackstageTheme } from '@backstage/theme'; import { Content, ErrorPanel, Progress } from '@backstage/core-components'; import { Voyager } from 'graphql-voyager'; import useAsync from 'react-use/lib/useAsync'; -const useStyles = makeStyles(() => ({ +const useStyles = makeStyles({ root: { height: '100%', display: 'flex', flexFlow: 'column nowrap', }, -})); +}); type GraphQLVoyagerBrowserProps = { endpoints: GraphQLVoyagerEndpoint[]; diff --git a/plugins/home/src/homePageComponents/FeaturedDocsCard/Content.tsx b/plugins/home/src/homePageComponents/FeaturedDocsCard/Content.tsx index dfa83ce074..eb8d78b0cc 100644 --- a/plugins/home/src/homePageComponents/FeaturedDocsCard/Content.tsx +++ b/plugins/home/src/homePageComponents/FeaturedDocsCard/Content.tsx @@ -27,7 +27,7 @@ import { catalogApiRef, CatalogApi } from '@backstage/plugin-catalog-react'; import { useApi } from '@backstage/core-plugin-api'; import { EntityFilterQuery } from '@backstage/catalog-client'; -import { makeStyles, Theme, Typography } from '@material-ui/core'; +import { makeStyles, Typography } from '@material-ui/core'; /** * Props customizing the component. @@ -47,7 +47,7 @@ export type FeaturedDocsCardProps = { subLinkText?: string; }; -const useStyles = makeStyles( +const useStyles = makeStyles( theme => ({ docDescription: { fontSize: theme.typography.body1.fontSize, diff --git a/plugins/ilert/src/components/ILertCard/ILertCardEmptyState.tsx b/plugins/ilert/src/components/ILertCard/ILertCardEmptyState.tsx index 966caea079..f81cfbc0a4 100644 --- a/plugins/ilert/src/components/ILertCard/ILertCardEmptyState.tsx +++ b/plugins/ilert/src/components/ILertCard/ILertCardEmptyState.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; import Card from '@material-ui/core/Card'; import CardContent from '@material-ui/core/CardContent'; import CardHeader from '@material-ui/core/CardHeader'; @@ -37,7 +36,7 @@ spec: lifecycle: production owner: guest`; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles(theme => ({ code: { borderRadius: 6, margin: theme.spacing(2, 0), diff --git a/plugins/jenkins/src/components/Cards/Cards.tsx b/plugins/jenkins/src/components/Cards/Cards.tsx index 44bbc06f65..1cbc3e5d9f 100644 --- a/plugins/jenkins/src/components/Cards/Cards.tsx +++ b/plugins/jenkins/src/components/Cards/Cards.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { LinearProgress, makeStyles, Theme } from '@material-ui/core'; +import { LinearProgress, makeStyles } from '@material-ui/core'; import ExternalLinkIcon from '@material-ui/icons/Launch'; import { DateTime, Duration } from 'luxon'; import React from 'react'; @@ -29,7 +29,7 @@ import { } from '@backstage/core-components'; import { Project } from '../../api/JenkinsApi'; -const useStyles = makeStyles({ +const useStyles = makeStyles({ externalLinkIcon: { fontSize: 'inherit', verticalAlign: 'bottom', diff --git a/plugins/pagerduty/src/components/ChangeEvents/ChangeEventListItem.tsx b/plugins/pagerduty/src/components/ChangeEvents/ChangeEventListItem.tsx index 7b531bf1de..8dc5bf1f33 100644 --- a/plugins/pagerduty/src/components/ChangeEvents/ChangeEventListItem.tsx +++ b/plugins/pagerduty/src/components/ChangeEvents/ChangeEventListItem.tsx @@ -28,9 +28,8 @@ import { import { DateTime, Duration } from 'luxon'; import { PagerDutyChangeEvent } from '../types'; import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser'; -import { BackstageTheme } from '@backstage/theme'; -const useStyles = makeStyles({ +const useStyles = makeStyles({ denseListIcon: { marginRight: 0, display: 'flex', diff --git a/plugins/pagerduty/src/components/Incident/IncidentListItem.tsx b/plugins/pagerduty/src/components/Incident/IncidentListItem.tsx index b23fcb8490..3ee92f1470 100644 --- a/plugins/pagerduty/src/components/Incident/IncidentListItem.tsx +++ b/plugins/pagerduty/src/components/Incident/IncidentListItem.tsx @@ -30,10 +30,9 @@ import Warning from '@material-ui/icons/Warning'; import { DateTime, Duration } from 'luxon'; import { PagerDutyIncident } from '../types'; import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser'; -import { BackstageTheme } from '@backstage/theme'; import { Link } from '@backstage/core-components'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles(theme => ({ denseListIcon: { marginRight: 0, display: 'flex', diff --git a/plugins/pagerduty/src/components/TriggerButton/index.tsx b/plugins/pagerduty/src/components/TriggerButton/index.tsx index 1c12103d73..60adbd38c0 100644 --- a/plugins/pagerduty/src/components/TriggerButton/index.tsx +++ b/plugins/pagerduty/src/components/TriggerButton/index.tsx @@ -13,14 +13,13 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import React, { useCallback, ReactNode, useState } from 'react'; import { makeStyles, Button } from '@material-ui/core'; -import { BackstageTheme } from '@backstage/theme'; - import { usePagerdutyEntity } from '../../hooks'; import { TriggerDialog } from '../TriggerDialog'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles(theme => ({ buttonStyle: { backgroundColor: theme.palette.error.main, color: theme.palette.error.contrastText, diff --git a/plugins/playlist/src/components/CreatePlaylistButton/CreatePlaylistButton.tsx b/plugins/playlist/src/components/CreatePlaylistButton/CreatePlaylistButton.tsx index ac32097680..26c7b3fd45 100644 --- a/plugins/playlist/src/components/CreatePlaylistButton/CreatePlaylistButton.tsx +++ b/plugins/playlist/src/components/CreatePlaylistButton/CreatePlaylistButton.tsx @@ -20,13 +20,12 @@ import { useRouteRef, alertApiRef, } from '@backstage/core-plugin-api'; -import { BackstageTheme } from '@backstage/theme'; import { usePermission } from '@backstage/plugin-permission-react'; import { permissions, PlaylistMetadata, } from '@backstage/plugin-playlist-common'; -import { Button, IconButton, useMediaQuery } from '@material-ui/core'; +import { Button, IconButton, Theme, useMediaQuery } from '@material-ui/core'; import AddCircleOutline from '@material-ui/icons/AddCircleOutline'; import React, { useCallback, useState } from 'react'; import { useNavigate } from 'react-router-dom'; @@ -49,7 +48,7 @@ export const CreatePlaylistButton = () => { const { allowed } = usePermission({ permission: permissions.playlistListCreate, }); - const isXSScreen = useMediaQuery(theme => + const isXSScreen = useMediaQuery(theme => theme.breakpoints.down('xs'), ); diff --git a/plugins/playlist/src/components/PersonalListPicker/PersonalListPicker.tsx b/plugins/playlist/src/components/PersonalListPicker/PersonalListPicker.tsx index a8537cb213..0691d26732 100644 --- a/plugins/playlist/src/components/PersonalListPicker/PersonalListPicker.tsx +++ b/plugins/playlist/src/components/PersonalListPicker/PersonalListPicker.tsx @@ -29,7 +29,6 @@ import { ListItemText, makeStyles, MenuItem, - Theme, Typography, } from '@material-ui/core'; import PlaylistPlayIcon from '@material-ui/icons/PlaylistPlay'; @@ -75,7 +74,7 @@ export class PersonalListFilter implements PlaylistFilter { } } -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles(theme => ({ root: { backgroundColor: 'rgba(0, 0, 0, .11)', boxShadow: 'none', diff --git a/plugins/puppetdb/src/components/ReportDetailsPage/ReportDetailsLogsTable.tsx b/plugins/puppetdb/src/components/ReportDetailsPage/ReportDetailsLogsTable.tsx index f512fcd935..d12b432314 100644 --- a/plugins/puppetdb/src/components/ReportDetailsPage/ReportDetailsLogsTable.tsx +++ b/plugins/puppetdb/src/components/ReportDetailsPage/ReportDetailsLogsTable.tsx @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import Typography from '@material-ui/core/Typography'; import React from 'react'; import { puppetDbApiRef, PuppetDbReportLog } from '../../api'; @@ -24,13 +25,12 @@ import { import useAsync from 'react-use/lib/useAsync'; import { useApi } from '@backstage/core-plugin-api'; import { makeStyles } from '@material-ui/core/styles'; -import { BackstageTheme } from '@backstage/theme'; type ReportLogsTableProps = { hash: string; }; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles(theme => ({ empty: { padding: theme.spacing(2), display: 'flex', diff --git a/plugins/puppetdb/src/components/ReportDetailsPage/ReportDetailsPage.tsx b/plugins/puppetdb/src/components/ReportDetailsPage/ReportDetailsPage.tsx index db6536fce4..c7da8df36b 100644 --- a/plugins/puppetdb/src/components/ReportDetailsPage/ReportDetailsPage.tsx +++ b/plugins/puppetdb/src/components/ReportDetailsPage/ReportDetailsPage.tsx @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import { Link as RouterLink, useParams } from 'react-router-dom'; import { Breadcrumbs, Link } from '@backstage/core-components'; import { makeStyles } from '@material-ui/core/styles'; @@ -27,11 +28,10 @@ import { Typography, Tabs, } from '@material-ui/core'; -import { BackstageTheme } from '@backstage/theme'; import { ReportDetailsEventsTable } from './ReportDetailsEventsTable'; import { ReportDetailsLogsTable } from './ReportDetailsLogsTable'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles(theme => ({ cards: { marginTop: theme.spacing(2), }, diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.tsx index 608af1a0bf..1180c8f106 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.tsx @@ -15,14 +15,13 @@ */ import React from 'react'; -import { makeStyles, useTheme } from '@material-ui/core'; +import { Theme, makeStyles, useTheme } from '@material-ui/core'; import { ItemCardHeader } from '@backstage/core-components'; -import { BackstageTheme } from '@backstage/theme'; import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common'; import { FavoriteEntity } from '@backstage/plugin-catalog-react'; const useStyles = makeStyles< - BackstageTheme, + Theme, { cardFontColor: string; cardBackgroundImage: string; @@ -55,7 +54,7 @@ export const CardHeader = (props: CardHeaderProps) => { spec: { type }, }, } = props; - const { getPageTheme } = useTheme(); + const { getPageTheme } = useTheme(); const themeForType = getPageTheme({ themeId: type }); const styles = useStyles({ diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/CardLink.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/CardLink.tsx index 9bdb3cf7fb..839d6c7ac1 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/CardLink.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/CardLink.tsx @@ -13,8 +13,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import { IconComponent } from '@backstage/core-plugin-api'; -import { BackstageTheme } from '@backstage/theme'; import { Link } from '@backstage/core-components'; import { makeStyles } from '@material-ui/core'; import React from 'react'; @@ -25,7 +25,7 @@ interface CardLinkProps { url: string; } -const useStyles = makeStyles(() => ({ +const useStyles = makeStyles(() => ({ linkText: { display: 'inline-flex', alignItems: 'center', diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx index 82dc46266d..7850137945 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import { RELATION_OWNED_BY } from '@backstage/catalog-model'; import { MarkdownContent, UserIcon } from '@backstage/core-components'; import { IconComponent, useApp } from '@backstage/core-plugin-api'; @@ -21,7 +22,6 @@ import { getEntityRelations, } from '@backstage/plugin-catalog-react'; import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common'; -import { BackstageTheme } from '@backstage/theme'; import { Box, Card, @@ -32,13 +32,14 @@ import { Button, Grid, makeStyles, + Theme, } from '@material-ui/core'; import LanguageIcon from '@material-ui/icons/Language'; import React from 'react'; import { CardHeader } from './CardHeader'; import { CardLink } from './CardLink'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles(theme => ({ box: { overflow: 'hidden', textOverflow: 'ellipsis', diff --git a/plugins/scaffolder-react/src/next/components/Workflow/Workflow.tsx b/plugins/scaffolder-react/src/next/components/Workflow/Workflow.tsx index c02f3c2757..c6030930c5 100644 --- a/plugins/scaffolder-react/src/next/components/Workflow/Workflow.tsx +++ b/plugins/scaffolder-react/src/next/components/Workflow/Workflow.tsx @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import React, { useEffect } from 'react'; import { Content, @@ -22,16 +23,14 @@ import { } from '@backstage/core-components'; import { stringifyEntityRef } from '@backstage/catalog-model'; import { makeStyles } from '@material-ui/core'; -import { BackstageTheme } from '@backstage/theme'; import { errorApiRef, useApi } from '@backstage/core-plugin-api'; import { useTemplateParameterSchema } from '../../hooks/useTemplateParameterSchema'; import { Stepper, type StepperProps } from '../Stepper/Stepper'; import { SecretsContextProvider } from '../../../secrets/SecretsContext'; - import { useFilteredSchemaProperties } from '../../hooks/useFilteredSchemaProperties'; import { ReviewStepProps } from '@backstage/plugin-scaffolder-react'; -const useStyles = makeStyles(() => ({ +const useStyles = makeStyles({ markdown: { /** to make the styles for React Markdown not leak into the description */ '& :first-child': { @@ -41,7 +40,7 @@ const useStyles = makeStyles(() => ({ marginBottom: 0, }, }, -})); +}); /** * @alpha diff --git a/plugins/scaffolder/src/components/ListTasksPage/OwnerListPicker.tsx b/plugins/scaffolder/src/components/ListTasksPage/OwnerListPicker.tsx index 86384275a7..fdb13b68a0 100644 --- a/plugins/scaffolder/src/components/ListTasksPage/OwnerListPicker.tsx +++ b/plugins/scaffolder/src/components/ListTasksPage/OwnerListPicker.tsx @@ -21,7 +21,6 @@ import { ListItemText, makeStyles, MenuItem, - Theme, Typography, } from '@material-ui/core'; import SettingsIcon from '@material-ui/icons/Settings'; @@ -29,7 +28,7 @@ import React, { Fragment } from 'react'; import AllIcon from '@material-ui/icons/FontDownload'; -const useStyles = makeStyles( +const useStyles = makeStyles( theme => ({ root: { backgroundColor: 'rgba(0, 0, 0, .11)', diff --git a/plugins/scaffolder/src/components/OngoingTask/ContextMenu.tsx b/plugins/scaffolder/src/components/OngoingTask/ContextMenu.tsx index 166c26e854..1612b943c2 100644 --- a/plugins/scaffolder/src/components/OngoingTask/ContextMenu.tsx +++ b/plugins/scaffolder/src/components/OngoingTask/ContextMenu.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; + import { IconButton, ListItemIcon, @@ -22,6 +22,7 @@ import { MenuItem, MenuList, Popover, + Theme, useTheme, } from '@material-ui/core'; import { useAsync } from '@react-hookz/web'; @@ -44,7 +45,7 @@ type ContextMenuProps = { taskId?: string; }; -const useStyles = makeStyles(() => ({ +const useStyles = makeStyles(() => ({ button: { color: ({ fontColor }) => fontColor, }, @@ -60,7 +61,7 @@ export const ContextMenu = (props: ContextMenuProps) => { onToggleButtonBar, taskId, } = props; - const { getPageTheme } = useTheme(); + const { getPageTheme } = useTheme(); const pageTheme = getPageTheme({ themeId: 'website' }); const classes = useStyles({ fontColor: pageTheme.fontColor }); const scaffolderApi = useApi(scaffolderApiRef); diff --git a/plugins/scaffolder/src/legacy/ScaffolderPage/ScaffolderPageContextMenu.tsx b/plugins/scaffolder/src/legacy/ScaffolderPage/ScaffolderPageContextMenu.tsx index 5558b314da..f6151c227b 100644 --- a/plugins/scaffolder/src/legacy/ScaffolderPage/ScaffolderPageContextMenu.tsx +++ b/plugins/scaffolder/src/legacy/ScaffolderPage/ScaffolderPageContextMenu.tsx @@ -15,7 +15,6 @@ */ 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'; @@ -35,7 +34,7 @@ import { scaffolderListTaskRouteRef, } from '../../routes'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles(theme => ({ button: { color: theme.page.fontColor, }, diff --git a/plugins/scaffolder/src/legacy/TemplateCard/TemplateCard.tsx b/plugins/scaffolder/src/legacy/TemplateCard/TemplateCard.tsx index b4e68318d0..80f719bd36 100644 --- a/plugins/scaffolder/src/legacy/TemplateCard/TemplateCard.tsx +++ b/plugins/scaffolder/src/legacy/TemplateCard/TemplateCard.tsx @@ -45,7 +45,6 @@ import { getEntitySourceLocation, } from '@backstage/plugin-catalog-react'; import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common'; -import { BackstageTheme } from '@backstage/theme'; import { Box, Card, @@ -55,6 +54,7 @@ import { Chip, IconButton, makeStyles, + Theme, Tooltip, Typography, useTheme, @@ -65,7 +65,7 @@ import React from 'react'; import { selectedTemplateRouteRef, viewTechDocRouteRef } from '../../routes'; const useStyles = makeStyles< - BackstageTheme, + Theme, { fontColor: string; backgroundImage: string } >(theme => ({ cardHeader: { @@ -179,7 +179,7 @@ const DeprecationWarning = () => { export const TemplateCard = ({ template, deprecated }: TemplateCardProps) => { const app = useApp(); - const backstageTheme = useTheme(); + const backstageTheme = useTheme(); const templateRoute = useRouteRef(selectedTemplateRouteRef); const templateProps = getTemplateCardProps(template); const ownedByRelations = getEntityRelations( diff --git a/plugins/scaffolder/src/next/TemplateListPage/RegisterExistingButton.tsx b/plugins/scaffolder/src/next/TemplateListPage/RegisterExistingButton.tsx index 069a2cc6c5..eab7ce4485 100644 --- a/plugins/scaffolder/src/next/TemplateListPage/RegisterExistingButton.tsx +++ b/plugins/scaffolder/src/next/TemplateListPage/RegisterExistingButton.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; import Button from '@material-ui/core/Button'; import IconButton from '@material-ui/core/IconButton'; import useMediaQuery from '@material-ui/core/useMediaQuery'; @@ -23,6 +22,7 @@ import { Link as RouterLink, LinkProps } from 'react-router-dom'; import AddCircleOutline from '@material-ui/icons/AddCircleOutline'; import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha'; import { usePermission } from '@backstage/plugin-permission-react'; +import { Theme } from '@material-ui/core'; /** * Properties for {@link RegisterExistingButton} @@ -42,7 +42,7 @@ export const RegisterExistingButton = (props: RegisterExistingButtonProps) => { const { allowed } = usePermission({ permission: catalogEntityCreatePermission, }); - const isXSScreen = useMediaQuery(theme => + const isXSScreen = useMediaQuery(theme => theme.breakpoints.down('xs'), ); diff --git a/plugins/sentry/src/components/ErrorCell/ErrorCell.tsx b/plugins/sentry/src/components/ErrorCell/ErrorCell.tsx index 14e0213bfa..2a0e0fbb69 100644 --- a/plugins/sentry/src/components/ErrorCell/ErrorCell.tsx +++ b/plugins/sentry/src/components/ErrorCell/ErrorCell.tsx @@ -18,13 +18,13 @@ import React from 'react'; import { SentryIssue } from '../../api'; import { Typography } from '@material-ui/core'; import { makeStyles } from '@material-ui/core/styles'; -import { BackstageTheme } from '@backstage/theme'; import { Link } from '@backstage/core-components'; function stripText(text: string, maxLength: number) { return text.length > maxLength ? `${text.slice(0, maxLength)}...` : text; } -const useStyles = makeStyles(theme => ({ + +const useStyles = makeStyles(theme => ({ root: { minWidth: 260, position: 'relative', diff --git a/plugins/tech-radar/src/components/RadarBubble/RadarBubble.tsx b/plugins/tech-radar/src/components/RadarBubble/RadarBubble.tsx index c114744a40..a904b981ca 100644 --- a/plugins/tech-radar/src/components/RadarBubble/RadarBubble.tsx +++ b/plugins/tech-radar/src/components/RadarBubble/RadarBubble.tsx @@ -15,7 +15,7 @@ */ import React, { useRef, useLayoutEffect } from 'react'; -import { makeStyles, Theme } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core'; export type Props = { visible: boolean; @@ -24,7 +24,7 @@ export type Props = { y: number; }; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles(theme => ({ bubble: { pointerEvents: 'none', userSelect: 'none', diff --git a/plugins/tech-radar/src/components/RadarEntry/RadarEntry.tsx b/plugins/tech-radar/src/components/RadarEntry/RadarEntry.tsx index b7f5ea5962..996b8d1040 100644 --- a/plugins/tech-radar/src/components/RadarEntry/RadarEntry.tsx +++ b/plugins/tech-radar/src/components/RadarEntry/RadarEntry.tsx @@ -15,7 +15,7 @@ */ import React from 'react'; -import { makeStyles, Theme } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core'; import { WithLink } from '../../utils/components'; import { RadarDescription } from '../RadarDescription'; import type { EntrySnapshot } from '../../utils/types'; @@ -37,7 +37,7 @@ export type Props = { onClick?: (event: React.MouseEvent) => void; }; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles(theme => ({ text: { pointerEvents: 'none', userSelect: 'none', diff --git a/plugins/tech-radar/src/components/RadarGrid/RadarGrid.tsx b/plugins/tech-radar/src/components/RadarGrid/RadarGrid.tsx index 8f796620e0..8f4f8acc78 100644 --- a/plugins/tech-radar/src/components/RadarGrid/RadarGrid.tsx +++ b/plugins/tech-radar/src/components/RadarGrid/RadarGrid.tsx @@ -15,7 +15,7 @@ */ import React from 'react'; -import { makeStyles, Theme } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core'; import type { Ring } from '../../utils/types'; export type Props = { @@ -23,7 +23,7 @@ export type Props = { rings: Ring[]; }; -const useStyles = makeStyles( +const useStyles = makeStyles( theme => ({ ring: { fill: 'none', diff --git a/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx b/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx index d74cde1d40..0a7a69b73c 100644 --- a/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx +++ b/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx @@ -13,13 +13,14 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { makeStyles, Theme } from '@material-ui/core'; + +import { makeStyles } from '@material-ui/core'; import React from 'react'; import { RadarLegendQuadrant } from './RadarLegendQuadrant'; import { RadarLegendProps } from './types'; import { setupSegments } from './utils'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles(theme => ({ quadrant: { height: '100%', width: '100%', diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/dom.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/dom.tsx index 29e6945fa7..3d12718986 100644 --- a/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/dom.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/dom.tsx @@ -18,7 +18,6 @@ import { useCallback, useEffect, useState } from 'react'; import { useTheme, useMediaQuery } from '@material-ui/core'; -import { BackstageTheme } from '@backstage/theme'; import { CompoundEntityRef } from '@backstage/catalog-model'; import { useAnalytics, useApi } from '@backstage/core-plugin-api'; import { scmIntegrationsApiRef } from '@backstage/integration-react'; @@ -58,7 +57,7 @@ export const useTechDocsReaderDom = ( entityRef: CompoundEntityRef, ): Element | null => { const navigate = useNavigateUrl(); - const theme = useTheme(); + const theme = useTheme(); const isMobileMedia = useMediaQuery(MOBILE_MEDIA_QUERY); const sanitizerTransformer = useSanitizerTransformer(); const stylesTransformer = useStylesTransformer(); diff --git a/plugins/techdocs/src/reader/transformers/styles/rules/types.ts b/plugins/techdocs/src/reader/transformers/styles/rules/types.ts index 6419ef8e39..defdc4ad90 100644 --- a/plugins/techdocs/src/reader/transformers/styles/rules/types.ts +++ b/plugins/techdocs/src/reader/transformers/styles/rules/types.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; +import { Theme } from '@material-ui/core'; /** * A Backstage sidebar object that contains properties such as its pin state. @@ -31,7 +31,7 @@ export type RuleOptions = { /** * A Backstage theme object that contains the application's design tokens. */ - theme: BackstageTheme; + theme: Theme; /** * A Backstage sidebar, see {@link BackstageSidebar} for more details. */ diff --git a/plugins/techdocs/src/reader/transformers/styles/transformer.ts b/plugins/techdocs/src/reader/transformers/styles/transformer.ts index 04a6d476af..dee77fb1ed 100644 --- a/plugins/techdocs/src/reader/transformers/styles/transformer.ts +++ b/plugins/techdocs/src/reader/transformers/styles/transformer.ts @@ -15,12 +15,8 @@ */ import { useCallback, useMemo } from 'react'; - import { useTheme } from '@material-ui/core'; - import { useSidebarPinState } from '@backstage/core-components'; -import { BackstageTheme } from '@backstage/theme'; - import { Transformer } from '../transformer'; import { rules } from './rules'; @@ -35,7 +31,7 @@ const useSidebar = () => useSidebarPinState(); */ const useRuleStyles = () => { const sidebar = useSidebar(); - const theme = useTheme(); + const theme = useTheme(); return useMemo(() => { const options = { theme, sidebar }; diff --git a/plugins/user-settings/src/components/AuthProviders/ProviderSettingsAvatar.tsx b/plugins/user-settings/src/components/AuthProviders/ProviderSettingsAvatar.tsx index e92b0efe15..07e9b4aa55 100644 --- a/plugins/user-settings/src/components/AuthProviders/ProviderSettingsAvatar.tsx +++ b/plugins/user-settings/src/components/AuthProviders/ProviderSettingsAvatar.tsx @@ -15,11 +15,10 @@ */ import React from 'react'; -import { BackstageTheme } from '@backstage/theme'; -import { makeStyles, Avatar } from '@material-ui/core'; +import { makeStyles, Avatar, Theme } from '@material-ui/core'; import { sidebarConfig } from '@backstage/core-components'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles(theme => ({ avatar: { width: ({ size }) => size, height: ({ size }) => size, diff --git a/plugins/user-settings/src/components/General/UserSettingsSignInAvatar.tsx b/plugins/user-settings/src/components/General/UserSettingsSignInAvatar.tsx index af1d2969e6..85c616ec72 100644 --- a/plugins/user-settings/src/components/General/UserSettingsSignInAvatar.tsx +++ b/plugins/user-settings/src/components/General/UserSettingsSignInAvatar.tsx @@ -15,12 +15,11 @@ */ import React from 'react'; -import { BackstageTheme } from '@backstage/theme'; -import { makeStyles, Avatar } from '@material-ui/core'; +import { makeStyles, Avatar, Theme } from '@material-ui/core'; import { useUserProfile } from '../useUserProfileInfo'; import { sidebarConfig } from '@backstage/core-components'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles(theme => ({ avatar: { width: ({ size }) => size, height: ({ size }) => size, diff --git a/plugins/xcmetrics/src/components/BuildListFilter/BuildListFilter.tsx b/plugins/xcmetrics/src/components/BuildListFilter/BuildListFilter.tsx index 9a2b759235..ce2a2f4c05 100644 --- a/plugins/xcmetrics/src/components/BuildListFilter/BuildListFilter.tsx +++ b/plugins/xcmetrics/src/components/BuildListFilter/BuildListFilter.tsx @@ -18,7 +18,6 @@ import React, { useEffect, useState } from 'react'; import { makeStyles, IconButton, Grid, Button } from '@material-ui/core'; import FilterList from '@material-ui/icons/FilterList'; import { InfoCard, Select } from '@backstage/core-components'; -import { BackstageTheme } from '@backstage/theme'; import { useApi } from '@backstage/core-plugin-api'; import useAsync from 'react-use/lib/useAsync'; import { BuildFilters, BuildStatus, xcmetricsApiRef } from '../../api'; @@ -28,7 +27,7 @@ const toSelectItems = (strings: string[]) => { return strings.map(str => ({ label: str, value: str })); }; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles(theme => ({ filtersContent: { padding: theme.spacing(2, 2, 2, 2.5), }, diff --git a/plugins/xcmetrics/src/components/OverviewTrends/OverviewTrends.tsx b/plugins/xcmetrics/src/components/OverviewTrends/OverviewTrends.tsx index 4c791688be..e6a1601e37 100644 --- a/plugins/xcmetrics/src/components/OverviewTrends/OverviewTrends.tsx +++ b/plugins/xcmetrics/src/components/OverviewTrends/OverviewTrends.tsx @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import { Grid, makeStyles, useTheme } from '@material-ui/core'; import React, { useState } from 'react'; import { Progress, Select } from '@backstage/core-components'; @@ -30,7 +31,6 @@ import { getValues, sumField, } from '../../utils'; -import { BackstageTheme } from '@backstage/theme'; const useStyles = makeStyles({ spacingTop: { @@ -51,7 +51,7 @@ const DAYS_SELECT_ITEMS = [ export const OverviewTrends = () => { const [days, setDays] = useState(14); - const theme = useTheme(); + const theme = useTheme(); const classes = useStyles(); const client = useApi(xcmetricsApiRef); const buildCountsResult = useAsync( diff --git a/plugins/xcmetrics/src/components/StatusCell/StatusCell.tsx b/plugins/xcmetrics/src/components/StatusCell/StatusCell.tsx index 387879b3a0..98ddadc1ff 100644 --- a/plugins/xcmetrics/src/components/StatusCell/StatusCell.tsx +++ b/plugins/xcmetrics/src/components/StatusCell/StatusCell.tsx @@ -13,9 +13,9 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { makeStyles, Tooltip } from '@material-ui/core'; + +import { makeStyles, Theme, Tooltip } from '@material-ui/core'; import React from 'react'; -import { BackstageTheme } from '@backstage/theme'; import { BuildStatus, BuildStatusResult, xcmetricsApiRef } from '../../api'; import { cn, formatDuration, formatStatus } from '../../utils'; import useAsync from 'react-use/lib/useAsync'; @@ -71,7 +71,7 @@ type StatusStyle = { [key in BuildStatus]: any; }; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles(theme => ({ root: { width: ({ size }) => size, height: ({ size }) => size, diff --git a/plugins/xcmetrics/src/components/StatusMatrix/StatusMatrix.tsx b/plugins/xcmetrics/src/components/StatusMatrix/StatusMatrix.tsx index 6e78c822ad..4c5af54017 100644 --- a/plugins/xcmetrics/src/components/StatusMatrix/StatusMatrix.tsx +++ b/plugins/xcmetrics/src/components/StatusMatrix/StatusMatrix.tsx @@ -13,9 +13,9 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import React from 'react'; import { makeStyles } from '@material-ui/core'; -import { BackstageTheme } from '@backstage/theme'; import { xcmetricsApiRef } from '../../api'; import useAsync from 'react-use/lib/useAsync'; import useMeasure from 'react-use/lib/useMeasure'; @@ -28,7 +28,7 @@ const CELL_SIZE = 12; const CELL_MARGIN = 4; const MAX_ROWS = 4; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles(theme => ({ root: { marginTop: 8, display: 'flex',