remove prop variant from Card. Set bg='light'and color='default'

RocketChat · Jan 20, 2023 · 5a6e4a8 · 5a6e4a8
1 parent afae919
commit 5a6e4a8
Show file tree

Hide file tree

Showing 9 changed files with 10 additions and 22 deletions.
diff --git a/apps/meteor/client/views/admin/settings/SettingsGroupCard.tsx b/apps/meteor/client/views/admin/settings/SettingsGroupCard.tsx
@@ -36,7 +36,7 @@ const SettingsGroupCard = ({ id, title, description }: SettingsGroupCardProps):
 	});
 
 	return (
-		<Card data-qa-id={id} variant='light'>
+		<Card data-qa-id={id}>
 			<Card.Title>{t(title)}</Card.Title>
 			<Card.Body height='x88'>
 				<Box className={clampStyle}>

diff --git a/apps/meteor/client/views/home/cards/AddUsersCard.tsx b/apps/meteor/client/views/home/cards/AddUsersCard.tsx
@@ -13,7 +13,7 @@ const AddUsersCard = (): ReactElement => {
 	};
 
 	return (
-		<Card variant='light' data-qa-id='homepage-add-users-card'>
+		<Card data-qa-id='homepage-add-users-card'>
 			<Card.Title>{t('Add_users')}</Card.Title>
 			<Card.Body>{t('Invite_and_add_members_to_this_workspace_to_start_communicating')}</Card.Body>
 			<Card.FooterWrapper>

diff --git a/apps/meteor/client/views/home/cards/CreateChannelsCard.tsx b/apps/meteor/client/views/home/cards/CreateChannelsCard.tsx
@@ -13,7 +13,7 @@ const CreateChannelsCard = (): ReactElement => {
 	const openCreateChannelModal = (): void => setModal(<CreateChannelWithData onClose={(): void => setModal(null)} />);
 
 	return (
-		<Card variant='light' data-qa-id='homepage-create-channels-card'>
+		<Card data-qa-id='homepage-create-channels-card'>
 			<Card.Title>{t('Create_channels')}</Card.Title>
 			<Card.Body>{t('Create_a_public_channel_that_new_workspace_members_can_join')}</Card.Body>
 			<Card.FooterWrapper>

diff --git a/apps/meteor/client/views/home/cards/DesktopAppsCard.tsx b/apps/meteor/client/views/home/cards/DesktopAppsCard.tsx
@@ -12,7 +12,7 @@ const DesktopAppsCard = (): ReactElement => {
 	const t = useTranslation();
 
 	return (
-		<Card variant='light' data-qa-id='homepage-desktop-apps-card'>
+		<Card data-qa-id='homepage-desktop-apps-card'>
 			<Card.Title>{t('Desktop_apps')}</Card.Title>
 			<Card.Body>{t('Install_rocket_chat_on_your_preferred_desktop_platform')}</Card.Body>
 			<Card.FooterWrapper>

diff --git a/apps/meteor/client/views/home/cards/DocumentationCard.tsx b/apps/meteor/client/views/home/cards/DocumentationCard.tsx
@@ -10,7 +10,7 @@ const DocumentationCard = (): ReactElement => {
 	const t = useTranslation();
 
 	return (
-		<Card variant='light' data-qa-id='homepage-documentation-card'>
+		<Card data-qa-id='homepage-documentation-card'>
 			<Card.Title>{t('Documentation')}</Card.Title>
 			<Card.Body>{t('Learn_how_to_unlock_the_myriad_possibilities_of_rocket_chat')}</Card.Body>
 			<Card.FooterWrapper>

diff --git a/apps/meteor/client/views/home/cards/JoinRoomsCard.tsx b/apps/meteor/client/views/home/cards/JoinRoomsCard.tsx
@@ -13,7 +13,7 @@ const JoinRoomsCard = (): ReactElement => {
 	};
 
 	return (
-		<Card variant='light' data-qa-id='homepage-join-rooms-card'>
+		<Card data-qa-id='homepage-join-rooms-card'>
 			<Card.Title>{t('Join_rooms')}</Card.Title>
 			<Card.Body>{t('Discover_public_channels_and_teams_in_the_workspace_directory')}</Card.Body>
 			<Card.FooterWrapper>

diff --git a/apps/meteor/client/views/home/cards/MobileAppsCard.tsx b/apps/meteor/client/views/home/cards/MobileAppsCard.tsx
@@ -11,7 +11,7 @@ const MobileAppsCard = (): ReactElement => {
 	const t = useTranslation();
 
 	return (
-		<Card variant='light' data-qa-id='homepage-mobile-apps-card'>
+		<Card data-qa-id='homepage-mobile-apps-card'>
 			<Card.Title>{t('Mobile_apps')}</Card.Title>
 			<Card.Body>{t('Take_rocket_chat_with_you_with_mobile_applications')}</Card.Body>
 			<Card.FooterWrapper>

diff --git a/apps/meteor/ee/client/views/admin/engagementDashboard/EngagementDashboardCard.tsx b/apps/meteor/ee/client/views/admin/engagementDashboard/EngagementDashboardCard.tsx
@@ -12,7 +12,7 @@ type EngagementDashboardCardProps = {
 
 const EngagementDashboardCard = ({ children, title = undefined }: EngagementDashboardCardProps): ReactElement => (
 	<Box mb='x16'>
-		<Card variant='light'>
+		<Card>
 			{title && <Card.Title>{title}</Card.Title>}
 			<Card.Body>
 				<Card.Col>

diff --git a/packages/ui-client/src/components/Card/Card.tsx b/packages/ui-client/src/components/Card/Card.tsx
@@ -1,20 +1,8 @@
 import { Box } from '@rocket.chat/fuselage';
 import type { FC } from 'react';
 
-type CardProps = {
-	variant?: 'light' | 'tint';
-};
-
-const Card: FC<CardProps> = ({ variant, ...props }: CardProps) => (
-	<Box
-		borderRadius='x8'
-		p='x20'
-		height='full'
-		display='flex'
-		flexDirection='column'
-		backgroundColor={variant === 'light' ? 'light' : 'tint'}
-		{...props}
-	/>
+const Card: FC = (props) => (
+	<Box borderRadius='x8' p='x20' height='full' display='flex' flexDirection='column' bg='light' color='default' {...props} />
 );
 
 export default Card;