Ajuste no avatar do contato

rtenorioh · Oct 24, 2024 · 9d6a7d7 · 9d6a7d7
1 parent 9a9230b
commit 9d6a7d7
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 7 deletions.
diff --git a/frontend/src/components/TicketInfo/index.js b/frontend/src/components/TicketInfo/index.js
@@ -1,17 +1,26 @@
 import React from "react";
 
 import { Avatar, CardHeader } from "@material-ui/core";
-
+import { makeStyles } from "@material-ui/core/styles";
 import { i18n } from "../../translate/i18n";
 
+const useStyles = makeStyles(() => ({
+	avatar: {
+		width: "50px",
+		height: "50px",
+		borderRadius: "25%"
+	}
+}));
+
 const TicketInfo = ({ contact, ticket, onClick }) => {
+	const classes = useStyles();
 	return (
 		<CardHeader
 			onClick={onClick}
 			style={{ cursor: "pointer" }}
 			titleTypographyProps={{ noWrap: true }}
 			subheaderTypographyProps={{ noWrap: true }}
-			avatar={<Avatar src={contact.profilePicUrl} alt="contact_image" />}
+			avatar={<Avatar src={contact.profilePicUrl} className={classes.avatar} alt="contact_image" />}
 			title={`${contact.name} #${ticket.id}`}
 			subheader={
 				ticket.user &&

diff --git a/frontend/src/components/TicketListItem/index.js b/frontend/src/components/TicketListItem/index.js
@@ -60,6 +60,11 @@ const useStyles = makeStyles(theme => ({
 	avatarContainer: {
 		position: "relative",
 	},
+	avatar: {
+		width: "50px",
+		height: "50px",
+		borderRadius: "25%"
+	},
 	badgeStyle: {
 		color: "white",
 		backgroundColor: green[500],
@@ -370,11 +375,9 @@ const TicketListItem = ({ ticket, userId, filteredTags }) => {
 
 				<ListItemAvatar className={classes.avatarContainer}>
 					<Avatar
-						style={{
-							width: "50px",
-							height: "50px",
-						}}
+						className={classes.avatar}
 						src={ticket?.contact?.profilePicUrl}
+						alt="contact_image"
 					/>
 					<Badge
 						className={classes.badgeStyle}

diff --git a/frontend/src/pages/Contacts/index.js b/frontend/src/pages/Contacts/index.js
@@ -455,7 +455,7 @@ const Contacts = () => {
                 .map((contact) => (
                   <TableRow key={contact.id}>
                     <TableCell style={{ paddingRight: 0 }}>
-                      <Avatar src={contact.profilePicUrl} className={classes.avatar} />
+                      <Avatar src={contact.profilePicUrl} className={classes.avatar} alt="contact_image" />
                     </TableCell>
                     <TableCell>{contact.name}</TableCell>
                     <TableCell align="center">