Update dialog format

Signed-off-by: Adam Harvey <adam.harvey@dxc.com>

plugins/badges/src/components/EntityBadgesDialog.tsx

@@ -22,6 +22,7 @@ import {
   useApi,
 } from '@backstage/core';
 import {
+  Box,
   Button,
   Dialog,
   DialogActions,
@@ -55,7 +56,6 @@ export const EntityBadgesDialog = ({ open, onClose, entity }: Props) => {
   const theme = useTheme();
   const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
   const badgesApi = useApi(badgesApiRef);
-  const classes = useStyles();
 
   const { value: badges, loading, error } = useAsync(async () => {
     if (open) {
@@ -67,18 +67,11 @@ export const EntityBadgesDialog = ({ open, onClose, entity }: Props) => {
 
   const content = (badges || []).map(
     ({ badge: { description }, id, url, markdown }) => (
-      <div key={id}>
-        <DialogContentText>
-          {description || `${id} badge`}
-          <br />
-          <img alt={description || id} src={url} />
-        </DialogContentText>
-        <Typography component="div" className={classes.codeBlock}>
-          Copy the following snippet of markdown code for the badge:
-          <CodeSnippet language="markdown" text={markdown} showCopyCodeButton />
-        </Typography>
-        <hr />
-      </div>
+      <DialogContentText>
+        <Box m={4} />
+        <img alt={description || id} src={url} />
+        <CodeSnippet language="markdown" text={markdown} showCopyCodeButton />
+      </DialogContentText>
     ),
   );
 
@@ -87,6 +80,10 @@ export const EntityBadgesDialog = ({ open, onClose, entity }: Props) => {
       <DialogTitle>Entity Badges</DialogTitle>
 
       <DialogContent>
+        <Typography>
+          Embed badges in other web sites that link back to this entity. Copy
+          the relevant snippet of Markdown code to use the badge.
+        </Typography>
         {loading && <Progress />}
         {error && <ResponseErrorPanel error={error} />}
         {content}