Regression: Home cards UI tweaks

apps/meteor/client/components/Card/Card.tsx

@@ -7,10 +7,8 @@ type CardProps = {
 
 const Card: FC<CardProps> = ({ variant, ...props }: CardProps) => (
 	<Box
-		borderRadius='x2'
-		pbs='x20'
-		pbe='x28'
-		pi='x20'
+		borderRadius='x4'
+		p='x20'
 		height='full'
 		display='flex'
 		flexDirection='column'

apps/meteor/client/components/Card/Body.tsx → apps/meteor/client/components/Card/CardBody.tsx

@@ -1,15 +1,15 @@
 import { Box } from '@rocket.chat/fuselage';
 import React, { FC, CSSProperties, ComponentProps } from 'react';
 
-type BodyProps = {
+type CardBodyProps = {
 	flexDirection?: CSSProperties['flexDirection'];
 	height?: ComponentProps<typeof Box>['height'];
 };
 
-const Body: FC<BodyProps> = ({ children, flexDirection = 'row', height }) => (
+const CardBody: FC<CardBodyProps> = ({ children, flexDirection = 'row', height }) => (
 	<Box mb='x8' display='flex' flexDirection={flexDirection} flexGrow={1} height={height}>
 		{children}
 	</Box>
 );
 
-export default Body;
+export default CardBody;

apps/meteor/client/components/Card/Col.tsx → apps/meteor/client/components/Card/CardCol.tsx

@@ -1,10 +1,10 @@
 import { Box } from '@rocket.chat/fuselage';
 import React, { FC } from 'react';
 
-const Col: FC = ({ children }) => (
+const CardCol: FC = ({ children }) => (
 	<Box rcx-card-col display='flex' alignSelf='stretch' flexGrow={1} flexDirection='column' fontScale='c1'>
 		{children}
 	</Box>
 );
 
-export default Col;
+export default CardCol;

apps/meteor/client/components/Card/CardColSection.tsx

@@ -0,0 +1,6 @@
+import { Box } from '@rocket.chat/fuselage';
+import React, { ComponentProps, FC } from 'react';
+
+const CardColSection: FC<ComponentProps<typeof Box>> = (props) => <Box rcx-card-col-section mb='x8' color='info' {...props} />;
+
+export default CardColSection;

apps/meteor/client/components/Card/ColTitle.tsx → apps/meteor/client/components/Card/CardColTitle.tsx

@@ -1,10 +1,10 @@
 import { Box } from '@rocket.chat/fuselage';
 import React, { FC } from 'react';
 
-const ColTitle: FC = ({ children }) => (
+const CardColTitle: FC = ({ children }) => (
 	<Box fontScale='c2' m='none'>
 		{children}
 	</Box>
 );
 
-export default ColTitle;
+export default CardColTitle;

apps/meteor/client/components/Card/CardFooter.tsx

@@ -0,0 +1,6 @@
+import { ButtonGroup } from '@rocket.chat/fuselage';
+import React, { FC } from 'react';
+
+const CardFooter: FC = ({ children }) => <ButtonGroup medium>{children}</ButtonGroup>;
+
+export default CardFooter;

apps/meteor/client/components/Card/CardFooterWrapper.tsx

@@ -1,6 +1,6 @@
 import { Box } from '@rocket.chat/fuselage';
 import React, { ReactElement, ReactNode } from 'react';
 
-const CardFooterWrapper = ({ children }: { children: ReactNode }): ReactElement => <Box mbs='x16'>{children}</Box>;
+const CardFooterWrapper = ({ children }: { children: ReactNode }): ReactElement => <Box mbs='x24'>{children}</Box>;
 
 export default CardFooterWrapper;

apps/meteor/client/components/Card/Title.tsx → apps/meteor/client/components/Card/CardTitle.tsx

@@ -1,10 +1,10 @@
 import { Box } from '@rocket.chat/fuselage';
 import React, { FC } from 'react';
 
-const Title: FC = ({ children }) => (
-	<Box mb='x8' fontScale='p2m'>
+const CardTitle: FC = ({ children }) => (
+	<Box mb='x8' fontScale='h4'>
 		{children}
 	</Box>
 );
 
-export default Title;
+export default CardTitle;

apps/meteor/client/components/Card/index.ts

@@ -1,23 +1,25 @@
-import Body from './Body';
 import Card from './Card';
+import CardBody from './CardBody';
+import CardCol from './CardCol';
+import CardColSection from './CardColSection';
+import CardColTitle from './CardColTitle';
 import CardDivider from './CardDivider';
+import CardFooter from './CardFooter';
+import CardFooterWrapper from './CardFooterWrapper';
 import CardIcon from './CardIcon';
-import Col from './Col';
-import ColSection from './ColSection';
-import ColTitle from './ColTitle';
-import Footer from './Footer';
-import Title from './Title';
+import Title from './CardTitle';
 
 export const DOUBLE_COLUMN_CARD_WIDTH = 552;
 
 export default Object.assign(Card, {
 	Title,
-	Body,
-	Col: Object.assign(Col, {
-		Title: ColTitle,
-		Section: ColSection,
+	Body: CardBody,
+	Col: Object.assign(CardCol, {
+		Title: CardColTitle,
+		Section: CardColSection,
 	}),
-	Footer,
+	Footer: CardFooter,
+	FooterWrapper: CardFooterWrapper,
 	Divider: CardDivider,
 	Icon: CardIcon,
 });

apps/meteor/client/views/admin/settings/SettingsGroupCard.tsx

@@ -35,9 +35,7 @@ const SettingsGroupCard = ({ id, title, description }: SettingsGroupCard): React
 
 	return (
 		<Card data-qa-id={id} variant='light'>
-			<Card.Title>
-				<Box fontScale='h4'>{t(title)}</Box>
-			</Card.Title>
+			<Card.Title>{t(title)}</Card.Title>
 			<Card.Body height='x88'>
 				<Box className={clampStyle}>
 					{description && t.has(description) && <MarkdownText variant='inlineWithoutBreaks' content={t(description)} />}

apps/meteor/client/views/home/DefaultHomePage.tsx

@@ -26,10 +26,10 @@ const DefaultHomePage = (): ReactElement => {
 		<Page data-qa='page-home' data-qa-type='default' backgroundColor='neutral-100'>
 			<HomePageHeader />
 			<PageScrollableContent>
-				<Box is='h1' fontScale='h1' minHeight='x40' data-qa-id='homepage-welcome-text'>
+				<Box is='h1' fontScale='h1' data-qa-id='homepage-welcome-text'>
 					{t('Welcome_to', { Site_Name: workspaceName || 'Rocket.Chat' })}
 				</Box>
-				<Box is='h3' fontScale='h3' marginBlock='x16'>
+				<Box is='h3' fontScale='h3' mb='x16'>
 					{t('Some_ideas_to_get_you_started')}
 				</Box>
 				<Grid>

apps/meteor/client/views/home/cards/AddUsersCard.tsx

@@ -2,11 +2,7 @@ import { Button } from '@rocket.chat/fuselage';
 import { useTranslation, useRoute } from '@rocket.chat/ui-contexts';
 import React, { ReactElement } from 'react';
 
-import CardBody from '../../../components/Card/Body';
-import Card from '../../../components/Card/Card';
-import CardFooterWrapper from '../../../components/Card/CardFooterWrapper';
-import CardIcon from '../../../components/Card/CardIcon';
-import CardTitle from '../../../components/Card/Title';
+import Card from '../../../components/Card';
 
 const AddUsersCard = (): ReactElement => {
 	const t = useTranslation();
@@ -18,18 +14,15 @@ const AddUsersCard = (): ReactElement => {
 
 	return (
 		<Card variant='light' data-qa-id='homepage-add-users-card'>
-			<CardTitle>
-				{t('Add_users')}
-				<CardIcon name='info' mis='x4' />
-			</CardTitle>
-
-			<CardBody>{t('Invite_and_add_members_to_this_workspace_to_start_communicating')}</CardBody>
-
-			<CardFooterWrapper>
-				<Button primary onClick={handleOpenUsersRoute}>
-					{t('Add_users')}
-				</Button>
-			</CardFooterWrapper>
+			<Card.Title>{t('Add_users')}</Card.Title>
+			<Card.Body>{t('Invite_and_add_members_to_this_workspace_to_start_communicating')}</Card.Body>
+			<Card.FooterWrapper>
+				<Card.Footer>
+					<Button primary onClick={handleOpenUsersRoute}>
+						{t('Add_users')}
+					</Button>
+				</Card.Footer>
+			</Card.FooterWrapper>
 		</Card>
 	);
 };

apps/meteor/client/views/home/cards/CreateChannelsCard.tsx

@@ -2,10 +2,7 @@ import { Button } from '@rocket.chat/fuselage';
 import { useTranslation, useSetModal } from '@rocket.chat/ui-contexts';
 import React, { ReactElement } from 'react';
 
-import CardBody from '../../../components/Card/Body';
-import Card from '../../../components/Card/Card';
-import CardFooterWrapper from '../../../components/Card/CardFooterWrapper';
-import CardTitle from '../../../components/Card/Title';
+import Card from '../../../components/Card';
 import CreateChannelWithData from '../../../sidebar/header/CreateChannelWithData';
 
 const CreateChannelsCard = (): ReactElement => {
@@ -16,13 +13,13 @@ const CreateChannelsCard = (): ReactElement => {
 
 	return (
 		<Card variant='light' data-qa-id='homepage-create-channels-card'>
-			<CardTitle>{t('Create_channels')}</CardTitle>
-
-			<CardBody>{t('Create_a_public_channel_that_new_workspace_members_can_join')}</CardBody>
-
-			<CardFooterWrapper>
-				<Button onClick={openCreateChannelModal}>{t('Create_channel')}</Button>
-			</CardFooterWrapper>
+			<Card.Title>{t('Create_channels')}</Card.Title>
+			<Card.Body>{t('Create_a_public_channel_that_new_workspace_members_can_join')}</Card.Body>
+			<Card.FooterWrapper>
+				<Card.Footer>
+					<Button onClick={openCreateChannelModal}>{t('Create_channel')}</Button>
+				</Card.Footer>
+			</Card.FooterWrapper>
 		</Card>
 	);
 };

apps/meteor/client/views/home/cards/DesktopAppsCard.tsx

@@ -3,11 +3,7 @@ import { ExternalLink } from '@rocket.chat/ui-client';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { ReactElement } from 'react';
 
-import CardBody from '../../../components/Card/Body';
-import Card from '../../../components/Card/Card';
-import CardFooterWrapper from '../../../components/Card/CardFooterWrapper';
-import CardFooter from '../../../components/Card/Footer';
-import CardTitle from '../../../components/Card/Title';
+import Card from '../../../components/Card';
 
 const WINDOWS_APP_URL = 'https://go.rocket.chat/i/hp-desktop-app-windows';
 const LINUX_APP_URL = 'https://go.rocket.chat/i/hp-desktop-app-linux';
@@ -18,12 +14,10 @@ const DesktopAppsCard = (): ReactElement => {
 
 	return (
 		<Card variant='light' data-qa-id='homepage-desktop-apps-card'>
-			<CardTitle>{t('Desktop_apps')}</CardTitle>
-
-			<CardBody>{t('Install_rocket_chat_on_the_your_preferred_desktop_platform')}</CardBody>
-
-			<CardFooterWrapper>
-				<CardFooter>
+			<Card.Title>{t('Desktop_apps')}</Card.Title>
+			<Card.Body>{t('Install_rocket_chat_on_the_your_preferred_desktop_platform')}</Card.Body>
+			<Card.FooterWrapper>
+				<Card.Footer>
 					<ExternalLink to={WINDOWS_APP_URL}>
 						<Button>{t('Platform_Windows')}</Button>
 					</ExternalLink>
@@ -33,8 +27,8 @@ const DesktopAppsCard = (): ReactElement => {
 					<ExternalLink to={MAC_APP_URL}>
 						<Button>{t('Platform_Mac')}</Button>
 					</ExternalLink>
-				</CardFooter>
-			</CardFooterWrapper>
+				</Card.Footer>
+			</Card.FooterWrapper>
 		</Card>
 	);
 };

apps/meteor/client/views/home/cards/DocumentationCard.tsx

@@ -3,11 +3,7 @@ import { ExternalLink } from '@rocket.chat/ui-client';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { ReactElement } from 'react';
 
-import CardBody from '../../../components/Card/Body';
-import Card from '../../../components/Card/Card';
-import CardFooterWrapper from '../../../components/Card/CardFooterWrapper';
-import CardFooter from '../../../components/Card/Footer';
-import CardTitle from '../../../components/Card/Title';
+import Card from '../../../components/Card';
 
 const DOCS_URL = 'https://go.rocket.chat/i/hp-documentation';
 
@@ -16,17 +12,15 @@ const DocumentationCard = (): ReactElement => {
 
 	return (
 		<Card variant='light' data-qa-id='homepage-documentation-card'>
-			<CardTitle>{t('Documentation')}</CardTitle>
-
-			<CardBody>{t('Learn_how_to_unlock_the_myriad_possibilities_of_rocket_chat')}</CardBody>
-
-			<CardFooterWrapper>
-				<CardFooter>
+			<Card.Title>{t('Documentation')}</Card.Title>
+			<Card.Body>{t('Learn_how_to_unlock_the_myriad_possibilities_of_rocket_chat')}</Card.Body>
+			<Card.FooterWrapper>
+				<Card.Footer>
 					<ExternalLink to={DOCS_URL}>
 						<Button>{t('See_documentation')}</Button>
 					</ExternalLink>
-				</CardFooter>
-			</CardFooterWrapper>
+				</Card.Footer>
+			</Card.FooterWrapper>
 		</Card>
 	);
 };

apps/meteor/client/views/home/cards/JoinRoomsCard.tsx

@@ -2,10 +2,7 @@ import { Button } from '@rocket.chat/fuselage';
 import { useTranslation, useRoute } from '@rocket.chat/ui-contexts';
 import React, { ReactElement } from 'react';
 
-import CardBody from '../../../components/Card/Body';
-import Card from '../../../components/Card/Card';
-import CardFooterWrapper from '../../../components/Card/CardFooterWrapper';
-import CardTitle from '../../../components/Card/Title';
+import Card from '../../../components/Card';
 
 const JoinRoomsCard = (): ReactElement => {
 	const t = useTranslation();
@@ -17,13 +14,13 @@ const JoinRoomsCard = (): ReactElement => {
 
 	return (
 		<Card variant='light' data-qa-id='homepage-join-rooms-card'>
-			<CardTitle>{t('Join_rooms')}</CardTitle>
-
-			<CardBody>{t('Discover_public_channels_and_teams_in_the_workspace_directory')}</CardBody>
-
-			<CardFooterWrapper>
-				<Button onClick={handleDirectory}>{t('Open_directory')}</Button>
-			</CardFooterWrapper>
+			<Card.Title>{t('Join_rooms')}</Card.Title>
+			<Card.Body>{t('Discover_public_channels_and_teams_in_the_workspace_directory')}</Card.Body>
+			<Card.FooterWrapper>
+				<Card.Footer>
+					<Button onClick={handleDirectory}>{t('Open_directory')}</Button>
+				</Card.Footer>
+			</Card.FooterWrapper>
 		</Card>
 	);
 };

apps/meteor/client/views/home/cards/MobileAppsCard.tsx

@@ -3,11 +3,7 @@ import { ExternalLink } from '@rocket.chat/ui-client';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { ReactElement } from 'react';
 
-import CardBody from '../../../components/Card/Body';
-import Card from '../../../components/Card/Card';
-import CardFooterWrapper from '../../../components/Card/CardFooterWrapper';
-import CardFooter from '../../../components/Card/Footer';
-import CardTitle from '../../../components/Card/Title';
+import Card from '../../../components/Card';
 
 const GOOGLE_PLAY_URL = 'https://go.rocket.chat/i/hp-mobile-app-google';
 const APP_STORE_URL = 'https://go.rocket.chat/i/hp-mobile-app-apple';
@@ -17,20 +13,18 @@ const MobileAppsCard = (): ReactElement => {
 
 	return (
 		<Card variant='light' data-qa-id='homepage-mobile-apps-card'>
-			<CardTitle>{t('Mobile_apps')}</CardTitle>
-
-			<CardBody>{t('Take_rocket_chat_with_you_with_mobile_applications')}</CardBody>
-
-			<CardFooterWrapper>
-				<CardFooter>
+			<Card.Title>{t('Mobile_apps')}</Card.Title>
+			<Card.Body>{t('Take_rocket_chat_with_you_with_mobile_applications')}</Card.Body>
+			<Card.FooterWrapper>
+				<Card.Footer>
 					<ExternalLink to={GOOGLE_PLAY_URL}>
 						<Button>{t('Google_Play')}</Button>
 					</ExternalLink>
 					<ExternalLink to={APP_STORE_URL}>
 						<Button>{t('App_Store')}</Button>
 					</ExternalLink>
-				</CardFooter>
-			</CardFooterWrapper>
+				</Card.Footer>
+			</Card.FooterWrapper>
 		</Card>
 	);
 };