From 3177e77e8a8235b068933a49242a0e27b05f008b Mon Sep 17 00:00:00 2001
From: rique223 <henrique.jobs1@gmail.com>
Date: Mon, 25 Nov 2024 12:57:22 -0300
Subject: [PATCH 01/16] refactor: :recycle: Change WorkspaceCardSection header
 titles to h4

The WorkspaceCardSection component was updated to improve typography and clarify title differentiation. The header titles now use the h4 font scale, while the section titles have been updated to use the p2b font scale. Additionally, the default font scale of the component text was changed to p2. A new boolean property was also added to differentiate between header titles and section titles, ensuring consistent styling and clearer hierarchy.
---
 .../admin/workspace/DeploymentCard/DeploymentCard.tsx      | 2 +-
 .../workspace/MessagesRoomsCard/MessagesRoomsCard.tsx      | 2 ++
 .../admin/workspace/UsersUploadsCard/UsersUploadsCard.tsx  | 3 +++
 .../admin/workspace/components/WorkspaceCardSection.tsx    | 7 ++++---
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.tsx b/apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.tsx
index 5cf225771745..f1e4a752bedb 100644
--- a/apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.tsx
+++ b/apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.tsx
@@ -30,7 +30,7 @@ const DeploymentCard = ({ serverInfo: { info, cloudWorkspaceId }, statistics, in
 
 	return (
 		<Card data-qa-id='deployment-card' height='full'>
-			<WorkspaceCardSection title={t('Deployment')} />
+			<WorkspaceCardSection title={t('Deployment')} isHeader />
 			<WorkspaceCardSection title={t('Version')} body={statistics.version} />
 			<WorkspaceCardSection title={t('Deployment_ID')} body={statistics.uniqueId} />
 
diff --git a/apps/meteor/client/views/admin/workspace/MessagesRoomsCard/MessagesRoomsCard.tsx b/apps/meteor/client/views/admin/workspace/MessagesRoomsCard/MessagesRoomsCard.tsx
index b608df3ed5c5..189a022e3780 100644
--- a/apps/meteor/client/views/admin/workspace/MessagesRoomsCard/MessagesRoomsCard.tsx
+++ b/apps/meteor/client/views/admin/workspace/MessagesRoomsCard/MessagesRoomsCard.tsx
@@ -28,6 +28,7 @@ const MessagesRoomsCard = ({ statistics }: MessagesRoomsCardProps): ReactElement
 						<WorkspaceCardTextSeparator label={t('Total')} value={statistics.totalRooms} />
 					</>
 				}
+				isHeader
 			/>
 
 			<WorkspaceCardSection
@@ -54,6 +55,7 @@ const MessagesRoomsCard = ({ statistics }: MessagesRoomsCardProps): ReactElement
 						<WorkspaceCardTextSeparator label={t('Total')} value={statistics.totalMessages} />
 					</>
 				}
+				isHeader
 			/>
 		</Card>
 	);
diff --git a/apps/meteor/client/views/admin/workspace/UsersUploadsCard/UsersUploadsCard.tsx b/apps/meteor/client/views/admin/workspace/UsersUploadsCard/UsersUploadsCard.tsx
index bbf3a27d47b6..2b86dad3bee9 100644
--- a/apps/meteor/client/views/admin/workspace/UsersUploadsCard/UsersUploadsCard.tsx
+++ b/apps/meteor/client/views/admin/workspace/UsersUploadsCard/UsersUploadsCard.tsx
@@ -41,6 +41,7 @@ const UsersUploadsCard = ({ statistics }: UsersUploadsCardProps): ReactElement =
 							<WorkspaceCardTextSeparator label={t('Total')} value={statistics.totalUsers} />
 						</>
 					}
+					isHeader
 				/>
 
 				<WorkspaceCardSection
@@ -54,6 +55,7 @@ const UsersUploadsCard = ({ statistics }: UsersUploadsCardProps): ReactElement =
 							<WorkspaceCardTextSeparator label={t('Stats_App_Users')} value={statistics.appUsers} />
 						</>
 					}
+					isHeader
 				/>
 
 				<WorkspaceCardSection
@@ -64,6 +66,7 @@ const UsersUploadsCard = ({ statistics }: UsersUploadsCardProps): ReactElement =
 							<WorkspaceCardTextSeparator label={t('Stats_Total_Uploads_Size')} value={formatMemorySize(statistics.uploadsTotalSize)} />
 						</>
 					}
+					isHeader
 				/>
 			</CardBody>
 
diff --git a/apps/meteor/client/views/admin/workspace/components/WorkspaceCardSection.tsx b/apps/meteor/client/views/admin/workspace/components/WorkspaceCardSection.tsx
index f120daaf0886..8e4cf8bcfc12 100644
--- a/apps/meteor/client/views/admin/workspace/components/WorkspaceCardSection.tsx
+++ b/apps/meteor/client/views/admin/workspace/components/WorkspaceCardSection.tsx
@@ -5,12 +5,13 @@ import React from 'react';
 type WorkspaceCardSectionProps = {
 	title: string;
 	body?: ReactNode;
+	isHeader?: boolean;
 };
 
-const WorkspaceCardSection = ({ title, body }: WorkspaceCardSectionProps) => {
+const WorkspaceCardSection = ({ title, body, isHeader }: WorkspaceCardSectionProps) => {
 	return (
-		<Box fontScale='c1'>
-			<Box fontScale='c2'>{title}</Box>
+		<Box fontScale='p2'>
+			<Box fontScale={isHeader ? 'h4' : 'p2b'}>{title}</Box>
 			{body && body}
 		</Box>
 	);

From e030929417ac07b3cd50070c643ddd6310869f09 Mon Sep 17 00:00:00 2001
From: rique223 <henrique.jobs1@gmail.com>
Date: Mon, 25 Nov 2024 15:16:35 -0300
Subject: [PATCH 02/16] refactor: :recycle: Centralize seats and Monthly Active
 Contracts content vertically and horizontally

---
 .../admin/subscription/components/FeatureUsageCard.tsx   | 9 +++++++--
 .../subscription/components/cards/ActiveSessionsCard.tsx | 2 +-
 .../components/cards/AppsUsageCard/AppsUsageCard.tsx     | 2 +-
 .../cards/AppsUsageCard/AppsUsageCardSection.tsx         | 2 +-
 .../subscription/components/cards/CountSeatsCard.tsx     | 2 +-
 5 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/apps/meteor/client/views/admin/subscription/components/FeatureUsageCard.tsx b/apps/meteor/client/views/admin/subscription/components/FeatureUsageCard.tsx
index 34a9746b1b53..1a2ffb597c88 100644
--- a/apps/meteor/client/views/admin/subscription/components/FeatureUsageCard.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/FeatureUsageCard.tsx
@@ -1,4 +1,5 @@
 import { Box, Card, CardBody, CardControls, CardTitle } from '@rocket.chat/fuselage';
+import { useBreakpoints } from '@rocket.chat/fuselage-hooks';
 import type { ReactElement, ReactNode } from 'react';
 import React, { memo } from 'react';
 
@@ -17,13 +18,17 @@ export type CardProps = {
 
 const FeatureUsageCard = ({ children, card }: FeatureUsageCardProps): ReactElement => {
 	const { title, infoText, upgradeButton } = card;
+
+	const breakpoints = useBreakpoints();
+	const isMobile = !breakpoints.includes('lg');
+
 	return (
-		<Card height='full'>
+		<Card height={isMobile ? 'full' : 'x244'}>
 			<CardTitle>
 				{title} {infoText && <InfoTextIconModal title={title} infoText={infoText} />}
 			</CardTitle>
 			<CardBody>
-				<Box h='full' w='full'>
+				<Box h='full' w='full' display='flex' alignItems='center' justifyContent='center' flexDirection='column'>
 					{children}
 				</Box>
 			</CardBody>
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsCard.tsx b/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsCard.tsx
index e42ae7f6b744..6245cff43100 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsCard.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsCard.tsx
@@ -35,7 +35,7 @@ const ActiveSessionsCard = (): ReactElement => {
 	if (result.isLoading || result.isError) {
 		return (
 			<FeatureUsageCard card={card}>
-				<Skeleton variant='rect' width='x112' height='x112' />
+				<Skeleton variant='rect' width='x112' height='x224' />
 			</FeatureUsageCard>
 		);
 	}
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCard.tsx b/apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCard.tsx
index a87ef914aba0..2bc8dd164e56 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCard.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCard.tsx
@@ -27,7 +27,7 @@ const AppsUsageCard = ({ privateAppsLimit, marketplaceAppsLimit }: AppsUsageCard
 		// FIXME: not accessible enough
 		return (
 			<FeatureUsageCard card={{ title: t('Apps') }}>
-				<Skeleton variant='rect' width='x112' height='x112' role='presentation' />
+				<Skeleton variant='rect' width='x112' height='x224' role='presentation' />
 			</FeatureUsageCard>
 		);
 	}
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCardSection.tsx b/apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCardSection.tsx
index ac17957eda01..843e782cdafd 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCardSection.tsx
+++ b/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>
 
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/CountSeatsCard.tsx b/apps/meteor/client/views/admin/subscription/components/cards/CountSeatsCard.tsx
index a730c4cdf9fb..6a89881efa48 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/CountSeatsCard.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/cards/CountSeatsCard.tsx
@@ -15,7 +15,7 @@ const CountSeatsCard = ({ activeUsers }: { activeUsers: number }): ReactElement
 				infoText: t('CountSeats_InfoText'),
 			}}
 		>
-			<Box fontScale='h1'>
+			<Box fontScale='h1' display='flex' alignItems='center' justifyContent='center'>
 				<Icon color='font-annotation' name='user' size={40} mie={4} />
 				{activeUsers}
 			</Box>

From 53e3c417f7ef29a62ce6b4330a4ce35e08da1010 Mon Sep 17 00:00:00 2001
From: rique223 <henrique.jobs1@gmail.com>
Date: Mon, 25 Nov 2024 15:25:33 -0300
Subject: [PATCH 03/16] refactor: :recycle: Centralize active sessions and
 Active sessions peak content horizontally

---
 .../subscription/components/FeatureUsageCard.tsx    | 13 +++++++++++--
 .../components/cards/ActiveSessionsCard.tsx         |  1 +
 .../components/cards/ActiveSessionsPeakCard.tsx     |  1 +
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/apps/meteor/client/views/admin/subscription/components/FeatureUsageCard.tsx b/apps/meteor/client/views/admin/subscription/components/FeatureUsageCard.tsx
index 1a2ffb597c88..a2f047ec5d1d 100644
--- a/apps/meteor/client/views/admin/subscription/components/FeatureUsageCard.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/FeatureUsageCard.tsx
@@ -14,12 +14,14 @@ export type CardProps = {
 	title: string;
 	infoText?: ReactNode;
 	upgradeButton?: ReactNode;
+	isHorizontallyCenteredOnly?: boolean;
 };
 
 const FeatureUsageCard = ({ children, card }: FeatureUsageCardProps): ReactElement => {
-	const { title, infoText, upgradeButton } = card;
+	const { title, infoText, upgradeButton, isHorizontallyCenteredOnly } = card;
 
 	const breakpoints = useBreakpoints();
+
 	const isMobile = !breakpoints.includes('lg');
 
 	return (
@@ -28,7 +30,14 @@ const FeatureUsageCard = ({ children, card }: FeatureUsageCardProps): ReactEleme
 				{title} {infoText && <InfoTextIconModal title={title} infoText={infoText} />}
 			</CardTitle>
 			<CardBody>
-				<Box h='full' w='full' display='flex' alignItems='center' justifyContent='center' flexDirection='column'>
+				<Box
+					h='full'
+					w='full'
+					display='flex'
+					alignItems='center'
+					justifyContent={isHorizontallyCenteredOnly ? 'flex-start' : 'center'}
+					flexDirection='column'
+				>
 					{children}
 				</Box>
 			</CardBody>
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsCard.tsx b/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsCard.tsx
index 6245cff43100..33122e5081ec 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsCard.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsCard.tsx
@@ -53,6 +53,7 @@ const ActiveSessionsCard = (): ReactElement => {
 						</UpgradeButton>
 					),
 				}),
+				isHorizontallyCenteredOnly: true,
 			}}
 		>
 			<Box color='font-secondary-info'>
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsPeakCard.tsx b/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsPeakCard.tsx
index 02ac3eeeb536..b418ec4c6f31 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsPeakCard.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsPeakCard.tsx
@@ -31,6 +31,7 @@ const ActiveSessionsPeakCard = (): ReactElement => {
 				</UpgradeButton>
 			),
 		}),
