chore: update usages of the customStyles to use classes instead

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

plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCard.tsx

@@ -51,6 +51,8 @@ const useStyles = makeStyles(
     policies: {
       flex: 1,
     },
+    avatar: { width: '2.5rem', height: '2.5rem' },
+    avatarText: { fontSize: '1rem' },
   }),
   { name: 'PullRequestCard' },
 );
@@ -64,6 +66,8 @@ export const PullRequestCard = ({
   pullRequest,
   simplified,
 }: PullRequestCardProps) => {
+  const classes = useStyles();
+
   const title = (
     <Link to={pullRequest.link ?? ''} title={pullRequest.description}>
       {pullRequest.title}
@@ -90,12 +94,10 @@ export const PullRequestCard = ({
     <Avatar
       displayName={pullRequest.createdBy?.displayName}
       picture={pullRequest.createdBy?.imageUrl}
-      customStyles={{ width: '2.5rem', height: '2.5rem', fontSize: '1rem' }}
+      classes={{ avatar: classes.avatar, avatarText: classes.avatarText }}
     />
   );
 
-  const classes = useStyles();
-
   return (
     <Card
       classes={{ root: classes.card }}

plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCardReviewer.tsx

@@ -17,22 +17,36 @@
 import { Avatar } from '@backstage/core-components';
 import React from 'react';
 import { Reviewer } from '@backstage/plugin-azure-devops-common';
+import { makeStyles } from '@material-ui/core/styles';
 
 type PullRequestCardReviewerProps = {
   reviewer: Reviewer;
 };
 
-export const PullRequestCardReviewer = ({
-  reviewer,
-}: PullRequestCardReviewerProps) => (
-  <Avatar
-    displayName={reviewer.displayName}
-    picture={reviewer.imageUrl}
-    customStyles={{
+const useStyles = makeStyles(
+  {
+    avatar: {
       width: '2.5rem',
       height: '2.5rem',
-      fontSize: '1rem',
       border: '0.3rem solid silver',
-    }}
-  />
+    },
+    avatarText: {
+      fontSize: '1rem',
+    },
+  },
+  { name: 'PullRequestCardReviewer' },
 );
+
+export const PullRequestCardReviewer = ({
+  reviewer,
+}: PullRequestCardReviewerProps) => {
+  const classes = useStyles();
+
+  return (
+    <Avatar
+      displayName={reviewer.displayName}
+      picture={reviewer.imageUrl}
+      classes={classes}
+    />
+  );
+};