message: add background to group diagram
diff: @@ -35,7 +35,7 @@ import {
  getEntityRelations,
  } from '@backstage/plugin-catalog-react';
  import { BackstageTheme } from '@backstage/theme';
  -import { makeStyles, Typography, useTheme } from '@material-ui/core';
  +import { makeStyles, Typography, Paper, useTheme } from '@material-ui/core';
  import ZoomOutMap from '@material-ui/icons/ZoomOutMap';
  import classNames from 'classnames';
  import React from 'react';
  @@ -46,6 +46,12 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({
  flex: 1,
  minHeight: 0,
  },
  + graphWrapper: {
  + position: 'relative',
  + flex: 1,
  + minHeight: 0,
  + display: 'flex',
  + },
  organizationNode: {
  fill: theme.palette.secondary.light,
  stroke: theme.palette.secondary.light,
  @@ -62,6 +68,15 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({
  justifyContent: 'center',
  color: 'black',
  },
  + legend: {
  + position: 'absolute',
  + bottom: 0,
  + right: 0,
  + padding: theme.spacing(1),
  + '& .icon': {
  + verticalAlign: 'bottom',
  + },
  + },
  textOrganization: {
  color: theme.palette.secondary.contrastText,
  },
  @@ -222,6 +237,7 @@ export function GroupsDiagram() {
  return (
  <>
  + <Paper className={classes.graphWrapper}>
  <DependencyGraph
  nodes={nodes}
  edges={edges}
  @@ -230,13 +246,17 @@ export function GroupsDiagram() {
  renderNode={RenderNode}
  className={classes.graph}
  />
  +
  <Typography
  variant="caption"
  - style={{ display: 'block', textAlign: 'right' }}
  + color="textSecondary"
  + display="block"
  + className={classes.legend}
  >
  - <ZoomOutMap style={{ verticalAlign: 'bottom' }} /> Use pinch &amp; zoom
  - to move around the diagram.
  + <ZoomOutMap className="icon" /> Use pinch &amp; zoom to move around
  + the diagram.
  </Typography>
  + </Paper>
  </>
  );
  }
  