Chore: Add spacing adjustments Home page (#27367)

RocketChat · Dec 6, 2022 · c8af645 · c8af645
1 parent 146b096
commit c8af645
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>
 );