regression: Remove Breadcrumbs and update Tag component

app/ui-utils/client/lib/ReactionListContent.js

@@ -32,7 +32,7 @@ export function Reactions({ reactions, onClick }) {
 export function Username({ username, onClick, displayName }) {
 	return (
 		<Box mie='x4' mbe='x4' data-username={username} onClick={onClick} key={displayName}>
-			<Tag>{displayName}</Tag>
+			<Tag variant='secondary'>{displayName}</Tag>
 		</Box>
 	);
 }

client/components/Header/Header.tsx

@@ -1,6 +1,18 @@
 import React, { FC } from 'react';
-import { Box, Icon, Divider, ButtonGroup, ActionButton, Badge, BadgeProps } from '@rocket.chat/fuselage';
 import { css } from '@rocket.chat/css-in-js';
+import colors from '@rocket.chat/fuselage-tokens/colors';
+import {
+	Box,
+	Icon,
+	Divider,
+	ButtonGroup,
+	ActionButton,
+	Badge,
+	BadgeProps,
+	Tag,
+	TagProps,
+	BoxProps,
+} from '@rocket.chat/fuselage';
 
 const Title: FC = (props: any) => <Box color='default' mi='x4' fontScale='s2' withTruncatedText {...props}/>;
 const Subtitle: FC = (props: any) => <Box color='hint' fontScale='p1' withTruncatedText {...props}/>;
@@ -11,6 +23,24 @@ const HeaderIcon: FC<{ icon: JSX.Element | { name: string; color?: string } | nu
 
 const ToolBox: FC = (props: any) => <ButtonGroup mi='x4' medium {...props}/>;
 
+const HeaderLink: FC = (props: BoxProps) => <Box
+	is='a'
+	{...props}
+	className={[
+		css`
+			&:hover,
+			&:focus{
+				color: ${ colors.b500 } !important;
+			}
+			&:visited{
+				color: ${ colors.n800 };
+			}
+		`,
+	].filter(Boolean)}
+/>;
+
+const HeaderTag: FC = ({ children, ...props }: TagProps) => <Tag {...props}><Box display='flex' fontScale='p2'>{children}</Box></Tag>;
+
 const ToolBoxAction: FC = ({ id, icon, color, title, action, className, tabId, index, ...props }: any) => <ActionButton
 	className={className}
 	primary={tabId === id}
@@ -67,4 +97,6 @@ Object.assign(Header, {
 	ToolBoxAction,
 	Divider: HeaderDivider,
 	Icon: HeaderIcon,
+	Link: HeaderLink,
+	Tag: HeaderTag,
 });

client/components/RoomForeword.js

@@ -52,6 +52,7 @@ const RoomForeword = ({ _id: rid }) => {
 				<Margins inline='x4' key={index}>
 					<Box is='a' href={`/direct/${ username }`}>
 						<Tag
+							variant='secondary'
 							className='mention-link'
 							data-username={username}
 							medium

client/views/room/Header/Header.js

@@ -1,9 +1,8 @@
 import React, { useMemo, useEffect } from 'react';
 import { Meteor } from 'meteor/meteor';
-import { Box, Skeleton } from '@rocket.chat/fuselage';
+import { Box, Skeleton, Icon } from '@rocket.chat/fuselage';
 
 import Header from '../../../components/Header';
-import Breadcrumbs from '../../../components/Breadcrumbs';
 import { useRoomIcon } from '../../../hooks/useRoomIcon';
 import { useEndpointData } from '../../../hooks/useEndpointData';
 import { AsyncStatePhase, useAsyncState } from '../../../hooks/useAsyncState';
@@ -38,7 +37,9 @@ export default React.memo(({ room }) => {
 const HeaderIcon = ({ room }) => {
 	const icon = useRoomIcon(room);
 
-	return <Breadcrumbs.Icon name={icon.name}>{!icon.name && icon}</Breadcrumbs.Icon>;
+	return <Box w='x20' mi='x2' display='inline-flex' justifyContent='center'>
+		{icon.name ? <Icon size='x20' {...icon}/> : Icon}
+	</Box>;
 };
 
 const RoomTitle = ({ room }) => <>
@@ -85,10 +86,12 @@ const ParentRoomWithEndpointData = ({ rid }) => {
 const ParentRoom = ({ room }) => {
 	const href = roomTypes.getRouteLink(room.t, room);
 
-	return <Breadcrumbs.Tag>
+	return <Header.Tag>
 		<HeaderIcon room={room}/>
-		<Breadcrumbs.Link href={href}>{roomTypes.getRoomName(room.t, room)}</Breadcrumbs.Link>
-	</Breadcrumbs.Tag>;
+		<Header.Link href={href}>
+			{roomTypes.getRoomName(room.t, room)}
+		</Header.Link>
+	</Header.Tag>;
 };
 
 const ParentTeam = ({ room }) => {
@@ -104,15 +107,14 @@ const ParentTeam = ({ room }) => {
 
 	const teamMainRoom = useUserSubscription(value?.teamInfo?.roomId);
 	const teamMainRoomHref = teamMainRoom ? roomTypes.getRouteLink(teamMainRoom.t, teamMainRoom) : null;
-	const teamIcon = value?.t === 0 ? 'team' : 'team-lock';
 
-	return teamLoading || userTeamsLoading || room.teamMain ? null : <Breadcrumbs.Tag>
-		<Breadcrumbs.IconSmall name={teamIcon}></Breadcrumbs.IconSmall>
+	return teamLoading || userTeamsLoading || room.teamMain ? null : <Header.Tag>
+		<HeaderIcon room={teamMainRoom}/>
 		{belongsToTeam
-			? <Breadcrumbs.Link href={teamMainRoomHref}>{teamMainRoom?.name}</Breadcrumbs.Link>
-			: <Breadcrumbs.Text>{teamMainRoom?.name}</Breadcrumbs.Text>
+			? <Header.Link href={teamMainRoomHref}>{teamMainRoom?.name}</Header.Link>
+			: teamMainRoom?.name
 		}
-	</Breadcrumbs.Tag>;
+	</Header.Tag>;
 };
 const DirectRoomHeader = ({ room }) => {
 	const userId = useUserId();