Merge pull request #11573 from strapi/typography-up-providers

[DS] Typography in Users&Permissions/Providers
This commit is contained in:
ELABBASSI Hicham 2021-11-16 11:10:11 +01:00 committed by GitHub
commit 4f34eaceba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -19,7 +19,7 @@ import { HeaderLayout, Layout, ContentLayout } from '@strapi/design-system/Layou
import { Main } from '@strapi/design-system/Main'; import { Main } from '@strapi/design-system/Main';
import { useNotifyAT } from '@strapi/design-system/LiveRegions'; import { useNotifyAT } from '@strapi/design-system/LiveRegions';
import { Table, Thead, Tr, Th, Tbody, Td } from '@strapi/design-system/Table'; import { Table, Thead, Tr, Th, Tbody, Td } from '@strapi/design-system/Table';
import { Text, TableLabel } from '@strapi/design-system/Text'; import { Typography } from '@strapi/design-system/Typography';
import { VisuallyHidden } from '@strapi/design-system/VisuallyHidden'; import { VisuallyHidden } from '@strapi/design-system/VisuallyHidden';
import { IconButton } from '@strapi/design-system/IconButton'; import { IconButton } from '@strapi/design-system/IconButton';
import Pencil from '@strapi/icons/Pencil'; import Pencil from '@strapi/icons/Pencil';
@ -167,31 +167,31 @@ export const ProvidersPage = () => {
<Thead> <Thead>
<Tr> <Tr>
<Th> <Th>
<TableLabel textColor="neutral600"> <Typography variant="sigma" textColor="neutral600">
<VisuallyHidden> <VisuallyHidden>
{formatMessage({ id: getTrad('Providers.image'), defaultMessage: 'Image' })} {formatMessage({ id: getTrad('Providers.image'), defaultMessage: 'Image' })}
</VisuallyHidden> </VisuallyHidden>
</TableLabel> </Typography>
</Th> </Th>
<Th> <Th>
<TableLabel textColor="neutral600"> <Typography variant="sigma" textColor="neutral600">
{formatMessage({ id: getTrad('Providers.name'), defaultMessage: 'Name' })} {formatMessage({ id: getTrad('Providers.name'), defaultMessage: 'Name' })}
</TableLabel> </Typography>
</Th> </Th>
<Th> <Th>
<TableLabel textColor="neutral600"> <Typography variant="sigma" textColor="neutral600">
{formatMessage({ id: getTrad('Providers.status'), defaultMessage: 'Status' })} {formatMessage({ id: getTrad('Providers.status'), defaultMessage: 'Status' })}
</TableLabel> </Typography>
</Th> </Th>
<Th> <Th>
<TableLabel> <Typography variant="sigma">
<VisuallyHidden> <VisuallyHidden>
{formatMessage({ {formatMessage({
id: getTrad('Providers.settings'), id: getTrad('Providers.settings'),
defaultMessage: 'Settings', defaultMessage: 'Settings',
})} })}
</VisuallyHidden> </VisuallyHidden>
</TableLabel> </Typography>
</Th> </Th>
</Tr> </Tr>
</Thead> </Thead>
@ -208,12 +208,12 @@ export const ProvidersPage = () => {
<FontAwesomeIcon icon={provider.icon} /> <FontAwesomeIcon icon={provider.icon} />
</Td> </Td>
<Td width="45%"> <Td width="45%">
<Text highlighted textColor="neutral800"> <Typography fontWeight="semiBold" textColor="neutral800">
{provider.name} {provider.name}
</Text> </Typography>
</Td> </Td>
<Td width="65%"> <Td width="65%">
<Text <Typography
textColor={provider.enabled ? 'success600' : 'danger600'} textColor={provider.enabled ? 'success600' : 'danger600'}
data-testid={`enable-${provider.name}`} data-testid={`enable-${provider.name}`}
> >
@ -226,7 +226,7 @@ export const ProvidersPage = () => {
id: getTrad('Providers.disabled'), id: getTrad('Providers.disabled'),
defaultMessage: 'Disabled', defaultMessage: 'Disabled',
})} })}
</Text> </Typography>
</Td> </Td>
<Td {...stopPropagation}> <Td {...stopPropagation}>
{canUpdate && ( {canUpdate && (