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

…styles (#27293) Co-authored-by: Felipe <84182706+felipe-rod123@users.noreply.github.com> Co-authored-by: Júlia Jaeger Foresti <60678893+juliajforesti@users.noreply.github.com> Co-authored-by: Douglas Fabris <27704687+dougfabris@users.noreply.github.com>
RocketChat · Jan 16, 2023 · cf8e44c · cf8e44c
1 parent c420e99
commit cf8e44c
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 45 deletions.
diff --git a/apps/meteor/client/components/avatar/AppAvatar.tsx b/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 (

diff --git a/apps/meteor/client/views/admin/apps/AppDetailsPage/AppDetailsPageHeader.tsx b/apps/meteor/client/views/admin/apps/AppDetailsPage/AppDetailsPageHeader.tsx
@@ -22,7 +22,19 @@ 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,
+		iconFileContent,
+		installed,
+		modifiedAt,
+		bundledIn,
+		versionIncompatible,
+		isSubscribed,
+		shortDescription,
+	} = app;
+
 	const lastUpdated = modifiedAt && moment(modifiedAt).fromNow();
 	const incompatibleStatus = versionIncompatible ? appIncompatibleStatusProps() : undefined;
 
@@ -36,43 +48,54 @@ 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' 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' />}
+					{(installed || isSubscribed) && <AppMenu app={app} isAppDetailsPage />}
 				</Box>
-				<Box display='flex' flexDirection='row' color='hint' alignItems='center'>
-					<Box fontScale='p2m' mie='x16'>
-						{t('By_author', { author: author?.name })}
+				<Box fontScale='c1' display='flex' flexDirection='row' color='hint' alignItems='center'>
+					{author?.name}
+					<Box mi='x16' color='disabled'>
+						|
 					</Box>
-					<Box is='span'> | </Box>
 
-					<Box mi='x16' marginInlineEnd='x4'>
-						{t('Version_version', { version: versioni18nKey(app) })}
-					</Box>
-
-					{versionIncompatible && (
-						<Box is='span' marginInlineEnd='x16' marginBlockStart='x4'>
-							<Tag
-								title={incompatibleStatus?.tooltipText}
-								variant={incompatibleStatus?.label === 'Disabled' ? 'secondary-danger' : 'secondary'}
-							>
-								{incompatibleStatus?.label}
-							</Tag>
-						</Box>
-					)}
+					<Box>{t('Version_version', { version: versioni18nKey(app) })}</Box>
 
 					{lastUpdated && (
 						<>
-							<Box is='span'> | </Box>
-							<Box mi='x16'>
+							<Box mi='x16' color='disabled'>
+								|
+							</Box>
+							<Box>
 								{t('Marketplace_app_last_updated', {
 									lastUpdated,
 								})}
 							</Box>
 						</>
 					)}
+
+					{versionIncompatible && (
+						<>
+							<Box mi='x16' color='disabled'>
+								|
+							</Box>
+
+							<Box mi='x16'>
+								<Tag
+									title={incompatibleStatus?.tooltipText}
+									variant={incompatibleStatus?.label === 'Disabled' ? 'secondary-danger' : 'secondary'}
+								>
+									{incompatibleStatus?.label}
+								</Tag>
+							</Box>
+						</>
+					)}
 				</Box>
 			</Box>
 		</Box>

diff --git a/apps/meteor/client/views/admin/apps/AppDetailsPage/tabs/AppStatus/AppStatus.tsx b/apps/meteor/client/views/admin/apps/AppDetailsPage/tabs/AppStatus/AppStatus.tsx
@@ -122,7 +122,7 @@ const AppStatus = ({ app, showStatus = true, isAppDetailsPage, installed, ...pro
 	const shouldShowPriceDisplay = isAppDetailsPage && button;
 
 	return (
-		<Box {...props} display='flex' mis='x4'>
+		<Box {...props} display='flex' alignItems='center'>
 			{button && isAppDetailsPage && (
 				<Box
 					display='flex'
@@ -132,7 +132,7 @@ const AppStatus = ({ app, showStatus = true, isAppDetailsPage, installed, ...pro
 					borderRadius='x4'
 					invisible={!showStatus && !loading}
 				>
-					<Button primary fontSize='x12' fontWeight={700} disabled={loading} onClick={handleClick} pi='x8' pb='x6' lineHeight='x14'>
+					<Button primary small disabled={loading} onClick={handleClick} mie='x8'>
 						{loading ? (
 							<Throbber inheritColor />
 						) : (
@@ -144,16 +144,14 @@ const AppStatus = ({ app, showStatus = true, isAppDetailsPage, installed, ...pro
 					</Button>
 
 					{shouldShowPriceDisplay && !installed && (
-						<Box mis='x8'>
-							<AppStatusPriceDisplay purchaseType={purchaseType} pricingPlans={pricingPlans} price={price} showType={false} />
-						</Box>
+						<AppStatusPriceDisplay purchaseType={purchaseType} pricingPlans={pricingPlans} price={price} showType={false} />
 					)}
 				</Box>
 			)}
 
 			{statuses?.map((status, index) => (
 				<Fragment key={index}>
-					<Margins all='x8'>
+					<Margins inlineEnd='x8'>
 						{status.tooltipText ? (
 							<Tag title={status.tooltipText} variant={status.label === 'Disabled' ? 'secondary-danger' : undefined}>
 								{status.label}

diff --git a/apps/meteor/client/views/admin/apps/AppsList/AppRow.tsx b/apps/meteor/client/views/admin/apps/AppsList/AppRow.tsx
@@ -96,7 +96,11 @@ const AppRow = (props: AppRowProps): ReactElement => {
 				</Box>
 			</Box>
 			<Box display='flex' flexDirection='row' width='20%' alignItems='center' justifyContent='flex-end' onClick={preventClickPropagation}>
-				{canUpdate && <Badge small variant='primary' />}
+				{canUpdate && (
+					<Box mie='x8'>
+						<Badge small variant='primary' />
+					</Box>
+				)}
 				<AppStatus app={props} isAppDetailsPage={false} installed={installed} />
 				<Box minWidth='x32'>
 					<AppMenu app={props} isAppDetailsPage={false} mis='x4' />

diff --git a/apps/meteor/client/views/admin/apps/BundleChips.tsx b/apps/meteor/client/views/admin/apps/BundleChips.tsx
@@ -18,13 +18,13 @@ const BundleChips = ({ bundledIn }: BundleChipsProps): ReactElement => {
 
 	return (
 		<>
-			{bundledIn.map((bundle, index) => (
+			{bundledIn.map((bundle) => (
 				<Tag
-					key={index}
+					key={bundle.bundleId}
+					variant='featured'
 					title={t('this_app_is_included_with_subscription', {
 						bundleName: bundle.bundleName,
 					})}
-					variant='primary'
 				>
 					{bundle.bundleName}
 				</Tag>

diff --git a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json b/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",