Merge pull request #23486 from backstage/blam/fix-avatar

core-components: Move inline styles to classes for Avatar component

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}
+    />
+  );
+};

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

plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx

@@ -50,19 +50,25 @@ import {
 import { EntityRefLink } from '@backstage/plugin-catalog-react';
 import { EntityRelationAggregation } from '../../types';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    card: {
-      border: `1px solid ${theme.palette.divider}`,
-      boxShadow: theme.shadows[2],
-      borderRadius: '4px',
-      overflow: 'visible',
-      position: 'relative',
-      margin: theme.spacing(4, 1, 1),
-      flex: '1',
-      minWidth: '0px',
-    },
-  }),
+const useStyles = makeStyles(
+  (theme: Theme) =>
+    createStyles({
+      card: {
+        border: `1px solid ${theme.palette.divider}`,
+        boxShadow: theme.shadows[2],
+        borderRadius: '4px',
+        overflow: 'visible',
+        position: 'relative',
+        margin: theme.spacing(4, 1, 1),
+        flex: '1',
+        minWidth: '0px',
+      },
+      avatar: {
+        position: 'absolute',
+        top: '-2rem',
+      },
+    }),
+  { name: 'MembersListCardComponent' },
 );
 
 const MemberComponent = (props: { member: UserEntity }) => {
@@ -85,10 +91,7 @@ const MemberComponent = (props: { member: UserEntity }) => {
         <Avatar
           displayName={displayName}
           picture={profile?.picture}
-          customStyles={{
-            position: 'absolute',
-            top: '-2rem',
-          }}
+          classes={classes}
         />
         <Box
           pt={2}