From c8af645404418f2593d1ce95fa93123f9719c03a Mon Sep 17 00:00:00 2001
From: Guilherme Jun Grillo <48109548+guijun13@users.noreply.github.com>
Date: Tue, 6 Dec 2022 14:36:41 -0300
Subject: [PATCH] Chore: Add spacing adjustments Home page (#27367)

---
 apps/meteor/client/components/Page/PageHeader.tsx      | 10 +++++++---
 apps/meteor/client/views/home/DefaultHomePage.tsx      |  4 ++--
 apps/meteor/client/views/home/HomepageGridItem.tsx     |  2 +-
 .../src/components/Card/CardFooterWrapper.tsx          |  2 +-
 packages/ui-client/src/components/Card/CardTitle.tsx   |  2 +-
 5 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/apps/meteor/client/components/Page/PageHeader.tsx b/apps/meteor/client/components/Page/PageHeader.tsx
index 416cba913386..aed5c44f39ed 100644
--- a/apps/meteor/client/components/Page/PageHeader.tsx
+++ b/apps/meteor/client/components/Page/PageHeader.tsx
@@ -19,11 +19,15 @@ const PageHeader: FC<PageHeaderProps> = ({ children = undefined, title, onClickB
 	const { isMobile } = useLayout();
 
 	return (
-		<Box borderBlockEndWidth='x2' borderBlockEndColor={borderBlockEndColor ?? border ? 'extra-light' : 'transparent'} {...props}>
+		<Box
+			borderBlockEndWidth='x2'
+			minHeight='x64'
+			borderBlockEndColor={borderBlockEndColor ?? border ? 'extra-light' : 'transparent'}
+			{...props}
+		>
 			<Box
-				marginBlock='x16'
+				marginBlock='x8'
 				marginInline='x24'
-				minHeight='x40'
 				display='flex'
 				flexDirection='row'
 				flexWrap='nowrap'
diff --git a/apps/meteor/client/views/home/DefaultHomePage.tsx b/apps/meteor/client/views/home/DefaultHomePage.tsx
index d0215d940b22..e5a22c82cd5a 100644
--- a/apps/meteor/client/views/home/DefaultHomePage.tsx
+++ b/apps/meteor/client/views/home/DefaultHomePage.tsx
@@ -28,7 +28,7 @@ const DefaultHomePage = (): ReactElement => {
 		<Page color='default' is='main' data-qa='page-home' data-qa-type='default' background='tint'>
 			<HomePageHeader />
 			<PageScrollableContent>
-				<Box is='h2' fontScale='h1' data-qa-id='homepage-welcome-text'>
+				<Box is='h2' fontScale='h1' mb='x20' data-qa-id='homepage-welcome-text'>
 					{t('Welcome_to', { Site_Name: workspaceName || 'Rocket.Chat' })}
 				</Box>
 				<Box is='h3' fontScale='h3' mb='x16'>
@@ -59,7 +59,7 @@ const DefaultHomePage = (): ReactElement => {
 					</HomepageGridItem>
 				</Grid>
 				{displayCustomBody && (
-					<Box mb='x16'>
+					<Box mbs='x32' mbe='x16'>
 						<CustomHomePageContent />
 					</Box>
 				)}
diff --git a/apps/meteor/client/views/home/HomepageGridItem.tsx b/apps/meteor/client/views/home/HomepageGridItem.tsx
index e61784320153..95a28f7903d0 100644
--- a/apps/meteor/client/views/home/HomepageGridItem.tsx
+++ b/apps/meteor/client/views/home/HomepageGridItem.tsx
@@ -9,7 +9,7 @@ const HomepageGridItem = ({ children }: { children: ReactNode }): ReactElement =
 	const isMedium = !breakpoints.includes('lg');
 
 	return (
-		<Grid.Item xs={4} sm={4} md={4} lg={6} xl={4} maxWidth={isMedium ? '100%' : '50%'} flexGrow={1}>
+		<Grid.Item xs={4} sm={4} md={4} lg={6} xl={4} p='x8' maxWidth={isMedium ? '100%' : '50%'} flexGrow={1}>
 			{children}
 		</Grid.Item>
 	);
diff --git a/packages/ui-client/src/components/Card/CardFooterWrapper.tsx b/packages/ui-client/src/components/Card/CardFooterWrapper.tsx
index 93001f2c1594..f0e7dc987c86 100644
--- a/packages/ui-client/src/components/Card/CardFooterWrapper.tsx
+++ b/packages/ui-client/src/components/Card/CardFooterWrapper.tsx
@@ -1,6 +1,6 @@
 import { Box } from '@rocket.chat/fuselage';
 import type { ReactElement, ReactNode } from 'react';
 
-const CardFooterWrapper = ({ children }: { children: ReactNode }): ReactElement => <Box mbs='x24'>{children}</Box>;
+const CardFooterWrapper = ({ children }: { children: ReactNode }): ReactElement => <Box mbs='x16'>{children}</Box>;
 
 export default CardFooterWrapper;
diff --git a/packages/ui-client/src/components/Card/CardTitle.tsx b/packages/ui-client/src/components/Card/CardTitle.tsx
index 5448125f0cef..877350887bf3 100644
--- a/packages/ui-client/src/components/Card/CardTitle.tsx
+++ b/packages/ui-client/src/components/Card/CardTitle.tsx
@@ -2,7 +2,7 @@ import { Box } from '@rocket.chat/fuselage';
 import type { FC } from 'react';
 
 const CardTitle: FC = ({ children }) => (
-	<Box mb='x8' fontScale='h4' color='default'>
+	<Box mbe='x12' fontScale='h4' color='default'>
 		{children}
 	</Box>
 );