From 216ae6ef55c313a34bc31821a27055261aae65e3 Mon Sep 17 00:00:00 2001
From: rique223 <henrique.jobs1@gmail.com>
Date: Thu, 17 Nov 2022 17:11:05 -0300
Subject: [PATCH 01/15] style: :lipstick: Refactor app details page header
 style

Increased the rightside margin of the app avatar, removed the 'by' substring from the app author metadata and changed the fontScale and colors for the metadata section and short description.
---
 .../client/components/avatar/AppAvatar.tsx    | 14 ++--------
 .../AppDetailsPage/AppDetailsPageHeader.tsx   | 28 +++++++++++++------
 .../rocketchat-i18n/i18n/en.i18n.json         |  1 -
 3 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/apps/meteor/client/components/avatar/AppAvatar.tsx b/apps/meteor/client/components/avatar/AppAvatar.tsx
index fc19fca92e1d..07a1e569984e 100644
--- a/apps/meteor/client/components/avatar/AppAvatar.tsx
+++ b/apps/meteor/client/components/avatar/AppAvatar.tsx
@@ -1,21 +1,13 @@
 import { Box } from '@rocket.chat/fuselage';
-import React, { ReactElement } from 'react';
+import React, { ComponentProps, ReactElement } 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
index 381b09135497..8e51bc69875d 100644
--- a/apps/meteor/client/views/admin/apps/AppDetailsPage/AppDetailsPageHeader.tsx
+++ b/apps/meteor/client/views/admin/apps/AppDetailsPage/AppDetailsPageHeader.tsx
@@ -11,12 +11,12 @@ import AppStatus from './tabs/AppStatus';
 
 const AppDetailsPageHeader = ({ app }: { app: App }): ReactElement => {
 	const t = useTranslation();
-	const { iconFileData, name, author, version, iconFileContent, installed, isSubscribed, modifiedAt, bundledIn } = app;
+	const { iconFileData, name, author, version, iconFileContent, installed, isSubscribed, modifiedAt, bundledIn, shortDescription } = app;
 	const lastUpdated = modifiedAt && moment(modifiedAt).fromNow();
 
 	return (
 		<Box display='flex' flexDirection='row' mbe='x20' w='full'>
-			<AppAvatar size='x124' mie='x20' iconFileContent={iconFileContent} iconFileData={iconFileData} />
+			<AppAvatar size='x124' mie='x32' iconFileContent={iconFileContent} iconFileData={iconFileData} />
 			<Box display='flex' flexDirection='column'>
 				<Box display='flex' flexDirection='row' alignItems='center' mbe='x8'>
 					<Box fontScale='h1' mie='x8'>
@@ -24,21 +24,31 @@ 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={true} isSubscribed={isSubscribed} />
 					{(installed || isSubscribed) && <AppMenu app={app} 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>
-					<Box is='span'> | </Box>
-					<Box mi='x16'>{t('Version_version', { version })}</Box>
 					{lastUpdated && (
 						<>
-							<Box is='span'> | </Box>
-							<Box mis='x16'>
+							<Box fontScale='c1' color='stroke-light'>
+								|
+							</Box>
+							<Box fontScale='c1' mis='x16'>
 								{t('Marketplace_app_last_updated', {
 									lastUpdated,
 								})}
diff --git a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json
index 4465d96e271d..8a8d61215763 100644
--- a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json
+++ b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json
@@ -765,7 +765,6 @@
   "Buy": "Buy",
   "By": "By",
   "by": "by",
-  "By_author": "By __author__",
   "cache_cleared": "Cache cleared",
   "Call": "Call",
   "Calling": "Calling",

From 206de926313d1b65f75e0364b0be9b61e4a3ce8c Mon Sep 17 00:00:00 2001
From: Felipe <84182706+felipe-rod123@users.noreply.github.com>
Date: Mon, 5 Dec 2022 14:07:50 -0300
Subject: [PATCH 02/15] change Tag variant to 'enterprise'

---
 apps/meteor/client/views/admin/apps/BundleChips.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/meteor/client/views/admin/apps/BundleChips.tsx b/apps/meteor/client/views/admin/apps/BundleChips.tsx
index 7150893f8026..d6b95acfca34 100644
--- a/apps/meteor/client/views/admin/apps/BundleChips.tsx
+++ b/apps/meteor/client/views/admin/apps/BundleChips.tsx
@@ -23,7 +23,7 @@ const BundleChips = ({ bundledIn }: BundleChipsProps): ReactElement => {
 			{bundledIn.map((bundle) => (
 				<Fragment key={bundle.bundleId}>
 					<Box ref={bundleRef} onMouseEnter={(): void => setIsHovered(true)} onMouseLeave={(): void => setIsHovered(false)}>
-						<Tag variant='primary'>{bundle.bundleName}</Tag>
+						<Tag variant='enterprise'>{bundle.bundleName}</Tag>
 					</Box>
 					<PositionAnimated
 						anchor={bundleRef as RefObject<Element>}

From 64bbbec7e0a2f3a9eda08bee3344328094eee196 Mon Sep 17 00:00:00 2001
From: Felipe <84182706+felipe-rod123@users.noreply.github.com>
Date: Fri, 9 Dec 2022 18:02:44 -0300
Subject: [PATCH 03/15] fix imports

---
 apps/meteor/client/views/admin/apps/BundleChips.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/apps/meteor/client/views/admin/apps/BundleChips.tsx b/apps/meteor/client/views/admin/apps/BundleChips.tsx
index 24b0306bbc51..f7f669863170 100644
--- a/apps/meteor/client/views/admin/apps/BundleChips.tsx
+++ b/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,13 +15,14 @@ type BundleChipsProps = {
 
 const BundleChips = ({ bundledIn }: BundleChipsProps): ReactElement => {
 	const t = useTranslation();
-
+	const bundleRef = useRef<Element>();
+	const [isHovered, setIsHovered] = useState(false);
 	return (
 		<>
 			{bundledIn.map((bundle) => (
 				<Fragment key={bundle.bundleId}>
 					<Box ref={bundleRef} onMouseEnter={(): void => setIsHovered(true)} onMouseLeave={(): void => setIsHovered(false)}>
-						<Tag variant='enterprise'>{bundle.bundleName}</Tag>
+						<Tag variant='featured'>{bundle.bundleName}</Tag>
 					</Box>
 					<PositionAnimated
 						anchor={bundleRef as RefObject<Element>}

From 2ecfa79aba6b61c1866694d6e3692df136f43dae Mon Sep 17 00:00:00 2001
From: Felipe <84182706+felipe-rod123@users.noreply.github.com>
Date: Wed, 14 Dec 2022 12:18:12 -0300
Subject: [PATCH 04/15] fix 'featured' variant and conflicts

---
 .../AppDetailsPage/AppDetailsPageHeader.tsx   | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/apps/meteor/client/views/admin/apps/AppDetailsPage/AppDetailsPageHeader.tsx b/apps/meteor/client/views/admin/apps/AppDetailsPage/AppDetailsPageHeader.tsx
index 4c3eff25586e..51238eb316e1 100644
--- 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, version, iconFileContent, installed, isSubscribed, modifiedAt, bundledIn, shortDescription } = 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;
@@ -65,13 +77,13 @@ const AppDetailsPageHeader = ({ app }: { app: App }): ReactElement => {
 								|
 							</Box>
 							<Box fontScale='c1' mis='x16'>
-              {t('Marketplace_app_last_updated', {
+								{t('Marketplace_app_last_updated', {
 									lastUpdated,
 								})}
 							</Box>
 						</>
 					)}
-          
+
 					<Box is='span'> | </Box>
 
 					<Box mi='x16' marginInlineEnd='x4'>
@@ -88,7 +100,6 @@ const AppDetailsPageHeader = ({ app }: { app: App }): ReactElement => {
 							</Tag>
 						</Box>
 					)}
-
 				</Box>
 			</Box>
 		</Box>

From ff54978633df01302f7dbc8a63d072055501c497 Mon Sep 17 00:00:00 2001
From: Felipe <84182706+felipe-rod123@users.noreply.github.com>
Date: Thu, 15 Dec 2022 12:48:47 -0300
Subject: [PATCH 05/15] fix lint

---
 apps/meteor/client/components/avatar/AppAvatar.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/meteor/client/components/avatar/AppAvatar.tsx b/apps/meteor/client/components/avatar/AppAvatar.tsx
index 07a1e569984e..c146eb4b10fc 100644
--- a/apps/meteor/client/components/avatar/AppAvatar.tsx
+++ b/apps/meteor/client/components/avatar/AppAvatar.tsx
@@ -1,5 +1,6 @@
 import { Box } from '@rocket.chat/fuselage';
-import React, { ComponentProps, ReactElement } from 'react';
+import type { ComponentProps, ReactElement } from 'react';
+import React from 'react';
 
 import BaseAvatar from './BaseAvatar';
 

From f204458e3278271b9b793c4619749085d3c3babd Mon Sep 17 00:00:00 2001
From: rique223 <henrique.jobs1@gmail.com>
Date: Tue, 10 Jan 2023 15:56:34 -0300
Subject: [PATCH 06/15] Refactor unnecessary code for enterprise tag tooltip

---
 .../client/views/admin/apps/BundleChips.tsx   | 28 ++++++++-----------
 1 file changed, 11 insertions(+), 17 deletions(-)

diff --git a/apps/meteor/client/views/admin/apps/BundleChips.tsx b/apps/meteor/client/views/admin/apps/BundleChips.tsx
index f7f669863170..80e824adbb44 100644
--- a/apps/meteor/client/views/admin/apps/BundleChips.tsx
+++ b/apps/meteor/client/views/admin/apps/BundleChips.tsx
@@ -1,7 +1,7 @@
-import { Box, PositionAnimated, Tag, Tooltip, AnimatedVisibility } from '@rocket.chat/fuselage';
+import { Box, Tag } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import type { ReactElement, RefObject } from 'react';
-import React, { Fragment, useRef, useState } from 'react';
+import type { ReactElement } from 'react';
+import React, { Fragment, useRef } from 'react';
 
 import type { App } from './types';
 
@@ -16,26 +16,20 @@ type BundleChipsProps = {
 const BundleChips = ({ bundledIn }: BundleChipsProps): ReactElement => {
 	const t = useTranslation();
 	const bundleRef = useRef<Element>();
-	const [isHovered, setIsHovered] = useState(false);
 	return (
 		<>
 			{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', {
+					<Box ref={bundleRef}>
+						<Tag
+							variant='featured'
+							title={t('this_app_is_included_with_subscription', {
 								bundleName: bundle.bundleName,
 							})}
-						</Tooltip>
-					</PositionAnimated>
+						>
+							{bundle.bundleName}
+						</Tag>
+					</Box>
 				</Fragment>
 			))}
 		</>

From b6fd6bb543411a5478d5c775f70799b526ffdd27 Mon Sep 17 00:00:00 2001
From: rique223 <henrique.jobs1@gmail.com>
Date: Tue, 10 Jan 2023 16:57:09 -0300
Subject: [PATCH 07/15] style: :lipstick: Remove unnecessary AppMenu margin

---
 .../views/admin/apps/AppDetailsPage/AppDetailsPageHeader.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/meteor/client/views/admin/apps/AppDetailsPage/AppDetailsPageHeader.tsx b/apps/meteor/client/views/admin/apps/AppDetailsPage/AppDetailsPageHeader.tsx
index 614368b007c2..ac2f1d3e9b4d 100644
--- a/apps/meteor/client/views/admin/apps/AppDetailsPage/AppDetailsPageHeader.tsx
+++ b/apps/meteor/client/views/admin/apps/AppDetailsPage/AppDetailsPageHeader.tsx
@@ -58,7 +58,7 @@ const AppDetailsPageHeader = ({ app }: { app: App }): ReactElement => {
 
 				<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='c1' mie='x16'>

From 9c78c32416f8b11a9cebe0e3c682275494a59cd9 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Tue, 10 Jan 2023 17:39:53 -0300
Subject: [PATCH 08/15] review

---
 .../AppDetailsPage/AppDetailsPageHeader.tsx   | 26 ++++++++-----------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/apps/meteor/client/views/admin/apps/AppDetailsPage/AppDetailsPageHeader.tsx b/apps/meteor/client/views/admin/apps/AppDetailsPage/AppDetailsPageHeader.tsx
index 614368b007c2..d360748423b8 100644
--- a/apps/meteor/client/views/admin/apps/AppDetailsPage/AppDetailsPageHeader.tsx
+++ b/apps/meteor/client/views/admin/apps/AppDetailsPage/AppDetailsPageHeader.tsx
@@ -60,23 +60,19 @@ const AppDetailsPageHeader = ({ app }: { app: App }): ReactElement => {
 					<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='c1' mie='x16'>
-						{author?.name}
-					</Box>
-					<Box fontScale='c1' color='stroke-light'>
+				<Box fontScale='c1' display='flex' flexDirection='row' color='hint' alignItems='center'>
+					{author?.name}
+					<Box mi='x16' color='disabled'>
 						|
 					</Box>
-					<Box fontScale='c1' mi='x16'>
-						{t('Version_version', { version })}
-					</Box>
+					{t('Version_version', { version })}
 
 					{lastUpdated && (
 						<>
-							<Box fontScale='c1' color='stroke-light'>
+							<Box mi='x16' color='disabled'>
 								|
 							</Box>
-							<Box fontScale='c1' mis='x16'>
+							<Box>
 								{t('Marketplace_app_last_updated', {
 									lastUpdated,
 								})}
@@ -84,14 +80,14 @@ const AppDetailsPageHeader = ({ app }: { app: App }): ReactElement => {
 						</>
 					)}
 
-					<Box is='span'> | </Box>
-
-					<Box mi='x16' marginInlineEnd='x4'>
-						{t('Version_version', { version: versioni18nKey(app) })}
+					<Box mi='x16' color='disabled'>
+						|
 					</Box>
 
+					<Box>{t('Version_version', { version: versioni18nKey(app) })}</Box>
+
 					{versionIncompatible && (
-						<Box is='span' marginInlineEnd='x16' marginBlockStart='x4'>
+						<Box mi='x16'>
 							<Tag
 								title={incompatibleStatus?.tooltipText}
 								variant={incompatibleStatus?.label === 'Disabled' ? 'secondary-danger' : 'secondary'}

From 6dbc6b95e1be0ec4532f8607e872386da136f557 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Tue, 10 Jan 2023 18:04:43 -0300
Subject: [PATCH 09/15] remove mis from AppStatus to align with other elements

---
 .../admin/apps/AppDetailsPage/tabs/AppStatus/AppStatus.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index e6d92cd2adf0..b120c6db8c87 100644
--- 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'>
 			{button && isAppDetailsPage && (
 				<Box
 					display='flex'

From 78aa6ebb09e24eb2a9a9458598bd9259ecd6d4f4 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Tue, 10 Jan 2023 18:09:06 -0300
Subject: [PATCH 10/15] replace Button custom styling with small variant

---
 .../admin/apps/AppDetailsPage/tabs/AppStatus/AppStatus.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index b120c6db8c87..330b8f26a251 100644
--- a/apps/meteor/client/views/admin/apps/AppDetailsPage/tabs/AppStatus/AppStatus.tsx
+++ b/apps/meteor/client/views/admin/apps/AppDetailsPage/tabs/AppStatus/AppStatus.tsx
@@ -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}>
 						{loading ? (
 							<Throbber inheritColor />
 						) : (

From 345228d6462d01ded7ab38ad4224d47635410dd8 Mon Sep 17 00:00:00 2001
From: rique223 <henrique.jobs1@gmail.com>
Date: Wed, 11 Jan 2023 12:06:23 -0300
Subject: [PATCH 11/15] Remove unnecessary ref from BundleChips component

---
 apps/meteor/client/views/admin/apps/BundleChips.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/meteor/client/views/admin/apps/BundleChips.tsx b/apps/meteor/client/views/admin/apps/BundleChips.tsx
index 80e824adbb44..20ba306b2827 100644
--- a/apps/meteor/client/views/admin/apps/BundleChips.tsx
+++ b/apps/meteor/client/views/admin/apps/BundleChips.tsx
@@ -1,7 +1,7 @@
 import { Box, Tag } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
-import React, { Fragment, useRef } from 'react';
+import React, { Fragment } from 'react';
 
 import type { App } from './types';
 
@@ -15,12 +15,12 @@ type BundleChipsProps = {
 
 const BundleChips = ({ bundledIn }: BundleChipsProps): ReactElement => {
 	const t = useTranslation();
-	const bundleRef = useRef<Element>();
+
 	return (
 		<>
 			{bundledIn.map((bundle) => (
 				<Fragment key={bundle.bundleId}>
-					<Box ref={bundleRef}>
+					<Box>
 						<Tag
 							variant='featured'
 							title={t('this_app_is_included_with_subscription', {

From c881653137836e50eb86527053edfd4500c317d1 Mon Sep 17 00:00:00 2001
From: rique223 <henrique.jobs1@gmail.com>
Date: Fri, 13 Jan 2023 12:02:03 -0300
Subject: [PATCH 12/15] Reviews

---
 .../AppDetailsPage/AppDetailsPageHeader.tsx   |  2 +-
 .../client/views/admin/apps/BundleChips.tsx   | 25 ++++++++-----------
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/apps/meteor/client/views/admin/apps/AppDetailsPage/AppDetailsPageHeader.tsx b/apps/meteor/client/views/admin/apps/AppDetailsPage/AppDetailsPageHeader.tsx
index b8af840fec5d..bfcc72d279bf 100644
--- a/apps/meteor/client/views/admin/apps/AppDetailsPage/AppDetailsPageHeader.tsx
+++ b/apps/meteor/client/views/admin/apps/AppDetailsPage/AppDetailsPageHeader.tsx
@@ -51,7 +51,7 @@ const AppDetailsPageHeader = ({ app }: { app: App }): ReactElement => {
 				</Box>
 
 				{shortDescription && (
-					<Box fontScale='p1' color='default' mbe='x16'>
+					<Box fontScale='p1' mbe='x16'>
 						{shortDescription}
 					</Box>
 				)}
diff --git a/apps/meteor/client/views/admin/apps/BundleChips.tsx b/apps/meteor/client/views/admin/apps/BundleChips.tsx
index 20ba306b2827..9f988534fe14 100644
--- a/apps/meteor/client/views/admin/apps/BundleChips.tsx
+++ b/apps/meteor/client/views/admin/apps/BundleChips.tsx
@@ -1,7 +1,7 @@
-import { Box, Tag } from '@rocket.chat/fuselage';
+import { Tag } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
-import React, { Fragment } from 'react';
+import React from 'react';
 
 import type { App } from './types';
 
@@ -19,18 +19,15 @@ const BundleChips = ({ bundledIn }: BundleChipsProps): ReactElement => {
 	return (
 		<>
 			{bundledIn.map((bundle) => (
-				<Fragment key={bundle.bundleId}>
-					<Box>
-						<Tag
-							variant='featured'
-							title={t('this_app_is_included_with_subscription', {
-								bundleName: bundle.bundleName,
-							})}
-						>
-							{bundle.bundleName}
-						</Tag>
-					</Box>
-				</Fragment>
+				<Tag
+					key={bundle.bundleId}
+					variant='featured'
+					title={t('this_app_is_included_with_subscription', {
+						bundleName: bundle.bundleName,
+					})}
+				>
+					{bundle.bundleName}
+				</Tag>
 			))}
 		</>
 	);

From 5090b45edd119e717ba638ade0f1ad21c6d00db9 Mon Sep 17 00:00:00 2001
From: dougfabris <devfabris@gmail.com>
Date: Fri, 13 Jan 2023 13:33:20 -0300
Subject: [PATCH 13/15] chore: margins

---
 .../apps/AppDetailsPage/tabs/AppStatus/AppStatus.tsx   | 10 ++++------
 .../meteor/client/views/admin/apps/AppsList/AppRow.tsx |  6 +++++-
 2 files changed, 9 insertions(+), 7 deletions(-)

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
index 330b8f26a251..71f0da8602b4 100644
--- 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'>
+		<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 small disabled={loading} onClick={handleClick}>
+					<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
index 05271b590d1a..ef07ed5482ee 100644
--- 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' />

From e21632305c60f34796c598c7c1c3a60f9b329593 Mon Sep 17 00:00:00 2001
From: rique223 <henrique.jobs1@gmail.com>
Date: Fri, 13 Jan 2023 13:44:51 -0300
Subject: [PATCH 14/15] fix: :bug: Remove duplicated app version from
 AppDetailsPageHeader

---
 .../admin/apps/AppDetailsPage/AppDetailsPageHeader.tsx      | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/apps/meteor/client/views/admin/apps/AppDetailsPage/AppDetailsPageHeader.tsx b/apps/meteor/client/views/admin/apps/AppDetailsPage/AppDetailsPageHeader.tsx
index bfcc72d279bf..61477500a3cb 100644
--- a/apps/meteor/client/views/admin/apps/AppDetailsPage/AppDetailsPageHeader.tsx
+++ b/apps/meteor/client/views/admin/apps/AppDetailsPage/AppDetailsPageHeader.tsx
@@ -26,7 +26,6 @@ const AppDetailsPageHeader = ({ app }: { app: App }): ReactElement => {
 		iconFileData,
 		name,
 		author,
-		version,
 		iconFileContent,
 		installed,
 		modifiedAt,
@@ -65,7 +64,8 @@ const AppDetailsPageHeader = ({ app }: { app: App }): ReactElement => {
 					<Box mi='x16' color='disabled'>
 						|
 					</Box>
-					{t('Version_version', { version })}
+
+					<Box>{t('Version_version', { version: versioni18nKey(app) })}</Box>
 
 					{lastUpdated && (
 						<>
@@ -84,8 +84,6 @@ const AppDetailsPageHeader = ({ app }: { app: App }): ReactElement => {
 						|
 					</Box>
 
-					<Box>{t('Version_version', { version: versioni18nKey(app) })}</Box>
-
 					{versionIncompatible && (
 						<Box mi='x16'>
 							<Tag

From 79fd6c9c6755c9398099614f1c6f12ce41eb4ee1 Mon Sep 17 00:00:00 2001
From: dougfabris <devfabris@gmail.com>
Date: Fri, 13 Jan 2023 16:59:43 -0300
Subject: [PATCH 15/15] chore: divider

---
 .../AppDetailsPage/AppDetailsPageHeader.tsx   | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/apps/meteor/client/views/admin/apps/AppDetailsPage/AppDetailsPageHeader.tsx b/apps/meteor/client/views/admin/apps/AppDetailsPage/AppDetailsPageHeader.tsx
index 61477500a3cb..383b4e1cde98 100644
--- a/apps/meteor/client/views/admin/apps/AppDetailsPage/AppDetailsPageHeader.tsx
+++ b/apps/meteor/client/views/admin/apps/AppDetailsPage/AppDetailsPageHeader.tsx
@@ -80,19 +80,21 @@ const AppDetailsPageHeader = ({ app }: { app: App }): ReactElement => {
 						</>
 					)}
 
-					<Box mi='x16' color='disabled'>
-						|
-					</Box>
-
 					{versionIncompatible && (
-						<Box mi='x16'>
-							<Tag
-								title={incompatibleStatus?.tooltipText}
-								variant={incompatibleStatus?.label === 'Disabled' ? 'secondary-danger' : 'secondary'}
-							>
-								{incompatibleStatus?.label}
-							</Tag>
-						</Box>
+						<>
+							<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>