Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-27 13:49:10 +02:00
Code Issues Projects Releases Wiki Activity

update style of integration cards

Browse Source
This commit is contained in:
Tymoteusz Czech 2023-08-18 14:05:19 +02:00
parent 7b0fbb22d6
commit 67b04c9731
No known key found for this signature in database
GPG Key ID: 133555230D88D75F
2 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx
View File

@ -11,6 +11,7 @@ interface IAvailableIntegrationsProps {
const StyledGrid = styled('div')(({ theme }) => ({
gridTemplateColumns: 'repeat(auto-fit, minmax(350px, 1fr))',
gridAutoRows: '1fr',
gap: theme.spacing(2),
display: 'grid',
}));
@ -24,6 +25,7 @@ export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = ({
{providers?.map(({ name, displayName, description }) => (
<IntegrationCard
key={name}
icon={name}
title={displayName || name}
description={description}
/>

16
frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCard.tsx
View File

@ -1,7 +1,9 @@
import { VFC } from 'react';
import { Box, styled, Typography } from '@mui/material';
import { IntegrationIcon } from '../IntegrationIcon/IntegrationIcon';
interface IIntegrationCardProps {
icon: string;
title: string;
description?: string;
isEnabled?: boolean;
@ -9,13 +11,19 @@ interface IIntegrationCardProps {
}
const StyledBox = styled(Box)(({ theme }) => ({
padding: theme.spacing(2),
padding: theme.spacing(3),
borderRadius: `${theme.shape.borderRadiusMedium}px`,
border: `1px solid ${theme.palette.divider}`,
boxShadow: theme.shadows[1],
}));
const StyledHeader = styled(Typography)(({ theme }) => ({
display: 'flex',
alignItems: 'center',
marginBottom: theme.spacing(2),
}));
export const IntegrationCard: VFC<IIntegrationCardProps> = ({
icon,
title,
description,
isDeprecated,
@ -23,7 +31,9 @@ export const IntegrationCard: VFC<IIntegrationCardProps> = ({
}) => {
return (
<StyledBox>
<Typography variant="h3">{title}</Typography>
<StyledHeader variant="h3">
<IntegrationIcon name={icon as string} /> {title}
</StyledHeader>
<Typography variant="body1">{description}</Typography>
</StyledBox>
);