Merge branch 'develop' into feat/hide-exportMessages

.changeset/sour-roses-invite.md

@@ -0,0 +1,6 @@
+---
+"@rocket.chat/meteor": minor
+---
+
+Improves the workspace and subscription admin pages by updating font scaling, centralizing elements, 
+enhancing responsiveness, and refactoring components to provide a better overall user experience.

apps/meteor/client/views/admin/subscription/SubscriptionPage.tsx

@@ -138,16 +138,17 @@ const SubscriptionPage = () => {
 						)}
 						<Box marginBlock='none' marginInline='auto' width='full' color='default'>
 							<Grid m={0}>
-								<Grid.Item lg={4} xs={4} p={8}>
+								<Grid.Item lg={4} xs={4} p={8} minHeight={260}>
 									{license && <PlanCard licenseInformation={license.information} licenseLimits={{ activeUsers: seatsLimit }} />}
 									{!license && <PlanCardCommunity />}
 								</Grid.Item>
-								<Grid.Item lg={8} xs={4} p={8}>
+
+								<Grid.Item lg={8} xs={4} p={8} minHeight={260}>
 									<FeaturesCard activeModules={activeModules} isEnterprise={isEnterprise} />
 								</Grid.Item>
 
 								{seatsLimit.value !== undefined && (
-									<Grid.Item lg={6} xs={4} p={8}>
+									<Grid.Item lg={6} xs={4} p={8} minHeight={260}>
 										{seatsLimit.max !== Infinity ? (
 											<SeatsCard value={seatsLimit.value} max={seatsLimit.max} hideManageSubscription={licensesData?.trial} />
 										) : (
@@ -157,7 +158,7 @@ const SubscriptionPage = () => {
 								)}
 
 								{macLimit.value !== undefined && (
-									<Grid.Item lg={6} xs={4} p={8}>
+									<Grid.Item lg={6} xs={4} p={8} minHeight={260}>
 										{macLimit.max !== Infinity ? (
 											<MACCard max={macLimit.max} value={macLimit.value} hideManageSubscription={licensesData?.trial} />
 										) : (
@@ -169,15 +170,15 @@ const SubscriptionPage = () => {
 								{!license && (
 									<>
 										{limits?.marketplaceApps !== undefined && (
-											<Grid.Item lg={4} xs={4} p={8}>
+											<Grid.Item lg={4} xs={4} p={8} minHeight={260}>
 												<AppsUsageCard privateAppsLimit={limits?.privateApps} marketplaceAppsLimit={limits.marketplaceApps} />
 											</Grid.Item>
 										)}
 
-										<Grid.Item lg={4} xs={4} p={8}>
+										<Grid.Item lg={4} xs={4} p={8} minHeight={260}>
 											<ActiveSessionsCard />
 										</Grid.Item>
-										<Grid.Item lg={4} xs={4} p={8}>
+										<Grid.Item lg={4} xs={4} p={8} minHeight={260}>
 											<ActiveSessionsPeakCard />
 										</Grid.Item>
 									</>

apps/meteor/client/views/admin/subscription/components/FeatureUsageCard.tsx

@@ -1,4 +1,4 @@
-import { Box, Card, CardBody, CardControls, CardTitle } from '@rocket.chat/fuselage';
+import { Card, CardControls, CardTitle } from '@rocket.chat/fuselage';
 import type { ReactElement, ReactNode } from 'react';
 import React, { memo } from 'react';
 
@@ -17,16 +17,13 @@ export type CardProps = {
 
 const FeatureUsageCard = ({ children, card }: FeatureUsageCardProps): ReactElement => {
 	const { title, infoText, upgradeButton } = card;
+
 	return (
 		<Card height='full'>
 			<CardTitle>
 				{title} {infoText && <InfoTextIconModal title={title} infoText={infoText} />}
 			</CardTitle>
-			<CardBody>
-				<Box h='full' w='full'>
-					{children}
-				</Box>
-			</CardBody>
+			{children}
 			{upgradeButton && <CardControls>{upgradeButton}</CardControls>}
 		</Card>
 	);

apps/meteor/client/views/admin/subscription/components/FeatureUsageCardBody.tsx

@@ -0,0 +1,15 @@
+import { Box, CardBody } from '@rocket.chat/fuselage';
+import type { ReactNode } from 'react';
+import React from 'react';
+
+type FeatureUsageCardBodyProps = { justifyContent?: 'flex-start' | 'center'; children: ReactNode };
+
+const FeatureUsageCardBody = ({ justifyContent = 'center', children }: FeatureUsageCardBodyProps) => (
+	<CardBody>
+		<Box h='full' w='full' display='flex' alignItems='center' justifyContent={justifyContent} flexDirection='column'>
+			{children}
+		</Box>
+	</CardBody>
+);
+
+export default FeatureUsageCardBody;

apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsCard.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { useActiveConnections } from '../../../../hooks/useActiveConnections';
 import type { CardProps } from '../FeatureUsageCard';
 import FeatureUsageCard from '../FeatureUsageCard';
+import FeatureUsageCardBody from '../FeatureUsageCardBody';
 import UpgradeButton from '../UpgradeButton';
 
 const getLimits = ({ max, current }: { max: number; current: number }) => {
@@ -35,7 +36,9 @@ const ActiveSessionsCard = (): ReactElement => {
 	if (result.isLoading || result.isError) {
 		return (
 			<FeatureUsageCard card={card}>
-				<Skeleton variant='rect' width='x112' height='x112' />
+				<FeatureUsageCardBody justifyContent='flex-start'>
+					<Skeleton variant='rect' width='x112' height='x224' />
+				</FeatureUsageCardBody>
 			</FeatureUsageCard>
 		);
 	}
@@ -55,12 +58,14 @@ const ActiveSessionsCard = (): ReactElement => {
 				}),
 			}}
 		>
-			<Box color='font-secondary-info'>
-				<Box fontScale='h1' color={exceedLimit ? 'font-danger' : 'font-default'} mbe={12}>
-					{used} / {total}
+			<FeatureUsageCardBody justifyContent='flex-start'>
+				<Box color='font-secondary-info' textAlign='center'>
+					<Box fontScale='h1' color={exceedLimit ? 'font-danger' : 'font-default'} mbe={12}>
+						{used} / {total}
+					</Box>
+					{available} {t('ActiveSessions_available')}
 				</Box>
-				{available} {t('ActiveSessions_available')}
-			</Box>
+			</FeatureUsageCardBody>
 		</FeatureUsageCard>
 	);
 };

apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsPeakCard.tsx

@@ -7,6 +7,7 @@ import { useFormatDate } from '../../../../../hooks/useFormatDate';
 import { useStatistics } from '../../../../hooks/useStatistics';
 import type { CardProps } from '../FeatureUsageCard';
 import FeatureUsageCard from '../FeatureUsageCard';
+import FeatureUsageCardBody from '../FeatureUsageCardBody';
 import UpgradeButton from '../UpgradeButton';
 
 const ActiveSessionsPeakCard = (): ReactElement => {
@@ -36,14 +37,16 @@ const ActiveSessionsPeakCard = (): ReactElement => {
 	if (isLoading || maxMonthlyPeakConnections === undefined) {
 		return (
 			<FeatureUsageCard card={card}>
-				<Skeleton variant='rect' width='x112' height='x112' />
+				<FeatureUsageCardBody justifyContent='flex-start'>
+					<Skeleton variant='rect' width='x112' height='x112' />
+				</FeatureUsageCardBody>
 			</FeatureUsageCard>
 		);
 	}
 
 	return (
 		<FeatureUsageCard card={card}>
-			<Box color='font-secondary-info'>
+			<Box color='font-secondary-info' textAlign='center'>
 				<Box fontScale='h1' color={exceedLimit ? 'font-danger' : 'font-default'} mbe={12}>
 					{used} / {total}
 				</Box>

apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCard.tsx

@@ -8,6 +8,7 @@ import AppsUsageCardSection from './AppsUsageCardSection';
 import { PRICING_LINK } from '../../../utils/links';
 import type { CardProps } from '../../FeatureUsageCard';
 import FeatureUsageCard from '../../FeatureUsageCard';
+import FeatureUsageCardBody from '../../FeatureUsageCardBody';
 import UpgradeButton from '../../UpgradeButton';
 
 // Magic numbers
@@ -27,7 +28,9 @@ const AppsUsageCard = ({ privateAppsLimit, marketplaceAppsLimit }: AppsUsageCard
 		// FIXME: not accessible enough
 		return (
 			<FeatureUsageCard card={{ title: t('Apps') }}>
-				<Skeleton variant='rect' width='x112' height='x112' role='presentation' />
+				<FeatureUsageCardBody justifyContent='flex-start'>
+					<Skeleton variant='rect' width='x112' height='x224' role='presentation' />
+				</FeatureUsageCardBody>
 			</FeatureUsageCard>
 		);
 	}
@@ -61,20 +64,22 @@ const AppsUsageCard = ({ privateAppsLimit, marketplaceAppsLimit }: AppsUsageCard
 
 	return (
 		<FeatureUsageCard card={card}>
-			<AppsUsageCardSection
-				title={t('Marketplace_apps')}
-				appsCount={marketplaceAppsCount}
-				appsMaxCount={marketplaceAppsMaxCount}
-				warningThreshold={defaultWarningThreshold}
-			/>
+			<FeatureUsageCardBody justifyContent='flex-start'>
+				<AppsUsageCardSection
+					title={t('Marketplace_apps')}
+					appsCount={marketplaceAppsCount}
+					appsMaxCount={marketplaceAppsMaxCount}
+					warningThreshold={defaultWarningThreshold}
+				/>
 
-			<AppsUsageCardSection
-				title={t('Private_apps')}
-				tip={privateAppsMaxCount === 0 ? t('Private_apps_premium_message') : undefined}
-				appsCount={privateAppsCount}
-				appsMaxCount={privateAppsMaxCount}
-				warningThreshold={defaultWarningThreshold}
-			/>
+				<AppsUsageCardSection
+					title={t('Private_apps')}
+					tip={privateAppsMaxCount === 0 ? t('Private_apps_premium_message') : undefined}
+					appsCount={privateAppsCount}
+					appsMaxCount={privateAppsMaxCount}
+					warningThreshold={defaultWarningThreshold}
+				/>
+			</FeatureUsageCardBody>
 		</FeatureUsageCard>
 	);
 };

apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCardSection.tsx

@@ -17,7 +17,7 @@ const AppsUsageCardSection = ({ title, tip, appsCount, appsMaxCount, warningThre
 	const labelId = useUniqueId();
 
 	return (
-		<Box fontScale='c1' mb={12} title={tip}>
+		<Box fontScale='c1' mb={12} title={tip} display='flex' flexDirection='column' width='100%'>
 			<Box display='flex' flexGrow='1' justifyContent='space-between' mbe={4}>
 				<div id={labelId}>{title}</div>
 

apps/meteor/client/views/admin/subscription/components/cards/CountMACCard.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import FeatureUsageCard from '../FeatureUsageCard';
+import FeatureUsageCardBody from '../FeatureUsageCardBody';
 
 const CountMACCard = ({ macsCount }: { macsCount: number }): ReactElement => {
 	const { t } = useTranslation();
@@ -15,10 +16,12 @@ const CountMACCard = ({ macsCount }: { macsCount: number }): ReactElement => {
 				infoText: t('CountMAC_InfoText'),
 			}}
 		>
-			<Box fontScale='h1'>
-				<Icon color='font-annotation' name='headset' size={40} mie={4} />
-				{macsCount}
-			</Box>
+			<FeatureUsageCardBody>
+				<Box fontScale='h1'>
+					<Icon color='font-annotation' name='headset' size={40} mie={4} />
+					{macsCount}
+				</Box>
+			</FeatureUsageCardBody>
 		</FeatureUsageCard>
 	);
 };

apps/meteor/client/views/admin/subscription/components/cards/CountSeatsCard.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import FeatureUsageCard from '../FeatureUsageCard';
+import FeatureUsageCardBody from '../FeatureUsageCardBody';
 
 const CountSeatsCard = ({ activeUsers }: { activeUsers: number }): ReactElement => {
 	const { t } = useTranslation();
@@ -15,10 +16,12 @@ const CountSeatsCard = ({ activeUsers }: { activeUsers: number }): ReactElement
 				infoText: t('CountSeats_InfoText'),
 			}}
 		>
-			<Box fontScale='h1'>
-				<Icon color='font-annotation' name='user' size={40} mie={4} />
-				{activeUsers}
-			</Box>
+			<FeatureUsageCardBody>
+				<Box fontScale='h1' display='flex' alignItems='center' justifyContent='center'>
+					<Icon color='font-annotation' name='user' size={40} mie={4} />
+					{activeUsers}
+				</Box>
+			</FeatureUsageCardBody>
 		</FeatureUsageCard>
 	);
 };

apps/meteor/client/views/admin/subscription/components/cards/MACCard.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 
 import type { CardProps } from '../FeatureUsageCard';
 import FeatureUsageCard from '../FeatureUsageCard';
+import FeatureUsageCardBody from '../FeatureUsageCardBody';
 import UpgradeButton from '../UpgradeButton';
 import UsagePieGraph from '../UsagePieGraph';
 
@@ -57,7 +58,9 @@ const MACCard = ({
 
 	return (
 		<FeatureUsageCard card={card}>
-			<UsagePieGraph label={message} used={pieGraph.used} total={pieGraph.total} color={color} />
+			<FeatureUsageCardBody>
+				<UsagePieGraph label={message} used={pieGraph.used} total={pieGraph.total} color={color} />
+			</FeatureUsageCardBody>
 		</FeatureUsageCard>
 	);
 };

apps/meteor/client/views/admin/subscription/components/cards/PlanCard/PlanCardCommunity.tsx

@@ -1,4 +1,4 @@
-import { Card, CardBody, CardRow, Icon } from '@rocket.chat/fuselage';
+import { Box, Card, CardBody, Icon } from '@rocket.chat/fuselage';
 import type { ReactElement } from 'react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -12,12 +12,12 @@ const PlanCardCommunity = (): ReactElement => {
 		<Card height='full'>
 			<PlanCardHeader name={t('Community')} />
 			<CardBody flexDirection='column'>
-				<CardRow>
+				<Box display='flex' flexDirection='row' alignItems='center'>
 					<Icon name='card' size={24} mie={12} /> {t('free_per_month_user')}
-				</CardRow>
-				<CardRow>
+				</Box>
+				<Box display='flex' flexDirection='row' alignItems='center'>
 					<Icon name='cloud-plus' size={24} mie={12} /> {t('Self_managed_hosting')}
-				</CardRow>
+				</Box>
 			</CardBody>
 		</Card>
 	);

apps/meteor/client/views/admin/subscription/components/cards/SeatsCard.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 
 import type { CardProps } from '../FeatureUsageCard';
 import FeatureUsageCard from '../FeatureUsageCard';
+import FeatureUsageCardBody from '../FeatureUsageCardBody';
 import UpgradeButton from '../UpgradeButton';
 import UsagePieGraph from '../UsagePieGraph';
 
@@ -43,7 +44,9 @@ const SeatsCard = ({ value, max, hideManageSubscription }: SeatsCardProps): Reac
 	const message = seatsLeft > 0 ? t('Seats_Available', { seatsLeft }) : undefined;
 	return (
 		<FeatureUsageCard card={card}>
-			<UsagePieGraph label={message} used={pieGraph.used} total={pieGraph.total} color={color} />
+			<FeatureUsageCardBody>
+				<UsagePieGraph label={message} used={pieGraph.used} total={pieGraph.total} color={color} />
+			</FeatureUsageCardBody>
 		</FeatureUsageCard>
 	);
 };