+		isHorizontallyCenteredOnly: true,
 	};
 
 	if (isLoading || maxMonthlyPeakConnections === undefined) {

From fa0349f769cc5a395068f1b407ac287e5dc7e625 Mon Sep 17 00:00:00 2001
From: rique223 <henrique.jobs1@gmail.com>
Date: Mon, 25 Nov 2024 20:13:54 -0300
Subject: [PATCH 04/16] refactor: :recycle: Adjust spacing for
 PlanCardCommunity and AppsUsageCard

---
 .../components/cards/AppsUsageCard/AppsUsageCard.tsx   |  1 +
 .../components/cards/PlanCard/PlanCardCommunity.tsx    | 10 +++++-----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCard.tsx b/apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCard.tsx
index 2bc8dd164e56..c99ebab0ee5d 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCard.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCard.tsx
@@ -49,6 +49,7 @@ const AppsUsageCard = ({ privateAppsLimit, marketplaceAppsLimit }: AppsUsageCard
 				components={{ 1: <ExternalLink to={PRICING_LINK}>premium plans</ExternalLink> }}
 			/>
 		),
+		isHorizontallyCenteredOnly: true,
 
 		...(marketplaceAppsAboveWarning && {
 			upgradeButton: (
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/PlanCard/PlanCardCommunity.tsx b/apps/meteor/client/views/admin/subscription/components/cards/PlanCard/PlanCardCommunity.tsx
index 3ce0ee07cabd..e11c3ebe378c 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/PlanCard/PlanCardCommunity.tsx
+++ b/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' mbe={8}>
 					<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>
 	);

From d7e697e8a970da6de6ffa6ca56bf9d705b92e045 Mon Sep 17 00:00:00 2001
From: rique223 <henrique.jobs1@gmail.com>
Date: Mon, 25 Nov 2024 20:34:13 -0300
Subject: [PATCH 05/16] wip: paliative for card min-height

---
 .../admin/subscription/components/FeatureUsageCard.tsx     | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/apps/meteor/client/views/admin/subscription/components/FeatureUsageCard.tsx b/apps/meteor/client/views/admin/subscription/components/FeatureUsageCard.tsx
index a2f047ec5d1d..c4d23f30e20d 100644
--- a/apps/meteor/client/views/admin/subscription/components/FeatureUsageCard.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/FeatureUsageCard.tsx
@@ -1,5 +1,4 @@
 import { Box, Card, CardBody, CardControls, CardTitle } from '@rocket.chat/fuselage';
-import { useBreakpoints } from '@rocket.chat/fuselage-hooks';
 import type { ReactElement, ReactNode } from 'react';
 import React, { memo } from 'react';
 
@@ -20,12 +19,8 @@ export type CardProps = {
 const FeatureUsageCard = ({ children, card }: FeatureUsageCardProps): ReactElement => {
 	const { title, infoText, upgradeButton, isHorizontallyCenteredOnly } = card;
 
-	const breakpoints = useBreakpoints();
-
-	const isMobile = !breakpoints.includes('lg');
-
 	return (
-		<Card height={isMobile ? 'full' : 'x244'}>
+		<Card height='full' style={{ minHeight: '244px' }}>
 			<CardTitle>
 				{title} {infoText && <InfoTextIconModal title={title} infoText={infoText} />}
 			</CardTitle>

From c9d5136e63361fbc08a7eca263c1eed6b1789fd6 Mon Sep 17 00:00:00 2001
From: rique223 <henrique.jobs1@gmail.com>
Date: Wed, 27 Nov 2024 17:51:04 -0300
Subject: [PATCH 06/16] Add proper minHeight and remove unnecessary margin

---
 .../views/admin/subscription/SubscriptionPage.tsx | 15 ++++++++-------
 .../components/cards/ActiveSessionsCard.tsx       |  2 +-
 .../components/cards/ActiveSessionsPeakCard.tsx   |  2 +-
 .../cards/PlanCard/PlanCardCommunity.tsx          |  2 +-
 4 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/apps/meteor/client/views/admin/subscription/SubscriptionPage.tsx b/apps/meteor/client/views/admin/subscription/SubscriptionPage.tsx
index e6f5beffe7ba..8b840cece40a 100644
--- a/apps/meteor/client/views/admin/subscription/SubscriptionPage.tsx
+++ b/apps/meteor/client/views/admin/subscription/SubscriptionPage.tsx
@@ -130,16 +130,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={244}>
 									{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={244}>
 									<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={244}>
 										{seatsLimit.max !== Infinity ? (
 											<SeatsCard value={seatsLimit.value} max={seatsLimit.max} hideManageSubscription={licensesData?.trial} />
 										) : (
@@ -149,7 +150,7 @@ const SubscriptionPage = () => {
 								)}
 
 								{macLimit.value !== undefined && (
-									<Grid.Item lg={6} xs={4} p={8}>
+									<Grid.Item lg={6} xs={4} p={8} minHeight={244}>
 										{macLimit.max !== Infinity ? (
 											<MACCard max={macLimit.max} value={macLimit.value} hideManageSubscription={licensesData?.trial} />
 										) : (
@@ -161,15 +162,15 @@ const SubscriptionPage = () => {
 								{!license && (
 									<>
 										{limits?.marketplaceApps !== undefined && (
-											<Grid.Item lg={4} xs={4} p={8}>
+											<Grid.Item lg={4} xs={4} p={8} minHeight={244}>
 												<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={244}>
 											<ActiveSessionsCard />
 										</Grid.Item>
-										<Grid.Item lg={4} xs={4} p={8}>
+										<Grid.Item lg={4} xs={4} p={8} minHeight={244}>
 											<ActiveSessionsPeakCard />
 										</Grid.Item>
 									</>
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsCard.tsx b/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsCard.tsx
index 33122e5081ec..62950d29bfb0 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsCard.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsCard.tsx
@@ -56,7 +56,7 @@ const ActiveSessionsCard = (): ReactElement => {
 				isHorizontallyCenteredOnly: true,
 			}}
 		>
-			<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>
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsPeakCard.tsx b/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsPeakCard.tsx
index b418ec4c6f31..96f3e32a27f1 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsPeakCard.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsPeakCard.tsx
@@ -44,7 +44,7 @@ const ActiveSessionsPeakCard = (): ReactElement => {
 
 	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>
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/PlanCard/PlanCardCommunity.tsx b/apps/meteor/client/views/admin/subscription/components/cards/PlanCard/PlanCardCommunity.tsx
index e11c3ebe378c..f55da3ad06fc 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/PlanCard/PlanCardCommunity.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/cards/PlanCard/PlanCardCommunity.tsx
@@ -12,7 +12,7 @@ const PlanCardCommunity = (): ReactElement => {
 		<Card height='full'>
 			<PlanCardHeader name={t('Community')} />
 			<CardBody flexDirection='column'>
-				<Box display='flex' flexDirection='row' alignItems='center' mbe={8}>
+				<Box display='flex' flexDirection='row' alignItems='center'>
 					<Icon name='card' size={24} mie={12} /> {t('free_per_month_user')}
 				</Box>
 				<Box display='flex' flexDirection='row' alignItems='center'>

From 57ad4f9e888f76489ef6b83fdb9ece59e93d5100 Mon Sep 17 00:00:00 2001
From: rique223 <henrique.jobs1@gmail.com>
Date: Thu, 28 Nov 2024 15:38:29 -0300
Subject: [PATCH 07/16] refactor: :recycle: Paliative for workspace spacing

---
 .../DeploymentCard/DeploymentCard.tsx         | 61 +++++++-------
 .../MessagesRoomsCard/MessagesRoomsCard.tsx   | 10 +--
 .../UsersUploadsCard/UsersUploadsCard.tsx     | 79 ++++++++++---------
 .../components/WorkspaceCardSection.tsx       |  4 +-
 .../WorkspaceCardSectionWithHeader.tsx        | 22 ++++++
 5 files changed, 102 insertions(+), 74 deletions(-)
 create mode 100644 apps/meteor/client/views/admin/workspace/components/WorkspaceCardSectionWithHeader.tsx

diff --git a/apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.tsx b/apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.tsx
index f1e4a752bedb..df0c31de1809 100644
--- a/apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.tsx
+++ b/apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.tsx
@@ -1,5 +1,5 @@
 import type { IWorkspaceInfo, IStats } from '@rocket.chat/core-typings';
-import { Button, Card, CardControls } from '@rocket.chat/fuselage';
+import { Button, Card, CardBody, CardControls, Margins } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import type { IInstance } from '@rocket.chat/rest-typings';
 import { useSetModal } from '@rocket.chat/ui-contexts';
@@ -10,6 +10,7 @@ import { useTranslation } from 'react-i18next';
 import { useFormatDateAndTime } from '../../../../hooks/useFormatDateAndTime';
 import WorkspaceCardSection from '../components/WorkspaceCardSection';
 import InstancesModal from './components/InstancesModal';
+import WorkspaceCardSectionWithHeader from '../components/WorkspaceCardSectionWithHeader';
 
 type DeploymentCardProps = {
 	serverInfo: IWorkspaceInfo;
@@ -30,35 +31,39 @@ const DeploymentCard = ({ serverInfo: { info, cloudWorkspaceId }, statistics, in
 
 	return (
 		<Card data-qa-id='deployment-card' height='full'>
-			<WorkspaceCardSection title={t('Deployment')} isHeader />
-			<WorkspaceCardSection title={t('Version')} body={statistics.version} />
-			<WorkspaceCardSection title={t('Deployment_ID')} body={statistics.uniqueId} />
+			<CardBody flexDirection='column'>
+				<WorkspaceCardSectionWithHeader title={t('Deployment')} titleToContentGap={20} />
+				<Margins blockEnd={8}>
+					<WorkspaceCardSection title={t('Version')} body={statistics.version} />
+					<WorkspaceCardSection title={t('Deployment_ID')} body={statistics.uniqueId} />
 
-			{cloudWorkspaceId && <WorkspaceCardSection title={t('Cloud_Workspace_Id')} body={cloudWorkspaceId} />}
+					{cloudWorkspaceId && <WorkspaceCardSection title={t('Cloud_Workspace_Id')} body={cloudWorkspaceId} />}
 
-			{appsEngineVersion && <WorkspaceCardSection title={t('Apps_Engine_Version')} body={appsEngineVersion} />}
-			<WorkspaceCardSection title={t('Node_version')} body={statistics.process.nodeVersion} />
-			<WorkspaceCardSection
-				title={t('DB_Migration')}
-				body={`${statistics.migration.version} (${formatDateAndTime(statistics.migration.lockedAt)})`}
-			/>
-			<WorkspaceCardSection
-				title={t('MongoDB')}
-				body={`${statistics.mongoVersion} / ${statistics.mongoStorageEngine} ${
-					!statistics.msEnabled ? `(oplog ${statistics.oplogEnabled ? t('Enabled') : t('Disabled')})` : ''
-				}`}
-			/>
-			<WorkspaceCardSection
-				title={t('Commit_details')}
-				body={
-					<>
-						{t('github_HEAD')}: ({commit.hash ? commit.hash.slice(0, 9) : ''}) <br />
-						{t('Branch')}: {commit.branch} <br />
-						{commit.subject}
-					</>
-				}
-			/>
-			<WorkspaceCardSection title={t('PID')} body={statistics.process.pid} />
+					{appsEngineVersion && <WorkspaceCardSection title={t('Apps_Engine_Version')} body={appsEngineVersion} />}
+					<WorkspaceCardSection title={t('Node_version')} body={statistics.process.nodeVersion} />
+					<WorkspaceCardSection
+						title={t('DB_Migration')}
+						body={`${statistics.migration.version} (${formatDateAndTime(statistics.migration.lockedAt)})`}
+					/>
+					<WorkspaceCardSection
+						title={t('MongoDB')}
+						body={`${statistics.mongoVersion} / ${statistics.mongoStorageEngine} ${
+							!statistics.msEnabled ? `(oplog ${statistics.oplogEnabled ? t('Enabled') : t('Disabled')})` : ''
+						}`}
+					/>
+					<WorkspaceCardSection
+						title={t('Commit_details')}
+						body={
+							<>
+								{t('github_HEAD')}: ({commit.hash ? commit.hash.slice(0, 9) : ''}) <br />
+								{t('Branch')}: {commit.branch} <br />
+								{commit.subject}
+							</>
+						}
+					/>
+					<WorkspaceCardSection title={t('PID')} body={statistics.process.pid} />
+				</Margins>
+			</CardBody>
 
 			{!!instances.length && (
 				<CardControls>
diff --git a/apps/meteor/client/views/admin/workspace/MessagesRoomsCard/MessagesRoomsCard.tsx b/apps/meteor/client/views/admin/workspace/MessagesRoomsCard/MessagesRoomsCard.tsx
index 189a022e3780..7c9e6582a2bc 100644
--- a/apps/meteor/client/views/admin/workspace/MessagesRoomsCard/MessagesRoomsCard.tsx
+++ b/apps/meteor/client/views/admin/workspace/MessagesRoomsCard/MessagesRoomsCard.tsx
@@ -4,7 +4,7 @@ import type { ReactElement } from 'react';
 import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import WorkspaceCardSection from '../components/WorkspaceCardSection';
+import WorkspaceCardSectionWithHeader from '../components/WorkspaceCardSectionWithHeader';
 import WorkspaceCardTextSeparator from '../components/WorkspaceCardTextSeparator';
 
 type MessagesRoomsCardProps = {
@@ -16,7 +16,7 @@ const MessagesRoomsCard = ({ statistics }: MessagesRoomsCardProps): ReactElement
 
 	return (
 		<Card height='full'>
-			<WorkspaceCardSection
+			<WorkspaceCardSectionWithHeader
 				title={t('Total_rooms')}
 				body={
 					<>
@@ -28,10 +28,10 @@ const MessagesRoomsCard = ({ statistics }: MessagesRoomsCardProps): ReactElement
 						<WorkspaceCardTextSeparator label={t('Total')} value={statistics.totalRooms} />
 					</>
 				}
-				isHeader
+				titleToContentGap={20}
 			/>
 
-			<WorkspaceCardSection
+			<WorkspaceCardSectionWithHeader
 				title={t('Messages')}
 				body={
 					<>
@@ -55,7 +55,7 @@ const MessagesRoomsCard = ({ statistics }: MessagesRoomsCardProps): ReactElement
 						<WorkspaceCardTextSeparator label={t('Total')} value={statistics.totalMessages} />
 					</>
 				}
-				isHeader
+				titleToContentGap={20}
 			/>
 		</Card>
 	);
diff --git a/apps/meteor/client/views/admin/workspace/UsersUploadsCard/UsersUploadsCard.tsx b/apps/meteor/client/views/admin/workspace/UsersUploadsCard/UsersUploadsCard.tsx
index 2b86dad3bee9..4950fc4a245e 100644
--- a/apps/meteor/client/views/admin/workspace/UsersUploadsCard/UsersUploadsCard.tsx
+++ b/apps/meteor/client/views/admin/workspace/UsersUploadsCard/UsersUploadsCard.tsx
@@ -1,5 +1,5 @@
 import type { IStats } from '@rocket.chat/core-typings';
-import { Button, Card, CardBody, CardControls } from '@rocket.chat/fuselage';
+import { Button, Card, CardBody, CardControls, Margins } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useRouter } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
@@ -8,7 +8,7 @@ import { useTranslation } from 'react-i18next';
 
 import { useFormatMemorySize } from '../../../../hooks/useFormatMemorySize';
 import { useHasLicenseModule } from '../../../../hooks/useHasLicenseModule';
-import WorkspaceCardSection from '../components/WorkspaceCardSection';
+import WorkspaceCardSectionWithHeader from '../components/WorkspaceCardSectionWithHeader';
 import WorkspaceCardTextSeparator from '../components/WorkspaceCardTextSeparator';
 
 type UsersUploadsCardProps = {
@@ -30,44 +30,45 @@ const UsersUploadsCard = ({ statistics }: UsersUploadsCardProps): ReactElement =
 	return (
 		<Card height='full'>
 			<CardBody flexDirection='column'>
-				<WorkspaceCardSection
-					title={t('Users')}
-					body={
-						<>
-							<WorkspaceCardTextSeparator label={t('Online')} status='online' value={statistics.onlineUsers} />
-							<WorkspaceCardTextSeparator label={t('Busy')} status='busy' value={statistics.busyUsers} />
-							<WorkspaceCardTextSeparator label={t('Away')} status='away' value={statistics.awayUsers} />
-							<WorkspaceCardTextSeparator label={t('Offline')} status='offline' value={statistics.offlineUsers} />
-							<WorkspaceCardTextSeparator label={t('Total')} value={statistics.totalUsers} />
-						</>
-					}
-					isHeader
-				/>
+				<Margins blockEnd={24}>
+					<WorkspaceCardSectionWithHeader
+						title={t('Users')}
+						body={
+							<>
+								<WorkspaceCardTextSeparator label={t('Online')} status='online' value={statistics.onlineUsers} />
+								<WorkspaceCardTextSeparator label={t('Busy')} status='busy' value={statistics.busyUsers} />
+								<WorkspaceCardTextSeparator label={t('Away')} status='away' value={statistics.awayUsers} />
+								<WorkspaceCardTextSeparator label={t('Offline')} status='offline' value={statistics.offlineUsers} />
+								<WorkspaceCardTextSeparator label={t('Total')} value={statistics.totalUsers} />
+							</>
+						}
+						titleToContentGap={20}
+					/>
+					<WorkspaceCardSectionWithHeader
+						title={t('Types')}
+						body={
+							<>
+								<WorkspaceCardTextSeparator label={t('Users_Connected')} value={statistics.totalConnectedUsers} />
+								<WorkspaceCardTextSeparator label={t('Stats_Active_Users')} value={statistics.activeUsers} />
+								<WorkspaceCardTextSeparator label={t('Stats_Active_Guests')} value={statistics.activeGuests} />
+								<WorkspaceCardTextSeparator label={t('Stats_Non_Active_Users')} value={statistics.nonActiveUsers} />
+								<WorkspaceCardTextSeparator label={t('Stats_App_Users')} value={statistics.appUsers} />
+							</>
+						}
+						titleToContentGap={20}
+					/>
 
-				<WorkspaceCardSection
-					title={t('Types')}
-					body={
-						<>
-							<WorkspaceCardTextSeparator label={t('Users_Connected')} value={statistics.totalConnectedUsers} />
-							<WorkspaceCardTextSeparator label={t('Stats_Active_Users')} value={statistics.activeUsers} />
-							<WorkspaceCardTextSeparator label={t('Stats_Active_Guests')} value={statistics.activeGuests} />
-							<WorkspaceCardTextSeparator label={t('Stats_Non_Active_Users')} value={statistics.nonActiveUsers} />
-							<WorkspaceCardTextSeparator label={t('Stats_App_Users')} value={statistics.appUsers} />
-						</>
-					}
-					isHeader
-				/>
-
-				<WorkspaceCardSection
-					title={t('Uploads')}
-					body={
-						<>
-							<WorkspaceCardTextSeparator label={t('Stats_Total_Uploads')} value={statistics.uploadsTotal} />
-							<WorkspaceCardTextSeparator label={t('Stats_Total_Uploads_Size')} value={formatMemorySize(statistics.uploadsTotalSize)} />
-						</>
-					}
-					isHeader
-				/>
+					<WorkspaceCardSectionWithHeader
+						title={t('Uploads')}
+						body={
+							<>
+								<WorkspaceCardTextSeparator label={t('Stats_Total_Uploads')} value={statistics.uploadsTotal} />
+								<WorkspaceCardTextSeparator label={t('Stats_Total_Uploads_Size')} value={formatMemorySize(statistics.uploadsTotalSize)} />
+							</>
+						}
+						titleToContentGap={20}
+					/>
+				</Margins>
 			</CardBody>
 
 			<CardControls>
diff --git a/apps/meteor/client/views/admin/workspace/components/WorkspaceCardSection.tsx b/apps/meteor/client/views/admin/workspace/components/WorkspaceCardSection.tsx
index 8e4cf8bcfc12..d4f921414cc9 100644
--- a/apps/meteor/client/views/admin/workspace/components/WorkspaceCardSection.tsx
+++ b/apps/meteor/client/views/admin/workspace/components/WorkspaceCardSection.tsx
@@ -8,10 +8,10 @@ type WorkspaceCardSectionProps = {
 	isHeader?: boolean;
 };
 
-const WorkspaceCardSection = ({ title, body, isHeader }: WorkspaceCardSectionProps) => {
+const WorkspaceCardSection = ({ title, body }: WorkspaceCardSectionProps) => {
 	return (
 		<Box fontScale='p2'>
-			<Box fontScale={isHeader ? 'h4' : 'p2b'}>{title}</Box>
+			<Box fontScale='p2b'>{title}</Box>
 			{body && body}
 		</Box>
 	);
diff --git a/apps/meteor/client/views/admin/workspace/components/WorkspaceCardSectionWithHeader.tsx b/apps/meteor/client/views/admin/workspace/components/WorkspaceCardSectionWithHeader.tsx
new file mode 100644
index 000000000000..e346e10069b7
--- /dev/null
+++ b/apps/meteor/client/views/admin/workspace/components/WorkspaceCardSectionWithHeader.tsx
@@ -0,0 +1,22 @@
+import { Box } from '@rocket.chat/fuselage';
+import type { ReactNode } from 'react';
+import React from 'react';
+
+type WorkspaceCardSectionWithHeaderProps = {
+	title: string;
+	body?: ReactNode;
+	titleToContentGap?: number;
+};
+
+const WorkspaceCardSectionWithHeader = ({ title, body, titleToContentGap }: WorkspaceCardSectionWithHeaderProps) => {
+	return (
+		<Box fontScale='p2'>
+			<Box fontScale='h4' marginBlockEnd={titleToContentGap}>
+				{title}
+			</Box>
+			{body && body}
+		</Box>
+	);
+};
+
+export default WorkspaceCardSectionWithHeader;

From f5335f8bfeef64e211f88af01f02e8e4ae902bc3 Mon Sep 17 00:00:00 2001
From: rique223 <henrique.jobs1@gmail.com>
Date: Thu, 28 Nov 2024 17:05:28 -0300
Subject: [PATCH 08/16] Remove unnecessary minHeight

---
 .../views/admin/subscription/components/FeatureUsageCard.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/meteor/client/views/admin/subscription/components/FeatureUsageCard.tsx b/apps/meteor/client/views/admin/subscription/components/FeatureUsageCard.tsx
index c4d23f30e20d..7d61863cb92e 100644
--- a/apps/meteor/client/views/admin/subscription/components/FeatureUsageCard.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/FeatureUsageCard.tsx
@@ -20,7 +20,7 @@ const FeatureUsageCard = ({ children, card }: FeatureUsageCardProps): ReactEleme
 	const { title, infoText, upgradeButton, isHorizontallyCenteredOnly } = card;
 
 	return (
-		<Card height='full' style={{ minHeight: '244px' }}>
+		<Card height='full'>
 			<CardTitle>
 				{title} {infoText && <InfoTextIconModal title={title} infoText={infoText} />}
 			</CardTitle>

From 8ec1530dba1e7428c1ff5d4c01fc8b3cf4fb50a4 Mon Sep 17 00:00:00 2001
From: rique223 <henrique.jobs1@gmail.com>
Date: Thu, 28 Nov 2024 18:37:35 -0300
Subject: [PATCH 09/16] feat: :sparkles: Componentize new WorkspaceCardSection
 title

Componentized the WorkspaceCardSection title and refactored the WorkspaceCardSectionTitle to accept the new title.
---
 .../DeploymentCard/DeploymentCard.tsx         | 74 ++++++++++++-------
 .../MessagesRoomsCard/MessagesRoomsCard.tsx   | 70 ++++++++----------
 .../UsersUploadsCard/UsersUploadsCard.tsx     | 63 +++++++---------
 .../components/WorkspaceCardSection.tsx       | 13 +---
 .../components/WorkspaceCardSectionTitle.tsx  | 16 ++++
 .../WorkspaceCardSectionWithHeader.tsx        | 22 ------
 6 files changed, 121 insertions(+), 137 deletions(-)
 create mode 100644 apps/meteor/client/views/admin/workspace/components/WorkspaceCardSectionTitle.tsx
 delete mode 100644 apps/meteor/client/views/admin/workspace/components/WorkspaceCardSectionWithHeader.tsx

diff --git a/apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.tsx b/apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.tsx
index df0c31de1809..db61297037df 100644
--- a/apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.tsx
+++ b/apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.tsx
@@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next';
 import { useFormatDateAndTime } from '../../../../hooks/useFormatDateAndTime';
 import WorkspaceCardSection from '../components/WorkspaceCardSection';
 import InstancesModal from './components/InstancesModal';
-import WorkspaceCardSectionWithHeader from '../components/WorkspaceCardSectionWithHeader';
+import WorkspaceCardSectionTitle from '../components/WorkspaceCardSectionTitle';
 
 type DeploymentCardProps = {
 	serverInfo: IWorkspaceInfo;
@@ -32,36 +32,58 @@ const DeploymentCard = ({ serverInfo: { info, cloudWorkspaceId }, statistics, in
 	return (
 		<Card data-qa-id='deployment-card' height='full'>
 			<CardBody flexDirection='column'>
-				<WorkspaceCardSectionWithHeader title={t('Deployment')} titleToContentGap={20} />
+				<WorkspaceCardSection>
+					<WorkspaceCardSectionTitle title={t('Deployment')} variant='h4' titleToContentGap={20} />
+				</WorkspaceCardSection>
 				<Margins blockEnd={8}>
-					<WorkspaceCardSection title={t('Version')} body={statistics.version} />
-					<WorkspaceCardSection title={t('Deployment_ID')} body={statistics.uniqueId} />
+					<WorkspaceCardSection>
+						<WorkspaceCardSectionTitle title={t('Version')} />
+						{statistics.version}
+					</WorkspaceCardSection>
+					<WorkspaceCardSection>
+						<WorkspaceCardSectionTitle title={t('Deployment_ID')} />
+						{statistics.uniqueId}
+					</WorkspaceCardSection>
 
-					{cloudWorkspaceId && <WorkspaceCardSection title={t('Cloud_Workspace_Id')} body={cloudWorkspaceId} />}
+					{cloudWorkspaceId && (
+						<WorkspaceCardSection>
+							<WorkspaceCardSectionTitle title={t('Cloud_Workspace_Id')} />
+							{cloudWorkspaceId}
+						</WorkspaceCardSection>
+					)}
 
-					{appsEngineVersion && <WorkspaceCardSection title={t('Apps_Engine_Version')} body={appsEngineVersion} />}
-					<WorkspaceCardSection title={t('Node_version')} body={statistics.process.nodeVersion} />
-					<WorkspaceCardSection
-						title={t('DB_Migration')}
-						body={`${statistics.migration.version} (${formatDateAndTime(statistics.migration.lockedAt)})`}
-					/>
-					<WorkspaceCardSection
-						title={t('MongoDB')}
-						body={`${statistics.mongoVersion} / ${statistics.mongoStorageEngine} ${
+					{appsEngineVersion && (
+						<WorkspaceCardSection>
+							<WorkspaceCardSectionTitle title={t('Apps_Engine_Version')} />
+							{appsEngineVersion}
+						</WorkspaceCardSection>
+					)}
+					<WorkspaceCardSection>
+						<WorkspaceCardSectionTitle title={t('Node_version')} />
+						{statistics.process.nodeVersion}
+					</WorkspaceCardSection>
+					<WorkspaceCardSection>
+						<WorkspaceCardSectionTitle title={t('DB_Migration')} />
+						{`${statistics.migration.version} (${formatDateAndTime(statistics.migration.lockedAt)})`}
+					</WorkspaceCardSection>
+					<WorkspaceCardSection>
+						<WorkspaceCardSectionTitle title={t('MongoDB')} />
+						{`${statistics.mongoVersion} / ${statistics.mongoStorageEngine} ${
 							!statistics.msEnabled ? `(oplog ${statistics.oplogEnabled ? t('Enabled') : t('Disabled')})` : ''
 						}`}
-					/>
-					<WorkspaceCardSection
-						title={t('Commit_details')}
-						body={
-							<>
-								{t('github_HEAD')}: ({commit.hash ? commit.hash.slice(0, 9) : ''}) <br />
-								{t('Branch')}: {commit.branch} <br />
-								{commit.subject}
-							</>
-						}
-					/>
-					<WorkspaceCardSection title={t('PID')} body={statistics.process.pid} />
+					</WorkspaceCardSection>
+					<WorkspaceCardSection>
+						<WorkspaceCardSectionTitle title={t('Commit_details')} />
+						<>
+							{t('github_HEAD')}: ({commit.hash ? commit.hash.slice(0, 9) : ''}) <br />
+							{t('Branch')}: {commit.branch} <br />
+							{commit.subject}
+						</>
+					</WorkspaceCardSection>
+					<WorkspaceCardSection>
+						<WorkspaceCardSectionTitle title={t('PID')} />
+						{statistics.process.pid}
+					</WorkspaceCardSection>
 				</Margins>
 			</CardBody>
 
diff --git a/apps/meteor/client/views/admin/workspace/MessagesRoomsCard/MessagesRoomsCard.tsx b/apps/meteor/client/views/admin/workspace/MessagesRoomsCard/MessagesRoomsCard.tsx
index 7c9e6582a2bc..1ed64371e77a 100644
--- a/apps/meteor/client/views/admin/workspace/MessagesRoomsCard/MessagesRoomsCard.tsx
+++ b/apps/meteor/client/views/admin/workspace/MessagesRoomsCard/MessagesRoomsCard.tsx
@@ -4,7 +4,8 @@ import type { ReactElement } from 'react';
 import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import WorkspaceCardSectionWithHeader from '../components/WorkspaceCardSectionWithHeader';
+import WorkspaceCardSection from '../components/WorkspaceCardSection';
+import WorkspaceCardSectionTitle from '../components/WorkspaceCardSectionTitle';
 import WorkspaceCardTextSeparator from '../components/WorkspaceCardTextSeparator';
 
 type MessagesRoomsCardProps = {
@@ -16,47 +17,34 @@ const MessagesRoomsCard = ({ statistics }: MessagesRoomsCardProps): ReactElement
 
 	return (
 		<Card height='full'>
-			<WorkspaceCardSectionWithHeader
-				title={t('Total_rooms')}
-				body={
-					<>
-						<WorkspaceCardTextSeparator label={t('Channels')} icon='hash' value={statistics.totalChannels} />
-						<WorkspaceCardTextSeparator label={t('Private_Groups')} icon='lock' value={statistics.totalPrivateGroups} />
-						<WorkspaceCardTextSeparator label={t('Direct_Messages')} icon='balloon' value={statistics.totalDirect} />
-						<WorkspaceCardTextSeparator label={t('Discussions')} icon='discussion' value={statistics.totalDiscussions} />
-						<WorkspaceCardTextSeparator label={t('Omnichannel')} icon='headset' value={statistics.totalLivechat} />
-						<WorkspaceCardTextSeparator label={t('Total')} value={statistics.totalRooms} />
-					</>
-				}
-				titleToContentGap={20}
-			/>
+			<WorkspaceCardSection>
+				<WorkspaceCardSectionTitle title={t('Total_rooms')} variant='h4' titleToContentGap={20} />
 
-			<WorkspaceCardSectionWithHeader
-				title={t('Messages')}
-				body={
-					<>
-						<WorkspaceCardTextSeparator label={t('Stats_Total_Messages_Channel')} icon='hash' value={statistics.totalChannelMessages} />
-						<WorkspaceCardTextSeparator
-							label={t('Stats_Total_Messages_PrivateGroup')}
-							icon='lock'
-							value={statistics.totalPrivateGroupMessages}
-						/>
-						<WorkspaceCardTextSeparator label={t('Stats_Total_Messages_Direct')} icon='balloon' value={statistics.totalDirectMessages} />
-						<WorkspaceCardTextSeparator
-							label={t('Stats_Total_Messages_Discussions')}
-							icon='discussion'
-							value={statistics.totalDiscussionsMessages}
-						/>
-						<WorkspaceCardTextSeparator
-							label={t('Stats_Total_Messages_Livechat')}
-							icon='headset'
-							value={statistics.totalLivechatMessages}
-						/>
-						<WorkspaceCardTextSeparator label={t('Total')} value={statistics.totalMessages} />
-					</>
-				}
-				titleToContentGap={20}
-			/>
+				<WorkspaceCardTextSeparator label={t('Channels')} icon='hash' value={statistics.totalChannels} />
+				<WorkspaceCardTextSeparator label={t('Private_Groups')} icon='lock' value={statistics.totalPrivateGroups} />
+				<WorkspaceCardTextSeparator label={t('Direct_Messages')} icon='balloon' value={statistics.totalDirect} />
+				<WorkspaceCardTextSeparator label={t('Discussions')} icon='discussion' value={statistics.totalDiscussions} />
+				<WorkspaceCardTextSeparator label={t('Omnichannel')} icon='headset' value={statistics.totalLivechat} />
+				<WorkspaceCardTextSeparator label={t('Total')} value={statistics.totalRooms} />
+			</WorkspaceCardSection>
+
+			<WorkspaceCardSection>
+				<WorkspaceCardSectionTitle title={t('Messages')} variant='h4' titleToContentGap={20} />
+				<WorkspaceCardTextSeparator label={t('Stats_Total_Messages_Channel')} icon='hash' value={statistics.totalChannelMessages} />
+				<WorkspaceCardTextSeparator
+					label={t('Stats_Total_Messages_PrivateGroup')}
+					icon='lock'
+					value={statistics.totalPrivateGroupMessages}
+				/>
+				<WorkspaceCardTextSeparator label={t('Stats_Total_Messages_Direct')} icon='balloon' value={statistics.totalDirectMessages} />
+				<WorkspaceCardTextSeparator
+					label={t('Stats_Total_Messages_Discussions')}
+					icon='discussion'
+					value={statistics.totalDiscussionsMessages}
+				/>
+				<WorkspaceCardTextSeparator label={t('Stats_Total_Messages_Livechat')} icon='headset' value={statistics.totalLivechatMessages} />
+				<WorkspaceCardTextSeparator label={t('Total')} value={statistics.totalMessages} />
+			</WorkspaceCardSection>
 		</Card>
 	);
 };
diff --git a/apps/meteor/client/views/admin/workspace/UsersUploadsCard/UsersUploadsCard.tsx b/apps/meteor/client/views/admin/workspace/UsersUploadsCard/UsersUploadsCard.tsx
index 4950fc4a245e..03103981ace7 100644
--- a/apps/meteor/client/views/admin/workspace/UsersUploadsCard/UsersUploadsCard.tsx
+++ b/apps/meteor/client/views/admin/workspace/UsersUploadsCard/UsersUploadsCard.tsx
@@ -8,7 +8,8 @@ import { useTranslation } from 'react-i18next';
 
 import { useFormatMemorySize } from '../../../../hooks/useFormatMemorySize';
 import { useHasLicenseModule } from '../../../../hooks/useHasLicenseModule';
-import WorkspaceCardSectionWithHeader from '../components/WorkspaceCardSectionWithHeader';
+import WorkspaceCardSection from '../components/WorkspaceCardSection';
+import WorkspaceCardSectionTitle from '../components/WorkspaceCardSectionTitle';
 import WorkspaceCardTextSeparator from '../components/WorkspaceCardTextSeparator';
 
 type UsersUploadsCardProps = {
@@ -31,43 +32,31 @@ const UsersUploadsCard = ({ statistics }: UsersUploadsCardProps): ReactElement =
 		<Card height='full'>
 			<CardBody flexDirection='column'>
 				<Margins blockEnd={24}>
-					<WorkspaceCardSectionWithHeader
-						title={t('Users')}
-						body={
-							<>
-								<WorkspaceCardTextSeparator label={t('Online')} status='online' value={statistics.onlineUsers} />
-								<WorkspaceCardTextSeparator label={t('Busy')} status='busy' value={statistics.busyUsers} />
-								<WorkspaceCardTextSeparator label={t('Away')} status='away' value={statistics.awayUsers} />
-								<WorkspaceCardTextSeparator label={t('Offline')} status='offline' value={statistics.offlineUsers} />
-								<WorkspaceCardTextSeparator label={t('Total')} value={statistics.totalUsers} />
-							</>
-						}
-						titleToContentGap={20}
-					/>
-					<WorkspaceCardSectionWithHeader
-						title={t('Types')}
-						body={
-							<>
-								<WorkspaceCardTextSeparator label={t('Users_Connected')} value={statistics.totalConnectedUsers} />
-								<WorkspaceCardTextSeparator label={t('Stats_Active_Users')} value={statistics.activeUsers} />
-								<WorkspaceCardTextSeparator label={t('Stats_Active_Guests')} value={statistics.activeGuests} />
-								<WorkspaceCardTextSeparator label={t('Stats_Non_Active_Users')} value={statistics.nonActiveUsers} />
-								<WorkspaceCardTextSeparator label={t('Stats_App_Users')} value={statistics.appUsers} />
-							</>
-						}
-						titleToContentGap={20}
-					/>
+					<WorkspaceCardSection>
+						<WorkspaceCardSectionTitle title={t('Users')} variant='h4' titleToContentGap={20} />
 
-					<WorkspaceCardSectionWithHeader
-						title={t('Uploads')}
-						body={
-							<>
-								<WorkspaceCardTextSeparator label={t('Stats_Total_Uploads')} value={statistics.uploadsTotal} />
-								<WorkspaceCardTextSeparator label={t('Stats_Total_Uploads_Size')} value={formatMemorySize(statistics.uploadsTotalSize)} />
-							</>
-						}
-						titleToContentGap={20}
-					/>
+						<WorkspaceCardTextSeparator label={t('Online')} status='online' value={statistics.onlineUsers} />
+						<WorkspaceCardTextSeparator label={t('Busy')} status='busy' value={statistics.busyUsers} />
+						<WorkspaceCardTextSeparator label={t('Away')} status='away' value={statistics.awayUsers} />
+						<WorkspaceCardTextSeparator label={t('Offline')} status='offline' value={statistics.offlineUsers} />
+						<WorkspaceCardTextSeparator label={t('Total')} value={statistics.totalUsers} />
+					</WorkspaceCardSection>
+					<WorkspaceCardSection>
+						<WorkspaceCardSectionTitle title={t('Types')} variant='h4' titleToContentGap={20} />
+
+						<WorkspaceCardTextSeparator label={t('Users_Connected')} value={statistics.totalConnectedUsers} />
+						<WorkspaceCardTextSeparator label={t('Stats_Active_Users')} value={statistics.activeUsers} />
+						<WorkspaceCardTextSeparator label={t('Stats_Active_Guests')} value={statistics.activeGuests} />
+						<WorkspaceCardTextSeparator label={t('Stats_Non_Active_Users')} value={statistics.nonActiveUsers} />
+						<WorkspaceCardTextSeparator label={t('Stats_App_Users')} value={statistics.appUsers} />
+					</WorkspaceCardSection>
+
+					<WorkspaceCardSection>
+						<WorkspaceCardSectionTitle title={t('Uploads')} variant='h4' titleToContentGap={20} />
+
+						<WorkspaceCardTextSeparator label={t('Stats_Total_Uploads')} value={statistics.uploadsTotal} />
+						<WorkspaceCardTextSeparator label={t('Stats_Total_Uploads_Size')} value={formatMemorySize(statistics.uploadsTotalSize)} />
+					</WorkspaceCardSection>
 				</Margins>
 			</CardBody>
 
diff --git a/apps/meteor/client/views/admin/workspace/components/WorkspaceCardSection.tsx b/apps/meteor/client/views/admin/workspace/components/WorkspaceCardSection.tsx
index d4f921414cc9..612c75a2d4df 100644
--- a/apps/meteor/client/views/admin/workspace/components/WorkspaceCardSection.tsx
+++ b/apps/meteor/client/views/admin/workspace/components/WorkspaceCardSection.tsx
@@ -3,18 +3,9 @@ import type { ReactNode } from 'react';
 import React from 'react';
 
 type WorkspaceCardSectionProps = {
-	title: string;
-	body?: ReactNode;
-	isHeader?: boolean;
+	children: ReactNode;
 };
 
-const WorkspaceCardSection = ({ title, body }: WorkspaceCardSectionProps) => {
-	return (
-		<Box fontScale='p2'>
-			<Box fontScale='p2b'>{title}</Box>
-			{body && body}
-		</Box>
-	);
-};
+const WorkspaceCardSection = ({ children }: WorkspaceCardSectionProps) => <Box fontScale='p2'>{children}</Box>;
 
 export default WorkspaceCardSection;
diff --git a/apps/meteor/client/views/admin/workspace/components/WorkspaceCardSectionTitle.tsx b/apps/meteor/client/views/admin/workspace/components/WorkspaceCardSectionTitle.tsx
new file mode 100644
index 000000000000..5b724b5c5e0c
--- /dev/null
+++ b/apps/meteor/client/views/admin/workspace/components/WorkspaceCardSectionTitle.tsx
@@ -0,0 +1,16 @@
+import { Box } from '@rocket.chat/fuselage';
+import React from 'react';
+
+type WorkspaceCardSectionTitleProps = {
+	variant?: 'p2b' | 'h4';
+	title: string;
+	titleToContentGap?: number;
+};
+
+const WorkspaceCardSectionTitle = ({ variant = 'p2b', title, titleToContentGap = 0 }: WorkspaceCardSectionTitleProps) => (
+	<Box fontScale={variant} marginBlockEnd={titleToContentGap}>
+		{title}
+	</Box>
+);
+
+export default WorkspaceCardSectionTitle;
diff --git a/apps/meteor/client/views/admin/workspace/components/WorkspaceCardSectionWithHeader.tsx b/apps/meteor/client/views/admin/workspace/components/WorkspaceCardSectionWithHeader.tsx
deleted file mode 100644
index e346e10069b7..000000000000
--- a/apps/meteor/client/views/admin/workspace/components/WorkspaceCardSectionWithHeader.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Box } from '@rocket.chat/fuselage';
-import type { ReactNode } from 'react';
-import React from 'react';
-
-type WorkspaceCardSectionWithHeaderProps = {
-	title: string;
-	body?: ReactNode;
-	titleToContentGap?: number;
-};
-
-const WorkspaceCardSectionWithHeader = ({ title, body, titleToContentGap }: WorkspaceCardSectionWithHeaderProps) => {
-	return (
-		<Box fontScale='p2'>
-			<Box fontScale='h4' marginBlockEnd={titleToContentGap}>
-				{title}
-			</Box>
-			{body && body}
-		</Box>
-	);
-};
-
-export default WorkspaceCardSectionWithHeader;

From 533875800576071d9a8f0901ba1af7189807e49f Mon Sep 17 00:00:00 2001
From: rique223 <henrique.jobs1@gmail.com>
Date: Thu, 28 Nov 2024 18:45:18 -0300
Subject: [PATCH 10/16] Remove unnecessary artifacts

---
 .../admin/workspace/DeploymentCard/DeploymentCard.tsx     | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.tsx b/apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.tsx
index db61297037df..63fec3d122d9 100644
--- a/apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.tsx
+++ b/apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.tsx
@@ -74,11 +74,9 @@ const DeploymentCard = ({ serverInfo: { info, cloudWorkspaceId }, statistics, in
 					</WorkspaceCardSection>
 					<WorkspaceCardSection>
 						<WorkspaceCardSectionTitle title={t('Commit_details')} />
-						<>
-							{t('github_HEAD')}: ({commit.hash ? commit.hash.slice(0, 9) : ''}) <br />
-							{t('Branch')}: {commit.branch} <br />
-							{commit.subject}
-						</>
+						{t('github_HEAD')}: ({commit.hash ? commit.hash.slice(0, 9) : ''}) <br />
+						{t('Branch')}: {commit.branch} <br />
+						{commit.subject}
 					</WorkspaceCardSection>
 					<WorkspaceCardSection>
 						<WorkspaceCardSectionTitle title={t('PID')} />

From f4cc10ebf0ba9d27f789e2180920de98fdb2a295 Mon Sep 17 00:00:00 2001
From: rique223 <henrique.jobs1@gmail.com>
Date: Mon, 2 Dec 2024 18:01:15 -0300
Subject: [PATCH 11/16] fix: :bug: Version card background image responsivity

The version card background image has been updated to better align with design specifications. On large screens and smaller, the image is fixed to the right side of the container and gradually crops from the right as the container shrinks. On extra-large screens and larger, it remains fixed to the right side with a 20px margin from the container's edge.
---
 .../views/admin/workspace/VersionCard/VersionCard.tsx    | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/apps/meteor/client/views/admin/workspace/VersionCard/VersionCard.tsx b/apps/meteor/client/views/admin/workspace/VersionCard/VersionCard.tsx
index 93c05ab2e9a0..f37033cb172d 100644
--- a/apps/meteor/client/views/admin/workspace/VersionCard/VersionCard.tsx
+++ b/apps/meteor/client/views/admin/workspace/VersionCard/VersionCard.tsx
@@ -1,6 +1,6 @@
 import type { IWorkspaceInfo } from '@rocket.chat/core-typings';
 import { Box, Card, CardBody, CardCol, CardControls, CardHeader, CardTitle, Icon } from '@rocket.chat/fuselage';
-import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
+import { useBreakpoints } from '@rocket.chat/fuselage-hooks';
 import type { SupportedVersions } from '@rocket.chat/server-cloud-communication';
 import { ExternalLink } from '@rocket.chat/ui-client';
 import type { LocationPathname } from '@rocket.chat/ui-contexts';
@@ -29,14 +29,15 @@ type VersionCardProps = {
 };
 
 const VersionCard = ({ serverInfo }: VersionCardProps): ReactElement => {
-	const mediaQuery = useMediaQuery('(min-width: 1024px)');
+	const breakpoints = useBreakpoints();
+	const isExtraLargeOrBigger = breakpoints.includes('xl');
 
 	const getUrl = useMediaUrl();
 	const cardBackground = {
 		backgroundImage: `url(${getUrl('images/globe.png')})`,
 		backgroundRepeat: 'no-repeat',
-		backgroundPosition: 'right 20px center',
-		backgroundSize: mediaQuery ? 'auto' : 'contain',
+		backgroundPosition: isExtraLargeOrBigger ? 'right 20px center' : 'left 450px center',
+		backgroundSize: 'auto',
 	};
 
 	const setModal = useSetModal();

From 29c2b6c167f5329a0da91f6989a1248c2c80673a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Henrique=20Guimar=C3=A3es=20Ribeiro?=
 <43561537+rique223@users.noreply.github.com>
Date: Tue, 3 Dec 2024 19:49:15 -0300
Subject: [PATCH 12/16] Create sour-roses-invite.md

---
 .changeset/sour-roses-invite.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/sour-roses-invite.md

diff --git a/.changeset/sour-roses-invite.md b/.changeset/sour-roses-invite.md
new file mode 100644
index 000000000000..d560be689142
--- /dev/null
+++ b/.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.

From d48a6b57b8c6c398f7e38260132845ff58c9f7cd Mon Sep 17 00:00:00 2001
From: rique223 <henrique.jobs1@gmail.com>
Date: Tue, 3 Dec 2024 23:09:31 -0300
Subject: [PATCH 13/16] Review

---
 .../views/admin/subscription/SubscriptionPage.tsx  | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/meteor/client/views/admin/subscription/SubscriptionPage.tsx b/apps/meteor/client/views/admin/subscription/SubscriptionPage.tsx
index 8b840cece40a..72b6243432a1 100644
--- a/apps/meteor/client/views/admin/subscription/SubscriptionPage.tsx
+++ b/apps/meteor/client/views/admin/subscription/SubscriptionPage.tsx
@@ -130,17 +130,17 @@ const SubscriptionPage = () => {
 						)}
 						<Box marginBlock='none' marginInline='auto' width='full' color='default'>
 							<Grid m={0}>
-								<Grid.Item lg={4} xs={4} p={8} minHeight={244}>
+								<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} minHeight={244}>
+								<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} minHeight={244}>
+									<Grid.Item lg={6} xs={4} p={8} minHeight={260}>
 										{seatsLimit.max !== Infinity ? (
 											<SeatsCard value={seatsLimit.value} max={seatsLimit.max} hideManageSubscription={licensesData?.trial} />
 										) : (
@@ -150,7 +150,7 @@ const SubscriptionPage = () => {
 								)}
 
 								{macLimit.value !== undefined && (
-									<Grid.Item lg={6} xs={4} p={8} minHeight={244}>
+									<Grid.Item lg={6} xs={4} p={8} minHeight={260}>
 										{macLimit.max !== Infinity ? (
 											<MACCard max={macLimit.max} value={macLimit.value} hideManageSubscription={licensesData?.trial} />
 										) : (
@@ -162,15 +162,15 @@ const SubscriptionPage = () => {
 								{!license && (
 									<>
 										{limits?.marketplaceApps !== undefined && (
-											<Grid.Item lg={4} xs={4} p={8} minHeight={244}>
+											<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} minHeight={244}>
+										<Grid.Item lg={4} xs={4} p={8} minHeight={260}>
 											<ActiveSessionsCard />
 										</Grid.Item>
-										<Grid.Item lg={4} xs={4} p={8} minHeight={244}>
+										<Grid.Item lg={4} xs={4} p={8} minHeight={260}>
 											<ActiveSessionsPeakCard />
 										</Grid.Item>
 									</>

From cfd8d6ce1433a6fd9336346aaaa99257bd3fd70c Mon Sep 17 00:00:00 2001
From: rique223 <henrique.jobs1@gmail.com>
Date: Thu, 5 Dec 2024 19:06:03 -0300
Subject: [PATCH 14/16] feat: :sparkles: Componentize FeatureUsageCard body

---
 .../components/FeatureUsageCard.tsx           | 17 ++--------
 .../components/FeatureUsageCardBody.tsx       | 15 +++++++++
 .../components/cards/ActiveSessionsCard.tsx   | 17 ++++++----
 .../cards/ActiveSessionsPeakCard.tsx          |  5 ++-
 .../cards/AppsUsageCard/AppsUsageCard.tsx     | 33 +++++++++++--------
 .../components/cards/CountMACCard.tsx         | 11 ++++---
 .../components/cards/CountSeatsCard.tsx       | 11 ++++---
 .../subscription/components/cards/MACCard.tsx |  5 ++-
 .../components/cards/SeatsCard.tsx            |  5 ++-
 9 files changed, 74 insertions(+), 45 deletions(-)
 create mode 100644 apps/meteor/client/views/admin/subscription/components/FeatureUsageCardBody.tsx

diff --git a/apps/meteor/client/views/admin/subscription/components/FeatureUsageCard.tsx b/apps/meteor/client/views/admin/subscription/components/FeatureUsageCard.tsx
index 7d61863cb92e..e6e1526332b5 100644
--- a/apps/meteor/client/views/admin/subscription/components/FeatureUsageCard.tsx
+++ b/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,25 +17,14 @@ export type CardProps = {
 };
 
 const FeatureUsageCard = ({ children, card }: FeatureUsageCardProps): ReactElement => {
-	const { title, infoText, upgradeButton, isHorizontallyCenteredOnly } = card;
+	const { title, infoText, upgradeButton } = card;
 
 	return (
 		<Card height='full'>
 			<CardTitle>
 				{title} {infoText && <InfoTextIconModal title={title} infoText={infoText} />}
 			</CardTitle>
-			<CardBody>
-				<Box
-					h='full'
-					w='full'
-					display='flex'
-					alignItems='center'
-					justifyContent={isHorizontallyCenteredOnly ? 'flex-start' : 'center'}
-					flexDirection='column'
-				>
-					{children}
-				</Box>
-			</CardBody>
+			{children}
 			{upgradeButton && <CardControls>{upgradeButton}</CardControls>}
 		</Card>
 	);
diff --git a/apps/meteor/client/views/admin/subscription/components/FeatureUsageCardBody.tsx b/apps/meteor/client/views/admin/subscription/components/FeatureUsageCardBody.tsx
new file mode 100644
index 000000000000..540b486d955d
--- /dev/null
+++ b/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;
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsCard.tsx b/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsCard.tsx
index 62950d29bfb0..8e867a293fcb 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsCard.tsx
+++ b/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='x224' />
+				<FeatureUsageCardBody justifyContent='flex-start'>
+					<Skeleton variant='rect' width='x112' height='x224' />
+				</FeatureUsageCardBody>
 			</FeatureUsageCard>
 		);
 	}
@@ -56,12 +59,14 @@ const ActiveSessionsCard = (): ReactElement => {
 				isHorizontallyCenteredOnly: true,
 			}}
 		>
-			<Box color='font-secondary-info' textAlign='center'>
-				<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>
 	);
 };
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsPeakCard.tsx b/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsPeakCard.tsx
index 96f3e32a27f1..e9243fbc3997 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsPeakCard.tsx
+++ b/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 => {
@@ -37,7 +38,9 @@ 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>
 		);
 	}
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCard.tsx b/apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCard.tsx
index c99ebab0ee5d..8d064828975a 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCard.tsx
+++ b/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='x224' role='presentation' />
+				<FeatureUsageCardBody justifyContent='flex-start'>
+					<Skeleton variant='rect' width='x112' height='x224' role='presentation' />
+				</FeatureUsageCardBody>
 			</FeatureUsageCard>
 		);
 	}
@@ -62,20 +65,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>
 	);
 };
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/CountMACCard.tsx b/apps/meteor/client/views/admin/subscription/components/cards/CountMACCard.tsx
index 862504692d1f..fc6a69c1df66 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/CountMACCard.tsx
+++ b/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>
 	);
 };
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/CountSeatsCard.tsx b/apps/meteor/client/views/admin/subscription/components/cards/CountSeatsCard.tsx
index 6a89881efa48..4280146232a4 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/CountSeatsCard.tsx
+++ b/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' display='flex' alignItems='center' justifyContent='center'>
-				<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>
 	);
 };
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/MACCard.tsx b/apps/meteor/client/views/admin/subscription/components/cards/MACCard.tsx
index f60292df064b..af4cf73f63d6 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/MACCard.tsx
+++ b/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>
 	);
 };
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/SeatsCard.tsx b/apps/meteor/client/views/admin/subscription/components/cards/SeatsCard.tsx
index a90f2d1171d0..1806437cff2f 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/SeatsCard.tsx
+++ b/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>
 	);
 };

From 9566a7fd975498cd384a9abc6b46e83ddbcbb2d1 Mon Sep 17 00:00:00 2001
From: rique223 <henrique.jobs1@gmail.com>
Date: Mon, 16 Dec 2024 18:13:00 -0300
Subject: [PATCH 15/16] Remove unnecessary props

---
 .../views/admin/subscription/components/FeatureUsageCard.tsx     | 1 -
 .../admin/subscription/components/cards/ActiveSessionsCard.tsx   | 1 -
 .../subscription/components/cards/ActiveSessionsPeakCard.tsx     | 1 -
 .../components/cards/AppsUsageCard/AppsUsageCard.tsx             | 1 -
 4 files changed, 4 deletions(-)

diff --git a/apps/meteor/client/views/admin/subscription/components/FeatureUsageCard.tsx b/apps/meteor/client/views/admin/subscription/components/FeatureUsageCard.tsx
index e6e1526332b5..b7407d9257ab 100644
--- a/apps/meteor/client/views/admin/subscription/components/FeatureUsageCard.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/FeatureUsageCard.tsx
@@ -13,7 +13,6 @@ export type CardProps = {
 	title: string;
 	infoText?: ReactNode;
 	upgradeButton?: ReactNode;
-	isHorizontallyCenteredOnly?: boolean;
 };
 
 const FeatureUsageCard = ({ children, card }: FeatureUsageCardProps): ReactElement => {
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsCard.tsx b/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsCard.tsx
index 8e867a293fcb..28de97968394 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsCard.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsCard.tsx
@@ -56,7 +56,6 @@ const ActiveSessionsCard = (): ReactElement => {
 						</UpgradeButton>
 					),
 				}),
-				isHorizontallyCenteredOnly: true,
 			}}
 		>
 			<FeatureUsageCardBody justifyContent='flex-start'>
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsPeakCard.tsx b/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsPeakCard.tsx
index e9243fbc3997..af443f1e659f 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsPeakCard.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsPeakCard.tsx
@@ -32,7 +32,6 @@ const ActiveSessionsPeakCard = (): ReactElement => {
 				</UpgradeButton>
 			),
 		}),
-		isHorizontallyCenteredOnly: true,
 	};
 
 	if (isLoading || maxMonthlyPeakConnections === undefined) {
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCard.tsx b/apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCard.tsx
index 8d064828975a..4fc31cb260c5 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCard.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCard.tsx
@@ -52,7 +52,6 @@ const AppsUsageCard = ({ privateAppsLimit, marketplaceAppsLimit }: AppsUsageCard
 				components={{ 1: <ExternalLink to={PRICING_LINK}>premium plans</ExternalLink> }}
 			/>
 		),
-		isHorizontallyCenteredOnly: true,
 
 		...(marketplaceAppsAboveWarning && {
 			upgradeButton: (

From 43fd7191bb2620656e339deb11320b073cd27647 Mon Sep 17 00:00:00 2001
From: rique223 <henrique.jobs1@gmail.com>
Date: Mon, 16 Dec 2024 18:24:51 -0300
Subject: [PATCH 16/16] refactor: :recycle: Remove unnecessary
 titleToContentGap prop

Removed the titleToContentGap prop as the margin-block-end of all h4 titles are 20px anyways so this can be done with a simple ternary.
---
 .../views/admin/workspace/DeploymentCard/DeploymentCard.tsx | 2 +-
 .../admin/workspace/MessagesRoomsCard/MessagesRoomsCard.tsx | 4 ++--
 .../admin/workspace/UsersUploadsCard/UsersUploadsCard.tsx   | 6 +++---
 .../workspace/components/WorkspaceCardSectionTitle.tsx      | 5 ++---
 4 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.tsx b/apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.tsx
index 63fec3d122d9..0ff7e96e8002 100644
--- a/apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.tsx
+++ b/apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.tsx
@@ -33,7 +33,7 @@ const DeploymentCard = ({ serverInfo: { info, cloudWorkspaceId }, statistics, in
 		<Card data-qa-id='deployment-card' height='full'>
 			<CardBody flexDirection='column'>
 				<WorkspaceCardSection>
-					<WorkspaceCardSectionTitle title={t('Deployment')} variant='h4' titleToContentGap={20} />
+					<WorkspaceCardSectionTitle title={t('Deployment')} variant='h4' />
 				</WorkspaceCardSection>
 				<Margins blockEnd={8}>
 					<WorkspaceCardSection>
diff --git a/apps/meteor/client/views/admin/workspace/MessagesRoomsCard/MessagesRoomsCard.tsx b/apps/meteor/client/views/admin/workspace/MessagesRoomsCard/MessagesRoomsCard.tsx
index 1ed64371e77a..0939a3774c22 100644
--- a/apps/meteor/client/views/admin/workspace/MessagesRoomsCard/MessagesRoomsCard.tsx
+++ b/apps/meteor/client/views/admin/workspace/MessagesRoomsCard/MessagesRoomsCard.tsx
@@ -18,7 +18,7 @@ const MessagesRoomsCard = ({ statistics }: MessagesRoomsCardProps): ReactElement
 	return (
 		<Card height='full'>
 			<WorkspaceCardSection>
-				<WorkspaceCardSectionTitle title={t('Total_rooms')} variant='h4' titleToContentGap={20} />
+				<WorkspaceCardSectionTitle title={t('Total_rooms')} variant='h4' />
 
 				<WorkspaceCardTextSeparator label={t('Channels')} icon='hash' value={statistics.totalChannels} />
 				<WorkspaceCardTextSeparator label={t('Private_Groups')} icon='lock' value={statistics.totalPrivateGroups} />
@@ -29,7 +29,7 @@ const MessagesRoomsCard = ({ statistics }: MessagesRoomsCardProps): ReactElement
 			</WorkspaceCardSection>
 
 			<WorkspaceCardSection>
-				<WorkspaceCardSectionTitle title={t('Messages')} variant='h4' titleToContentGap={20} />
+				<WorkspaceCardSectionTitle title={t('Messages')} variant='h4' />
 				<WorkspaceCardTextSeparator label={t('Stats_Total_Messages_Channel')} icon='hash' value={statistics.totalChannelMessages} />
 				<WorkspaceCardTextSeparator
 					label={t('Stats_Total_Messages_PrivateGroup')}
diff --git a/apps/meteor/client/views/admin/workspace/UsersUploadsCard/UsersUploadsCard.tsx b/apps/meteor/client/views/admin/workspace/UsersUploadsCard/UsersUploadsCard.tsx
index 03103981ace7..2a4290fa3ace 100644
--- a/apps/meteor/client/views/admin/workspace/UsersUploadsCard/UsersUploadsCard.tsx
+++ b/apps/meteor/client/views/admin/workspace/UsersUploadsCard/UsersUploadsCard.tsx
@@ -33,7 +33,7 @@ const UsersUploadsCard = ({ statistics }: UsersUploadsCardProps): ReactElement =
 			<CardBody flexDirection='column'>
 				<Margins blockEnd={24}>
 					<WorkspaceCardSection>
-						<WorkspaceCardSectionTitle title={t('Users')} variant='h4' titleToContentGap={20} />
+						<WorkspaceCardSectionTitle title={t('Users')} variant='h4' />
 
 						<WorkspaceCardTextSeparator label={t('Online')} status='online' value={statistics.onlineUsers} />
 						<WorkspaceCardTextSeparator label={t('Busy')} status='busy' value={statistics.busyUsers} />
@@ -42,7 +42,7 @@ const UsersUploadsCard = ({ statistics }: UsersUploadsCardProps): ReactElement =
 						<WorkspaceCardTextSeparator label={t('Total')} value={statistics.totalUsers} />
 					</WorkspaceCardSection>
 					<WorkspaceCardSection>
-						<WorkspaceCardSectionTitle title={t('Types')} variant='h4' titleToContentGap={20} />
+						<WorkspaceCardSectionTitle title={t('Types')} variant='h4' />
 
 						<WorkspaceCardTextSeparator label={t('Users_Connected')} value={statistics.totalConnectedUsers} />
 						<WorkspaceCardTextSeparator label={t('Stats_Active_Users')} value={statistics.activeUsers} />
@@ -52,7 +52,7 @@ const UsersUploadsCard = ({ statistics }: UsersUploadsCardProps): ReactElement =
 					</WorkspaceCardSection>
 
 					<WorkspaceCardSection>
-						<WorkspaceCardSectionTitle title={t('Uploads')} variant='h4' titleToContentGap={20} />
+						<WorkspaceCardSectionTitle title={t('Uploads')} variant='h4' />
 
 						<WorkspaceCardTextSeparator label={t('Stats_Total_Uploads')} value={statistics.uploadsTotal} />
 						<WorkspaceCardTextSeparator label={t('Stats_Total_Uploads_Size')} value={formatMemorySize(statistics.uploadsTotalSize)} />
diff --git a/apps/meteor/client/views/admin/workspace/components/WorkspaceCardSectionTitle.tsx b/apps/meteor/client/views/admin/workspace/components/WorkspaceCardSectionTitle.tsx
index 5b724b5c5e0c..218016c2be75 100644
--- a/apps/meteor/client/views/admin/workspace/components/WorkspaceCardSectionTitle.tsx
+++ b/apps/meteor/client/views/admin/workspace/components/WorkspaceCardSectionTitle.tsx
@@ -4,11 +4,10 @@ import React from 'react';
 type WorkspaceCardSectionTitleProps = {
 	variant?: 'p2b' | 'h4';
 	title: string;
-	titleToContentGap?: number;
 };
 
-const WorkspaceCardSectionTitle = ({ variant = 'p2b', title, titleToContentGap = 0 }: WorkspaceCardSectionTitleProps) => (
-	<Box fontScale={variant} marginBlockEnd={titleToContentGap}>
+const WorkspaceCardSectionTitle = ({ variant = 'p2b', title }: WorkspaceCardSectionTitleProps) => (
+	<Box fontScale={variant} marginBlockEnd={variant === 'h4' ? 20 : 0}>
 		{title}
 	</Box>
 );