Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-09-01 13:47:27 +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 }) => ({ const StyledGrid = styled('div')(({ theme }) => ({
gridTemplateColumns: 'repeat(auto-fit, minmax(350px, 1fr))', gridTemplateColumns: 'repeat(auto-fit, minmax(350px, 1fr))',
gridAutoRows: '1fr',
gap: theme.spacing(2), gap: theme.spacing(2),
display: 'grid', display: 'grid',
})); }));
@ -24,6 +25,7 @@ export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = ({
{providers?.map(({ name, displayName, description }) => ( {providers?.map(({ name, displayName, description }) => (
<IntegrationCard <IntegrationCard
key={name} key={name}
icon={name}
title={displayName || name} title={displayName || name}
description={description} description={description}
/> />

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

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