fix: New marketplace uxdqa (#28390)

Co-authored-by: Felipe <84182706+felipe-rod123@users.noreply.github.com>

apps/meteor/client/components/Sidebar/SidebarGenericItem.tsx

@@ -25,7 +25,7 @@ const SidebarGenericItem = ({ href, active, externalUrl, children, ...props }: S
 		{...(externalUrl && { target: '_blank', rel: 'noopener noreferrer' })}
 		{...props}
 	>
-		<Box display='flex' flexDirection='row' alignItems='center' pb='x8'>
+		<Box display='flex' flexDirection='row' alignItems='center' pb='x8' width='100%'>
 			{children}
 		</Box>
 	</SidebarItem>

apps/meteor/client/views/marketplace/AppDetailsPage/AppDetailsPage.tsx

@@ -99,6 +99,7 @@ const AppDetailsPage = ({ id }: { id: App['id'] }): ReactElement => {
 								marketplace={marketplace}
 								settings={settings}
 								tab={tab}
+								context={context || ''}
 							/>
 							{Boolean(!tab || tab === 'details') && <AppDetails app={appData} />}
 							{tab === 'requests' && <AppRequests id={id} isAdminUser={isAdminUser} />}

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

@@ -37,7 +37,7 @@ const AppDetailsPageHeader = ({ app }: { app: App }): ReactElement => {
 
 	return (
 		<Box color='default' 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'>

apps/meteor/client/views/marketplace/AppDetailsPage/AppDetailsPageLoading.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 
 const AppDetailsPageLoading: FC = () => (
 	<Box display='flex' flexDirection='row' mbe='x20' w='full'>
-		<Skeleton variant='rect' w='x120' h='x120' mie='x20' />
+		<Skeleton variant='rect' w='x120' h='x120' mie='x32' />
 		<Box display='flex' flexDirection='column' justifyContent='space-between' flexGrow={1}>
 			<Skeleton variant='rect' w='full' h='x32' />
 			<Skeleton variant='rect' w='full' h='x32' />

apps/meteor/client/views/marketplace/AppDetailsPage/AppDetailsPageTabs.tsx

@@ -11,9 +11,17 @@ type AppDetailsPageTabsProps = {
 	marketplace: unknown;
 	settings: ISettings | undefined;
 	tab: string | undefined;
+	context: string;
 };
 
-const AppDetailsPageTabs = ({ installed, isSecurityVisible, marketplace, settings, tab }: AppDetailsPageTabsProps): ReactElement => {
+const AppDetailsPageTabs = ({
+	installed,
+	isSecurityVisible,
+	marketplace,
+	settings,
+	tab,
+	context,
+}: AppDetailsPageTabsProps): ReactElement => {
 	const t = useTranslation();
 	const isAdminUser = usePermission('manage-apps');
 
@@ -33,7 +41,7 @@ const AppDetailsPageTabs = ({ installed, isSecurityVisible, marketplace, setting
 			<Tabs.Item onClick={(): void => handleTabClick('details')} selected={!tab || tab === 'details'}>
 				{t('Details')}
 			</Tabs.Item>
-			{isAdminUser && (
+			{isAdminUser && context !== 'private' && (
 				<Tabs.Item onClick={(): void => handleTabClick('requests')} selected={tab === 'requests'}>
 					{t('Requests')}
 				</Tabs.Item>

apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppStatus/AppStatus.tsx

@@ -113,7 +113,7 @@ const AppStatus = ({ app, showStatus = true, isAppDetailsPage, installed, ...pro
 	};
 
 	return (
-		<Box {...props} display='flex' alignItems='center'>
+		<Box {...props} display='flex' alignItems='center' mie='x8'>
 			{button && isAppDetailsPage && (!installed || canUpdate) && (
 				<Box
 					display='flex'
@@ -147,7 +147,7 @@ const AppStatus = ({ app, showStatus = true, isAppDetailsPage, installed, ...pro
 			)}
 
 			{statuses?.map((status, index) => (
-				<Margins inline='x8' key={index}>
+				<Margins inlineEnd='x8' key={index}>
 					<Tag variant={getStatusVariant(status)} title={status.tooltipText ? status.tooltipText : ''}>
 						{handleAppRequestsNumber(status)} {t(`${status.label}` as TranslationKey)}
 					</Tag>

apps/meteor/client/views/marketplace/AppsList/AppRow.tsx

@@ -79,17 +79,19 @@ const AppRow = (props: App): ReactElement => {
 		>
 			<Box display='flex' flexDirection='row' width='80%'>
 				<AppAvatar size='x40' mie='x16' alignSelf='center' iconFileContent={iconFileContent} iconFileData={iconFileData} />
-				<Box display='flex' alignItems='center' color='default' fontScale='p2m' mie='x16' withTruncatedText>
-					<Box withTruncatedText>{name}</Box>
+				<Box display='flex' alignItems='center' fontScale='p2m' mie='x16' withTruncatedText>
+					<Box withTruncatedText fontScale='h5' color='title-labels'>
+						{name}
+					</Box>
 				</Box>
-				<Box display='flex' mie='x16' alignItems='center' color='default'>
+				<Box display='flex' mie='x16' alignItems='center'>
 					{bundledIn && Boolean(bundledIn.length) && (
-						<Box display='flex' alignItems='center' color='default'>
+						<Box display='flex' alignItems='center'>
 							<BundleChips bundledIn={bundledIn} />
 						</Box>
 					)}
 					{shortDescription && !isMobile && (
-						<Box is='span' mis='x16'>
+						<Box is='span' mis='x16' fontScale='c1'>
 							{shortDescription}
 						</Box>
 					)}

apps/meteor/client/views/marketplace/components/EnabledAppsCount.tsx

@@ -18,6 +18,9 @@ const EnabledAppsCount = ({
 }): ReactElement | null => {
 	const t = useTranslation();
 
+	const privateAppsCountText: string = t('Private_Apps_Count_Enabled', { count: enabled });
+	const marketplaceAppsCountText: string = t('Apps_Count_Enabled', { count: enabled });
+
 	return (
 		<Box
 			display='flex'
@@ -31,13 +34,15 @@ const EnabledAppsCount = ({
 			})}
 		>
 			<Box display='flex' flexDirection='row' alignItems='center' justifyContent='space-between' w='full'>
-				<Box fontScale='c1'>{t('Apps_Count_Enabled', { count: enabled })}</Box>
+				<Box fontScale='c1'>{context === 'private' ? privateAppsCountText : marketplaceAppsCountText}</Box>
 
 				<Box fontScale='c1' color='annotation'>
 					{`${enabled} / ${limit}`}
 				</Box>
 			</Box>
-			<ProgressBar variant={variant} percentage={percentage} />
+			<Box mbs='x8'>
+				<ProgressBar variant={variant} percentage={percentage} />
+			</Box>
 		</Box>
 	);
 };

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

@@ -505,6 +505,8 @@
   "Apps_context_private": "Private Apps",
   "Apps_Count_Enabled": "__count__ app enabled",
   "Apps_Count_Enabled_plural": "__count__ apps enabled",
+  "Private_Apps_Count_Enabled": "__count__ private app enabled",
+  "Private_Apps_Count_Enabled_plural": "__count__ private apps enabled",
   "Apps_Count_Enabled_tooltip": "Community Edition workspaces can enable up to __number__ __context__ apps",
   "Apps_disabled_when_Enterprise_trial_ended": "Apps disabled when Enterprise trial ended",
   "Apps_disabled_when_Enterprise_trial_ended_description": "Workspaces on Community Edition can have up to 5 marketplace apps and 3 private apps enabled. Ask your workspace admin to reenable apps.",