chore: adjusted highlight badges

apps/meteor/client/sidebar/header/actions/Administration.tsx

@@ -11,14 +11,14 @@ const Administration: VFC<Omit<HTMLAttributes<HTMLElement>, 'is'>> = ({ classNam
 	const t = useTranslation();
 
 	const sections = useAdministrationMenu();
-	const { className: highlightDot } = useAdministrationHighlight();
+	const { className: highlightBadge } = useAdministrationHighlight();
 
 	return (
 		<GenericMenu
 			sections={sections}
 			title={t('Administration')}
 			is={Sidebar.TopBar.Action}
-			className={[className, highlightDot]}
+			className={[className, highlightBadge]}
 			{...props}
 		/>
 	);

apps/meteor/client/sidebar/header/actions/hooks/useAdministrationHighlight.tsx

@@ -3,7 +3,7 @@ import { Palette } from '@rocket.chat/fuselage';
 
 import { useOmnichannelHighlight } from '../../../../../ee/client/omnichannel/hooks/useOmnichannelHighlight';
 
-const highlightDot = css`
+const highlightBadge = css`
 	position: relative;
 
 	&::after {
@@ -26,7 +26,7 @@ export const useAdministrationHighlight = () => {
 	return {
 		isHighlightVisible: isOmnichannelHighlightVisible,
 		get className() {
-			return this.isHighlightVisible ? highlightDot : undefined;
+			return this.isHighlightVisible ? highlightBadge : undefined;
 		},
 	};
 };

apps/meteor/client/sidebar/header/actions/hooks/useAdministrationItems.tsx

@@ -9,7 +9,7 @@ import {
 } from '@rocket.chat/ui-contexts';
 import React from 'react';
 
-import { OmnichannelHighlight } from '../../../../../ee/client/omnichannel/components/OmnichannelHighlight';
+import { OmnichannelHighlightBadge } from '../../../../../ee/client/omnichannel/components/OmnichannelHighlightBadge';
 import type { UpgradeTabVariant } from '../../../../../lib/upgradeTab';
 import { getUpgradeTabLabel, isFullyFeature } from '../../../../../lib/upgradeTab';
 import Emoji from '../../../../components/Emoji';
@@ -87,7 +87,7 @@ export const useAdministrationItems = (): GenericMenuItemProps[] => {
 		content: t('Omnichannel'),
 		icon: 'headset',
 		onClick: () => router.navigate('/omnichannel/current'),
-		addon: <OmnichannelHighlight />,
+		addon: <OmnichannelHighlightBadge />,
 	};
 
 	const upgradeItem: GenericMenuItemProps = {

apps/meteor/client/views/omnichannel/sidebarItems.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { hasPermission } from '../../../app/authorization/client';
-import { OmnichannelHighlight } from '../../../ee/client/omnichannel/components/OmnichannelHighlight';
+import { OmnichannelHighlightBadge } from '../../../ee/client/omnichannel/components/OmnichannelHighlightBadge';
 import { createSidebarItems } from '../../lib/createSidebarItems';
 
 export const {
@@ -14,7 +14,7 @@ export const {
 		href: '/omnichannel/current',
 		icon: 'message',
 		i18nLabel: 'Current_Chats',
-		badge: () => <OmnichannelHighlight />,
+		badge: () => <OmnichannelHighlightBadge />,
 		permissionGranted: (): boolean => hasPermission('view-livechat-current-chats'),
 	},
 	{

apps/meteor/ee/client/omnichannel/components/OmnichannelHighlightBadge/index.tsx

@@ -0,0 +1,14 @@
+import { Badge } from '@rocket.chat/fuselage';
+import React from 'react';
+
+import { useOmnichannelHighlight } from '../../hooks/useOmnichannelHighlight';
+
+export const OmnichannelHighlightBadge = () => {
+	const { isHighlightVisible } = useOmnichannelHighlight();
+
+	if (!isHighlightVisible) {
+		return null;
+	}
+
+	return <Badge variant='danger' small />;
+};