chore: update usages of the customStyles to use classes instead

Signed-off-by: blam <ben@blam.sh>

plugins/bazaar/src/components/CardContentFields/CardContentFields.tsx

@@ -19,6 +19,8 @@ import Grid from '@material-ui/core/Grid';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 import Typography from '@material-ui/core/Typography';
+import makeStyles from '@material-ui/core/styles/makeStyles';
+
 import { GridSize } from '@material-ui/core/Grid';
 import { parseEntityRef } from '@backstage/catalog-model';
 import { Avatar, Link } from '@backstage/core-components';
@@ -35,6 +37,25 @@ type Props = {
   membersSize: GridSize;
 };
 
+const useStyles = makeStyles(
+  {
+    avatar: {
+      width: '19px',
+      height: '19px',
+      float: 'left',
+      marginRight: '0.3rem',
+      marginTop: '0rem',
+      marginBottom: '0rem',
+      alignItems: 'left',
+    },
+    avatarText: {
+      fontSize: '8px',
+      textAlign: 'left',
+    },
+  },
+  { name: 'CardContentFields' },
+);
+
 export const CardContentFields = ({
   bazaarProject,
   members,
@@ -42,7 +63,7 @@ export const CardContentFields = ({
   membersSize,
 }: Props) => {
   const catalogEntityRoute = useRouteRef(entityRouteRef);
-
+  const classes = useStyles();
   return (
     <div>
       <Card>
@@ -84,17 +105,7 @@ export const CardContentFields = ({
                       >
                         <Avatar
                           displayName={member.userId}
-                          customStyles={{
-                            width: '19px',
-                            height: '19px',
-                            fontSize: '8px',
-                            float: 'left',
-                            marginRight: '0.3rem',
-                            marginTop: '0rem',
-                            marginBottom: '0rem',
-                            alignItems: 'left',
-                            textAlign: 'left',
-                          }}
+                          classes={classes}
                           picture={member.picture}
                         />
                         <Link