Chore: Change bundle tags color and refactor app details page header styles

apps/meteor/client/components/avatar/AppAvatar.tsx

@@ -1,22 +1,14 @@
 import { Box } from '@rocket.chat/fuselage';
-import type { ReactElement } from 'react';
+import type { ComponentProps, ReactElement } from 'react';
 import React from 'react';
 
 import BaseAvatar from './BaseAvatar';
 
-// TODO: frontend chapter day - Remove inline Styling
-
 type AppAvatarProps = {
-	/* @deprecated */
-	size: 'x36' | 'x28' | 'x16' | 'x40' | 'x124';
-	/* @deprecated */
-	mie?: 'x80' | 'x20' | 'x16' | 'x8';
-	/* @deprecated */
-	alignSelf?: 'center';
-
 	iconFileContent: string;
 	iconFileData: string;
-};
+	size: ComponentProps<typeof BaseAvatar>['size'];
+} & ComponentProps<typeof Box>;
 
 export default function AppAvatar({ iconFileContent, size, iconFileData, ...props }: AppAvatarProps): ReactElement {
 	return (

apps/meteor/client/views/admin/apps/AppDetailsPage/AppDetailsPageHeader.tsx

@@ -22,7 +22,20 @@ const versioni18nKey = (app: App): string => {
 
 const AppDetailsPageHeader = ({ app }: { app: App }): ReactElement => {
 	const t = useTranslation();
-	const { iconFileData, name, author, iconFileContent, installed, modifiedAt, bundledIn, versionIncompatible, isSubscribed } = app;
+	const {
+		iconFileData,
+		name,
+		author,
+		version,
+		iconFileContent,
+		installed,
+		modifiedAt,
+		bundledIn,
+		versionIncompatible,
+		isSubscribed,
+		shortDescription,
+	} = app;
+
 	const lastUpdated = modifiedAt && moment(modifiedAt).fromNow();
 	const incompatibleStatus = versionIncompatible ? appIncompatibleStatusProps() : undefined;
 
@@ -36,16 +49,41 @@ const AppDetailsPageHeader = ({ app }: { app: App }): ReactElement => {
 					</Box>
 					{bundledIn && Boolean(bundledIn.length) && <BundleChips bundledIn={bundledIn} />}
 				</Box>
-				{app?.shortDescription && <Box mbe='x16'>{app.shortDescription}</Box>}
+
+				{shortDescription && (
+					<Box fontScale='p1' color='default' mbe='x16'>
+						{shortDescription}
+					</Box>
+				)}
 
 				<Box display='flex' flexDirection='row' alignItems='center' mbe='x16'>
 					<AppStatus app={app} installed={installed} isAppDetailsPage />
 					{(installed || isSubscribed) && <AppMenu app={app} isAppDetailsPage mis='x8' />}
 				</Box>
 				<Box display='flex' flexDirection='row' color='hint' alignItems='center'>
-					<Box fontScale='p2m' mie='x16'>
-						{t('By_author', { author: author?.name })}
+					<Box fontScale='c1' mie='x16'>
+						{author?.name}
+					</Box>
+					<Box fontScale='c1' color='stroke-light'>
+						|
 					</Box>
+					<Box fontScale='c1' mi='x16'>
+						{t('Version_version', { version })}
+					</Box>
+
+					{lastUpdated && (
+						<>
+							<Box fontScale='c1' color='stroke-light'>
+								|
+							</Box>
+							<Box fontScale='c1' mis='x16'>
+								{t('Marketplace_app_last_updated', {
+									lastUpdated,
+								})}
+							</Box>
+						</>
+					)}
+
 					<Box is='span'> | </Box>
 
 					<Box mi='x16' marginInlineEnd='x4'>
@@ -62,17 +100,6 @@ const AppDetailsPageHeader = ({ app }: { app: App }): ReactElement => {
 							</Tag>
 						</Box>
 					)}
-
-					{lastUpdated && (
-						<>
-							<Box is='span'> | </Box>
-							<Box mi='x16'>
-								{t('Marketplace_app_last_updated', {
-									lastUpdated,
-								})}
-							</Box>
-						</>
-					)}
 				</Box>
 			</Box>
 		</Box>

apps/meteor/client/views/admin/apps/BundleChips.tsx

@@ -1,7 +1,7 @@
-import { Tag } from '@rocket.chat/fuselage';
+import { Box, PositionAnimated, Tag, Tooltip, AnimatedVisibility } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
-import React from 'react';
+import type { ReactElement, RefObject } from 'react';
+import React, { Fragment, useRef, useState } from 'react';
 
 import type { App } from './types';
 
@@ -15,19 +15,28 @@ type BundleChipsProps = {
 
 const BundleChips = ({ bundledIn }: BundleChipsProps): ReactElement => {
 	const t = useTranslation();
-
+	const bundleRef = useRef<Element>();
+	const [isHovered, setIsHovered] = useState(false);
 	return (
 		<>
-			{bundledIn.map((bundle, index) => (
-				<Tag
-					key={index}
-					title={t('this_app_is_included_with_subscription', {
-						bundleName: bundle.bundleName,
-					})}
-					variant='primary'
-				>
-					{bundle.bundleName}
-				</Tag>
+			{bundledIn.map((bundle) => (
+				<Fragment key={bundle.bundleId}>
+					<Box ref={bundleRef} onMouseEnter={(): void => setIsHovered(true)} onMouseLeave={(): void => setIsHovered(false)}>
+						<Tag variant='featured'>{bundle.bundleName}</Tag>
+					</Box>
+					<PositionAnimated
+						anchor={bundleRef as RefObject<Element>}
+						placement='top-middle'
+						margin={8}
+						visible={isHovered ? AnimatedVisibility.VISIBLE : AnimatedVisibility.HIDDEN}
+					>
+						<Tooltip>
+							{t('this_app_is_included_with_subscription', {
+								bundleName: bundle.bundleName,
+							})}
+						</Tooltip>
+					</PositionAnimated>
+				</Fragment>
 			))}
 		</>
 	);

apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json

@@ -776,7 +776,6 @@
   "Buy": "Buy",
   "By": "By",
   "by": "by",
-  "By_author": "By __author__",
   "cache_cleared": "Cache cleared",
   "Call": "Call",
   "Call_back": "Call back",