[FIX] Header Tag Visual Issues (#21991)

client/components/Header/HeaderLink.tsx

@@ -9,6 +9,7 @@ const HeaderLink: FC<ComponentProps<typeof Box>> = (props) => (
 		{...props}
 		className={[
 			css`
+				color: ${colors.n700} !important;
 				&:hover,
 				&:focus {
 					color: ${colors.n800} !important;

client/components/Header/HeaderTagIcon.tsx

@@ -1,12 +1,13 @@
 import { Box, Icon } from '@rocket.chat/fuselage';
+import colors from '@rocket.chat/fuselage-tokens/colors';
 import React, { FC, isValidElement, ReactElement } from 'react';
 
 type HeaderIconProps = { icon: ReactElement | { name: string; color?: string } | null };
 
 const HeaderTagIcon: FC<HeaderIconProps> = ({ icon }) =>
 	icon ? (
-		<Box w='x20' mi='x2' display='inline-flex' justifyContent='center'>
-			{isValidElement(icon) ? icon : <Icon size='x20' {...icon} />}
+		<Box w='x16' mie='x2' display='inline-flex' justifyContent='center'>
+			{isValidElement(icon) ? icon : <Icon size='x16' color={colors.n700} {...icon} />}
 		</Box>
 	) : null;