replaced Text components with Typography

This commit is contained in:
ronronscelestes 2021-11-09 17:41:21 +01:00
parent 42b2108742
commit fb9fac6f48
4 changed files with 17 additions and 15 deletions

View File

@ -23,7 +23,7 @@ import { Button } from '@strapi/design-system/Button';
import { Grid, GridItem } from '@strapi/design-system/Grid';
import { HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
import { Link } from '@strapi/design-system/Link';
import { H3 } from '@strapi/design-system/Text';
import { Typography } from '@strapi/design-system/Typography';
import { Main } from '@strapi/design-system/Main';
import { Stack } from '@strapi/design-system/Stack';
import ArrowLeft from '@strapi/icons/ArrowLeft';
@ -216,12 +216,12 @@ const EditPage = ({ canUpdate }) => {
paddingRight={7}
>
<Stack size={4}>
<H3 as="h2">
<Typography variant="delta" as="h2">
{formatMessage({
id: 'app.components.Users.ModalCreateBody.block-title.details',
defaultMessage: 'Details',
})}
</H3>
</Typography>
<Grid gap={5}>
{layout.map(row => {
return row.map(input => {
@ -251,12 +251,12 @@ const EditPage = ({ canUpdate }) => {
paddingRight={7}
>
<Stack size={4}>
<H3 as="h2">
<Typography variant="delta" as="h2">
{formatMessage({
id: 'app.components.Users.ModalCreateBody.block-title.login',
defaultMessage: 'Login settings',
})}
</H3>
</Typography>
<Grid gap={5}>
<GridItem col={6} xs={12}>
<SelectRoles

View File

@ -4,7 +4,7 @@ import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
import { Box } from '@strapi/design-system/Box';
import { IconButton } from '@strapi/design-system/IconButton';
import { Flex } from '@strapi/design-system/Flex';
import { Text } from '@strapi/design-system/Text';
import { Typography } from '@strapi/design-system/Typography';
import { Tbody, Td, Tr } from '@strapi/design-system/Table';
import Pencil from '@strapi/icons/Pencil';
import Trash from '@strapi/icons/Trash';
@ -64,7 +64,7 @@ const TableRows = ({
{typeof cellFormatter === 'function' ? (
cellFormatter(data, { key, name, ...rest })
) : (
<Text textColor="neutral800">{data[name] || '-'}</Text>
<Typography textColor="neutral800">{data[name] || '-'}</Typography>
)}
</Td>
);

View File

@ -12,7 +12,7 @@ import { Breadcrumbs, Crumb } from '@strapi/design-system/Breadcrumbs';
import { Box } from '@strapi/design-system/Box';
import { Button } from '@strapi/design-system/Button';
import { Stack } from '@strapi/design-system/Stack';
import { H2 } from '@strapi/design-system/Text';
import { Typography } from '@strapi/design-system/Typography';
import { Formik } from 'formik';
import { Form, GenericInput, useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
@ -113,12 +113,12 @@ const ModalForm = ({ queryName, onToggle }) => {
<Stack size={6}>
{currentStep !== 'create' && <MagicLink registrationToken={registrationToken} />}
<Box>
<H2>
<Typography variant="beta">
{formatMessage({
id: 'app.components.Users.ModalCreateBody.block-title.details',
defaultMessage: 'Details',
})}
</H2>
</Typography>
<Box paddingTop={4}>
<Stack size={1}>
<Grid gap={5}>
@ -142,12 +142,12 @@ const ModalForm = ({ queryName, onToggle }) => {
</Box>
</Box>
<Box>
<H2>
<Typography variant="beta">
{formatMessage({
id: 'app.components.Users.ModalCreateBody.block-title.login',
defaultMessage: 'Login settings',
})}
</H2>
</Typography>
<Box paddingTop={4}>
<Grid gap={5}>
<GridItem col={6} xs={12}>

View File

@ -1,6 +1,6 @@
import React from 'react';
import { Flex } from '@strapi/design-system/Flex';
import { Text } from '@strapi/design-system/Text';
import { Typography } from '@strapi/design-system/Typography';
import { Status } from '@strapi/helper-plugin';
const tableHeaders = [
@ -25,7 +25,9 @@ const tableHeaders = [
metadatas: { label: 'Roles', sortable: false },
/* eslint-disable react/prop-types */
cellFormatter: ({ roles }) => {
return <Text textColor="neutral800">{roles.map(role => role.name).join(',\n')}</Text>;
return (
<Typography textColor="neutral800">{roles.map(role => role.name).join(',\n')}</Typography>
);
},
/* eslint-enable react/prop-types */
},
@ -43,7 +45,7 @@ const tableHeaders = [
return (
<Flex>
<Status isActive={isActive} variant={isActive ? 'success' : 'danger'} />
<Text textColor="neutral800">{isActive ? 'Active' : 'Inactive'}</Text>
<Typography textColor="neutral800">{isActive ? 'Active' : 'Inactive'}</Typography>
</Flex>
);
},