refactor(catalog): replace MUI Grid with BUI Grid in AboutContent

Signed-off-by: Johan Persson <johanopersson@gmail.com>

plugins/catalog/src/components/AboutCard/AboutContent.tsx

@@ -26,8 +26,8 @@ import {
 } from '@backstage/plugin-catalog-react';
 import { JsonArray } from '@backstage/types';
 import Chip from '@material-ui/core/Chip';
-import Grid from '@material-ui/core/Grid';
 import { makeStyles } from '@material-ui/core/styles';
+import { Grid } from '@backstage/ui';
 import { MarkdownContent } from '@backstage/core-components';
 import { AboutField } from './AboutField';
 import { LinksGridList } from '../EntityLinksCard/LinksGridList';
@@ -115,10 +115,10 @@ export function AboutContent(props: AboutContentProps) {
   }
 
   return (
-    <Grid container>
+    <Grid columns={{ initial: '1', sm: '2', lg: '3' }} gap="3">
       <AboutField
         label={t('aboutCard.descriptionField.label')}
-        gridSizes={{ xs: 12 }}
+        style={{ gridColumn: '1 / -1' }}
       >
         <MarkdownContent
           className={classes.description}
@@ -215,7 +215,7 @@ export function AboutContent(props: AboutContentProps) {
       {isLocation && (entity?.spec?.targets || entity?.spec?.target) && (
         <AboutField
           label={t('aboutCard.targetsField.label')}
-          gridSizes={{ xs: 12 }}
+          style={{ gridColumn: '1 / -1' }}
         >
           <LinksGridList
             cols={1}

plugins/catalog/src/components/AboutCard/AboutField.tsx

@@ -15,10 +15,9 @@
  */
 
 import { useElementFilter } from '@backstage/core-plugin-api';
-import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { catalogTranslationRef } from '../../alpha/translation';
 
@@ -51,11 +50,19 @@ export interface AboutFieldProps {
   gridSizes?: Record<string, number>;
   children?: ReactNode;
   className?: string;
+  style?: CSSProperties;
 }
 
 /** @public */
 export function AboutField(props: AboutFieldProps) {
-  const { label, value, gridSizes, children, className } = props;
+  const {
+    label,
+    value,
+    gridSizes: _gridSizes,
+    children,
+    className,
+    style,
+  } = props;
   const classes = useStyles();
   const { t } = useTranslationRef(catalogTranslationRef);
 
@@ -71,11 +78,11 @@ export function AboutField(props: AboutFieldProps) {
       </Typography>
     );
   return (
-    <Grid item {...gridSizes} className={className}>
+    <div className={className} style={style}>
       <Typography variant="h2" className={classes.label}>
         {label}
       </Typography>
       {content}
-    </Grid>
+    </div>
   );
 }