From a2a8463b4b6915dc56632967b5e012a85ce6f2cd Mon Sep 17 00:00:00 2001
From: Adam Harvey <adam.harvey@dxc.com>
Date: Mon, 22 Mar 2021 22:39:43 -0400
Subject: [PATCH] Update dialog format

Signed-off-by: Adam Harvey <adam.harvey@dxc.com>
---
 .../src/components/EntityBadgesDialog.tsx     | 23 ++++++++-----------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/plugins/badges/src/components/EntityBadgesDialog.tsx b/plugins/badges/src/components/EntityBadgesDialog.tsx
index 74a244e698..b3c0a4fee4 100644
--- a/plugins/badges/src/components/EntityBadgesDialog.tsx
+++ b/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}