[FIX] Use the correct icons for DMs (#21125)

* [FIX] Use the correct icons for DMs

* Prefer `balloon` icon over `message` icon

Co-authored-by: Tasso Evangelista <tasso.evangelista@rocket.chat>

app/lib/lib/roomTypes/direct.js

@@ -40,7 +40,7 @@ export class DirectMessageRoomType extends RoomTypeConfig {
 
 	getIcon(roomData) {
 		if (this.isGroupChat(roomData)) {
-			return 'team';
+			return 'balloon';
 		}
 		return this.icon;
 	}

client/hooks/useRoomIcon.tsx

@@ -26,7 +26,7 @@ export const useRoomIcon = (room: IRoom, small = true): JSX.Element | { name: st
 		case 'd':
 			const direct = room as unknown as IDirectMessageRoom;
 			if (direct.uids && direct.uids.length > 2) {
-				return { name: 'baloon-arrow-left' };
+				return { name: 'balloon' };
 			}
 			if (direct.uids && direct.uids.length > 0) {
 				return <ReactiveUserStatus { ...{ small, uid: direct.uids.filter((uid) => uid !== room.u._id)[0] || room.u._id } as any } />;

client/sidebar/header/actions/CreateRoomList.js

@@ -68,9 +68,9 @@ function CreateRoomList() {
 		</Margins>
 		<ul className='rc-popover__list'>
 			<Margins block='x8'>
-				{canCreateChannel && <CreateRoomListItem icon={'hashtag'} text={t('Channel')} action={createChannel} />}
-				{canCreateDirectMessages && <CreateRoomListItem icon={'baloon-arrow-left'} text={t('Direct_Messages')} action={createDirectMessage} />}
-				{discussionEnabled && canCreateDiscussion && <CreateRoomListItem icon={'discussion'} text={t('Discussion')} action={createDiscussion} />}
+				{canCreateChannel && <CreateRoomListItem icon='hashtag' text={t('Channel')} action={createChannel} />}
+				{canCreateDirectMessages && <CreateRoomListItem icon='balloon' text={t('Direct_Messages')} action={createDirectMessage} />}
+				{discussionEnabled && canCreateDiscussion && <CreateRoomListItem icon='discussion' text={t('Discussion')} action={createDiscussion} />}
 			</Margins>
 		</ul>
 	</div>;

client/views/admin/info/UsageCard.js

@@ -108,7 +108,7 @@ const UsageCard = React.memo(function UsageCard({ statistics, isLoading, vertica
 						value={s(() => statistics.totalPrivateGroups)}
 					/>
 					<TextSeparator
-						label={<><Card.Icon name='team' size='x16'/> {t('Stats_Total_Direct_Messages')}</>}
+						label={<><Card.Icon name='balloon' size='x16'/> {t('Stats_Total_Direct_Messages')}</>}
 						value={s(() => statistics.totalDirect)}
 					/>
 					<TextSeparator

client/views/admin/users/UserInfoActions.js

@@ -178,7 +178,7 @@ export const UserInfoActions = ({ username, _id, isActive, isAdmin, onChange })
 
 	const options = useMemo(() => ({
 		...canDirectMessage && { directMessage: {
-			icon: 'chat',
+			icon: 'balloon',
 			label: t('Direct_Message'),
 			action: directMessageClick,
 		} },

client/views/room/hooks/useUserInfoActions.js

@@ -167,7 +167,7 @@ export const useUserInfoActions = (user = {}, rid) => {
 
 	const openDirectMessageOption = useMemo(() => shouldOpenDirectMessage && {
 		label: t('Direct_Message'),
-		icon: 'chat',
+		icon: 'balloon',
 		action: openDirectDm,
 	}, [openDirectDm, shouldOpenDirectMessage, t]);
 

package-lock.json

@@ -6035,9 +6035,10 @@
 			}
 		},
 		"@rocket.chat/icons": {
-			"version": "0.6.3-dev.179",
-			"resolved": "https://registry.npmjs.org/@rocket.chat/icons/-/icons-0.6.3-dev.179.tgz",
-			"integrity": "sha512-5NsrdR3C90Z0lR7OkgzHGqjDVPxho+LUjrv15F1L/uONp/WdQBo+Z3cGFXUgnLZf5ohX1BgTRRtzHtJPPr7QyQ=="
+			"version": "0.6.3-dev.202",
+			"resolved": "https://registry.npmjs.org/@rocket.chat/icons/-/icons-0.6.3-dev.202.tgz",
+			"integrity": "sha512-Tsg7wdHWiUunhyWTAa+pO9m6bdM3wLJ+t3jYfSUXn9FsumHsR7f+g4GjSJsHvw65Ly3b5TJcs917YKCtb/h5Gg==",
+			"dev": true
 		},
 		"@rocket.chat/livechat": {
 			"version": "1.8.0",

package.json

@@ -56,6 +56,7 @@
 		"@babel/register": "^7.12.1",
 		"@octokit/rest": "^16.43.2",
 		"@rocket.chat/eslint-config": "^0.3.0",
+		"@rocket.chat/icons": "^0.6.3-dev.202",
 		"@rocket.chat/livechat": "^1.8.0",
 		"@settlin/spacebars-loader": "^1.0.8",
 		"@storybook/addon-essentials": "^6.1.11",
@@ -144,7 +145,6 @@
 		"@rocket.chat/fuselage-polyfills": "^0.6.3-dev.181",
 		"@rocket.chat/fuselage-tokens": "^0.21.0",
 		"@rocket.chat/fuselage-ui-kit": "^0.6.3-dev.184",
-		"@rocket.chat/icons": "^0.6.3-dev.179",
 		"@rocket.chat/mp3-encoder": "^0.6.3-dev.178",
 		"@rocket.chat/ui-kit": "^0.6.3-dev.178",
 		"@slack/client": "^4.12.0",