From db6d2789e7fdc55f6fb2eafaa529b18961383be9 Mon Sep 17 00:00:00 2001 From: Oliver Sand Date: Wed, 8 Sep 2021 11:06:29 +0200 Subject: [PATCH 1/3] Make styling of groups tab in the explore page use the Backstage theme Signed-off-by: Oliver Sand --- .changeset/ten-dolls-ring.md | 6 +++ .../GroupsExplorerContent/GroupsDiagram.tsx | 49 +++++++++---------- .../GroupsExplorerContent.tsx | 13 ++++- 3 files changed, 41 insertions(+), 27 deletions(-) create mode 100644 .changeset/ten-dolls-ring.md diff --git a/.changeset/ten-dolls-ring.md b/.changeset/ten-dolls-ring.md new file mode 100644 index 0000000000..8142d1f3c8 --- /dev/null +++ b/.changeset/ten-dolls-ring.md @@ -0,0 +1,6 @@ +--- +'@backstage/plugin-explore': patch +--- + +Make styling of groups tab in the explore page use the Backstage theme instead +of hard coded colors. Change the layout to be full screen. diff --git a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx index c865920e7d..e4fa6e9b57 100644 --- a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx +++ b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx @@ -26,7 +26,7 @@ import { getEntityRelations, formatEntityRefTitle, } from '@backstage/plugin-catalog-react'; -import { makeStyles, Typography } from '@material-ui/core'; +import { makeStyles, Typography, useTheme } from '@material-ui/core'; import ZoomOutMap from '@material-ui/icons/ZoomOutMap'; import React from 'react'; import { useAsync } from 'react-use'; @@ -42,16 +42,20 @@ import { import { useApi, useRouteRef, configApiRef } from '@backstage/core-plugin-api'; const useStyles = makeStyles((theme: BackstageTheme) => ({ + graph: { + flex: 1, + minHeight: 0, + }, organizationNode: { - fill: 'coral', - stroke: theme.palette.border, + fill: theme.palette.background.paper, + stroke: theme.palette.primary.main, }, groupNode: { - fill: 'yellowgreen', + fill: theme.palette.background.paper, stroke: theme.palette.border, }, centeredContent: { - padding: '10px', + padding: theme.spacing(1), height: '100%', display: 'flex', alignItems: 'center', @@ -59,6 +63,7 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({ color: 'black', }, textWrapper: { + color: theme.palette.textContrast, display: '-webkit-box', WebkitBoxOrient: 'vertical', WebkitLineClamp: 2, @@ -70,14 +75,10 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({ }, })); -const dimensions = { - nodeWidth: 180, - nodeHeight: 90, - nodeCornerRadius: 20, - nodeAligmentShift: 5, -}; - function RenderNode(props: DependencyGraphTypes.RenderNodeProps) { + const nodeWidth = 180; + const nodeHeight = 80; + const theme = useTheme(); const classes = useStyles(); const catalogEntityRoute = useRouteRef(entityRouteRef); @@ -85,16 +86,13 @@ function RenderNode(props: DependencyGraphTypes.RenderNodeProps) { return ( {props.node.name} - +
{props.node.name}
@@ -108,9 +106,9 @@ function RenderNode(props: DependencyGraphTypes.RenderNodeProps) { return ( {props.node.name} @@ -122,10 +120,7 @@ function RenderNode(props: DependencyGraphTypes.RenderNodeProps) { name: ref.name, })} > - +
{props.node.name}
@@ -146,6 +141,7 @@ export function GroupsDiagram() { }>(); const edges = new Array<{ from: string; to: string; label: string }>(); + const classes = useStyles(); const configApi = useApi(configApiRef); const catalogApi = useApi(catalogApiRef); const organizationName = @@ -218,6 +214,7 @@ export function GroupsDiagram() { nodeMargin={10} direction={DependencyGraphTypes.Direction.RIGHT_LEFT} renderNode={RenderNode} + className={classes.graph} /> { + const classes = useStyles(); + return ( - + Explore your groups. From 5d79be7fb30f839f582ede3177c41fe9d1c07fa8 Mon Sep 17 00:00:00 2001 From: Oliver Sand Date: Wed, 8 Sep 2021 13:39:24 +0200 Subject: [PATCH 2/3] Use style similar to material buttons Signed-off-by: Oliver Sand --- .../GroupsExplorerContent/GroupsDiagram.tsx | 62 ++++++++++++------- 1 file changed, 38 insertions(+), 24 deletions(-) diff --git a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx index e4fa6e9b57..49a9481b15 100644 --- a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx +++ b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx @@ -15,31 +15,31 @@ */ import { + GroupEntity, + parseEntityRef, RELATION_CHILD_OF, stringifyEntityRef, - parseEntityRef, - GroupEntity, } from '@backstage/catalog-model'; -import { - catalogApiRef, - entityRouteRef, - getEntityRelations, - formatEntityRefTitle, -} from '@backstage/plugin-catalog-react'; -import { makeStyles, Typography, useTheme } from '@material-ui/core'; -import ZoomOutMap from '@material-ui/icons/ZoomOutMap'; -import React from 'react'; -import { useAsync } from 'react-use'; -import { BackstageTheme } from '@backstage/theme'; - import { DependencyGraph, DependencyGraphTypes, + Link, Progress, ResponseErrorPanel, - Link, } from '@backstage/core-components'; -import { useApi, useRouteRef, configApiRef } from '@backstage/core-plugin-api'; +import { configApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api'; +import { + catalogApiRef, + entityRouteRef, + formatEntityRefTitle, + getEntityRelations, +} from '@backstage/plugin-catalog-react'; +import { BackstageTheme } from '@backstage/theme'; +import { makeStyles, Typography, useTheme } from '@material-ui/core'; +import ZoomOutMap from '@material-ui/icons/ZoomOutMap'; +import classNames from 'classnames'; +import React from 'react'; +import { useAsync } from 'react-use'; const useStyles = makeStyles((theme: BackstageTheme) => ({ graph: { @@ -47,12 +47,12 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({ minHeight: 0, }, organizationNode: { - fill: theme.palette.background.paper, - stroke: theme.palette.primary.main, + fill: theme.palette.secondary.light, + stroke: theme.palette.secondary.light, }, groupNode: { - fill: theme.palette.background.paper, - stroke: theme.palette.border, + fill: theme.palette.primary.light, + stroke: theme.palette.primary.light, }, centeredContent: { padding: theme.spacing(1), @@ -62,8 +62,13 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({ justifyContent: 'center', color: 'black', }, + textOrganization: { + color: theme.palette.secondary.contrastText, + }, + textGroup: { + color: theme.palette.primary.contrastText, + }, textWrapper: { - color: theme.palette.textContrast, display: '-webkit-box', WebkitBoxOrient: 'vertical', WebkitLineClamp: 2, @@ -77,7 +82,7 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({ function RenderNode(props: DependencyGraphTypes.RenderNodeProps) { const nodeWidth = 180; - const nodeHeight = 80; + const nodeHeight = 60; const theme = useTheme(); const classes = useStyles(); const catalogEntityRoute = useRouteRef(entityRouteRef); @@ -94,7 +99,14 @@ function RenderNode(props: DependencyGraphTypes.RenderNodeProps) { {props.node.name}
-
{props.node.name}
+
+ {props.node.name} +
@@ -122,7 +134,9 @@ function RenderNode(props: DependencyGraphTypes.RenderNodeProps) { >
-
{props.node.name}
+
+ {props.node.name} +
From 60c03f69a7553aa5537aec0440b7b079e8cc8612 Mon Sep 17 00:00:00 2001 From: Oliver Sand Date: Wed, 8 Sep 2021 14:15:04 +0200 Subject: [PATCH 3/3] Change the styling of the `` to have more contrast in light mode Signed-off-by: Oliver Sand --- .changeset/brave-eggs-rush.md | 6 ++++++ .../src/components/DependencyGraph/DefaultNode.tsx | 6 +++--- 2 files changed, 9 insertions(+), 3 deletions(-) create mode 100644 .changeset/brave-eggs-rush.md diff --git a/.changeset/brave-eggs-rush.md b/.changeset/brave-eggs-rush.md new file mode 100644 index 0000000000..8e1a7ca86d --- /dev/null +++ b/.changeset/brave-eggs-rush.md @@ -0,0 +1,6 @@ +--- +'@backstage/core-components': patch +--- + +Change the styling of the `` to have more contrast in light +mode. Nodes now have a design similar to material UI buttons. diff --git a/packages/core-components/src/components/DependencyGraph/DefaultNode.tsx b/packages/core-components/src/components/DependencyGraph/DefaultNode.tsx index 69269d687d..8feca43e9a 100644 --- a/packages/core-components/src/components/DependencyGraph/DefaultNode.tsx +++ b/packages/core-components/src/components/DependencyGraph/DefaultNode.tsx @@ -21,11 +21,11 @@ import { RenderNodeProps } from './types'; const useStyles = makeStyles((theme: BackstageTheme) => ({ node: { - fill: theme.palette.background.paper, - stroke: theme.palette.border, + fill: theme.palette.primary.light, + stroke: theme.palette.primary.light, }, text: { - fill: theme.palette.textContrast, + fill: theme.palette.primary.contrastText, }, }));